/*
Theme Name: LaughShirt
Theme URI: https://laughshirt.com
Author: Mal Hall
Author URI: https://malhall.com
Description: LaughShirt — Spreading Laughter Around the World. A photography portfolio site where fan photos are the art.
Version: 1.0
License: Private
Text Domain: laughshirt
*/

/* Google Fonts — Libre Baskerville (Bookman JF placeholder) */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════════════
       LAUGHSHIRT.COM — Design System
       Concept: Photography portfolio site (Platon, Muller,
                Chase Jarvis) where fan photos ARE the art —
                with a Shopify store living inside it.
       Aesthetic: Editorial restraint, image-led,
                  full-bleed, minimal chrome.
       ═══════════════════════════════════════════════════ */

    :root {
      --black:         #000000;
      --off-white:     #FFFFE4;
      --gold:          #F4B042;
      --cool-gray:     #5E6167;
      --infrared:      #FF2247;
      --eggplant:      #312951;
      --padres-brown:  #2F241D;
      --masters-green: #00622D;
      --tiffany:       #00FFEC;

      /* ── FONT SYSTEM ────────────────────────────────────────────────────────────
         --font-logo    → Bookman JF — "Mal Hall" nameplate + accent text
                          (Placeholder: Libre Baskerville. Swap Adobe Fonts kit on launch.)
         --font-body    → Helvetica — main font for ALL headlines, UI, body copy
         ─────────────────────────────────────────────────────────────────────────── */
      --font-logo:   'Bookman JF', 'Libre Baskerville', 'Bookman Old Style', Georgia, serif;
      --font-body:   Helvetica, 'Helvetica Neue', Arial, sans-serif;
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--black);
      color: var(--off-white);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ─── NAV ──────────────────────────────────────── */
    /* Minimal chrome — Muller/Platon approach — nav stays small and out of the way */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 300;
      display: flex; justify-content: space-between; align-items: center;
      padding: 20px 40px;
      transition: background 0.35s, backdrop-filter 0.35s;
    }
    nav.scrolled {
      background: rgba(0,0,0,0.94);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    }
    .nav-logo {
      display: flex; align-items: baseline; gap: 12px; text-decoration: none;
    }
    .nav-logo-mark {
      font-family: var(--font-body); font-size: 24px; font-weight: 700;
      letter-spacing: 0.12em; color: var(--off-white);
    }
    .nav-logo-sub {
      font-size: 10px; font-weight: 600; letter-spacing: 0.24em;
      text-transform: uppercase; color: rgba(255,255,228,0.4);
    }
    .nav-right {
      display: flex; gap: 32px; align-items: center; list-style: none;
    }
    .nav-right li a {
      font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--off-white);
      text-decoration: none; opacity: 0.5; transition: opacity 0.18s;
    }
    .nav-right li a:hover { opacity: 1; }
    .nav-shop {
      background: var(--gold);
      color: var(--black) !important;
      opacity: 1 !important;
      padding: 9px 20px;
    }
    .nav-shop:hover { opacity: 0.86 !important; }

    /* ─── HERO — Full screen photo collage (Platon style) ──  */
    .hero {
      height: 100vh; min-height: 720px;
      position: relative; overflow: hidden;
      display: flex; flex-direction: column;
      justify-content: flex-end; align-items: flex-start;
      padding: 0 40px 64px;
    }

    /* Mosaic collage — in production replace with real fan photos */
    .hero-mosaic {
      position: absolute; inset: 0;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 3px;
      background: #000;
    }
    .mosaic-cell {
      position: relative; overflow: hidden;
      transition: filter 0.6s ease;
    }
    .mosaic-cell-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center 25%;
      transition: transform 8s ease;
    }
    .hero:hover .mosaic-cell-bg { transform: scale(1.03); }

    /* Placeholder colors for fan photo spots */
    .m1 .mosaic-cell-bg { background-color: #1a2a1a; grid-row: 1/3; }
    .m1 { grid-row: 1/3; }
    .m2 .mosaic-cell-bg { background-color: var(--padres-brown); }
    .m3 .mosaic-cell-bg { background-color: var(--eggplant); }
    .m4 .mosaic-cell-bg { background-color: #1a1a2a; }
    .m5 .mosaic-cell-bg { background-color: #2a1a10; }

    .mosaic-ph {
      position: absolute; inset: 0; display: flex;
      align-items: center; justify-content: center;
      font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
      color: rgba(255,255,228,0.15);
    }

    .hero-veil {
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(
        to top, rgba(0,0,0,0.92) 0%,  rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 100%
      );
    }

    .hero-content { position: relative; z-index: 3; max-width: 720px; }

    .hero-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.34em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
      display: flex; align-items: center; gap: 10px;
    }
    .hero-label::before {
      content: ''; display: inline-block;
      width: 24px; height: 1px; background: var(--gold);
    }

    .hero-title {
      font-family: var(--font-body); font-weight: 700;
      font-size: clamp(72px, 13vw, 180px);
      color: var(--off-white); line-height: 0.86;
      letter-spacing: -0.01em; margin-bottom: 16px;
    }

    .hero-mission {
      font-size: clamp(16px, 2vw, 22px); font-weight: 300;
      color: rgba(255,255,228,0.65); line-height: 1.6;
      margin-bottom: 44px; max-width: 520px;
    }
    .hero-mission em {
      font-style: italic; color: var(--off-white); font-weight: 400;
    }

    .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

    /* Photo count badge */
    .hero-badge {
      position: absolute; top: 40%; right: 40px; z-index: 4;
      text-align: center;
    }
    .hero-badge-num {
      font-family: var(--font-body); font-weight: 700; font-size: 80px;
      color: rgba(255,255,228,0.08); line-height: 1;
    }
    .hero-badge-label {
      font-size: 9px; font-weight: 700; letter-spacing: 0.3em;
      text-transform: uppercase; color: rgba(255,255,228,0.25);
      display: block; margin-top: -8px;
    }

    /* ─── BUTTONS ─────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; text-decoration: none;
      padding: 15px 30px; transition: all 0.2s; cursor: pointer; border: none;
      font-family: var(--font-body);
    }
    .btn-gold     { background: var(--gold);      color: var(--black); }
    .btn-gold:hover { opacity: 0.86; }
    .btn-white    { background: var(--off-white);  color: var(--black); }
    .btn-white:hover { background: var(--gold); }
    .btn-ghost    { background: transparent; color: var(--off-white); border: 1px solid rgba(255,255,228,0.28); }
    .btn-ghost:hover { border-color: var(--off-white); background: rgba(255,255,228,0.05); }
    .btn-black    { background: var(--black); color: var(--off-white); border: 1px solid rgba(255,255,228,0.1); }
    .btn-black:hover { border-color: rgba(255,255,228,0.5); }

    /* ─── SECTION UTILS ──────────────────────────── */
    .section { padding: 96px 40px; }
    .label {
      font-family: var(--font-logo); font-size: 10px; font-weight: 400;
      font-style: italic; letter-spacing: 0.22em; text-transform: uppercase;
    }
    .display { font-family: var(--font-body); font-weight: 700; line-height: 0.92; letter-spacing: -0.01em; }

    /* ─── CATEGORY NAV (Muller / Chase Jarvis approach) ─  */
    /* Horizontal scroll of photo categories — by year, region, etc. */
    .cat-nav {
      background: var(--black);
      border-top: 1px solid rgba(255,255,228,0.06);
      border-bottom: 1px solid rgba(255,255,228,0.06);
      padding: 0 40px;
      display: flex; align-items: center; gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .cat-nav::-webkit-scrollbar { display: none; }
    .cat-btn {
      display: flex; align-items: center;
      padding: 20px 28px;
      font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
      text-transform: uppercase; color: rgba(255,255,228,0.4);
      text-decoration: none; white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: color 0.2s, border-color 0.2s;
      cursor: pointer; background: none; border-left: none;
      border-right: none; border-top: none;
      font-family: var(--font-body);
    }
    .cat-btn:hover, .cat-btn.active {
      color: var(--off-white); border-bottom-color: var(--gold);
    }
    .cat-count {
      font-size: 9px; color: rgba(255,255,228,0.25);
      margin-left: 8px; font-weight: 400; letter-spacing: 0.1em;
    }

    /* ─── GALLERY GRID — uniform 1:1 square tiles ────────  */
    .gallery-section { background: var(--black); padding: 0 0 80px; }
    .gallery-head {
      display: flex; justify-content: space-between; align-items: flex-end;
      padding: 64px 40px 40px;
    }
    .gallery-head .label { color: var(--gold); margin-bottom: 14px; }
    .gallery-head .display { font-size: clamp(48px, 8vw, 96px); color: var(--off-white); }

    /* Uniform square grid — works with any photo orientation */
    .gallery-grid {
      padding: 0 40px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 4px;
    }
    .g-item {
      position: relative; overflow: hidden;
      background: #111; cursor: pointer;
      text-decoration: none; display: block;
      aspect-ratio: 1 / 1;
    }
    .g-item:hover .g-img { transform: scale(1.05); filter: brightness(0.75); }
    .g-item:hover .g-info { opacity: 1; }
    .g-img {
      position: absolute; inset: 0;
      background-size: cover;
      background-position: center;   /* ← edit this per photo to adjust the crop */
      transition: transform 0.5s ease, filter 0.3s;
    }
    .g-info {
      position: absolute; inset: 0; z-index: 2;
      display: flex; flex-direction: column;
      justify-content: flex-end; padding: 20px;
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.25s;
    }
    .g-location {
      font-family: var(--font-body); font-weight: 700; font-size: 20px;
      color: var(--off-white); letter-spacing: 0.04em;
    }
    .g-fan { font-size: 11px; color: rgba(255,255,228,0.6); margin-top: 4px; }

    /* Placeholder colors — will be real fan photos */
    .c1  { background-color: #1a2830; }
    .c2  { background-color: var(--padres-brown); }
    .c3  { background-color: #1a1a2a; }
    .c4  { background-color: #2a200f; }
    .c5  { background-color: #0f2a1a; }
    .c6  { background-color: #2a0f15; }
    .c7  { background-color: #1a2a20; }
    .c8  { background-color: var(--eggplant); }
    .c9  { background-color: #2a1510; }
    .c10 { background-color: #101a2a; }

    /* ─── SUBMIT SECTION ─────────────────────────── */
    .submit-section {
      background: #080808;
      padding: 80px 40px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
      align-items: center;
      border-top: 1px solid rgba(255,255,228,0.06);
    }
    .submit-left .label { color: var(--gold); margin-bottom: 16px; }
    .submit-left .display { font-size: clamp(44px, 7vw, 96px); color: var(--off-white); }
    .submit-copy {
      font-size: 17px; line-height: 1.75; color: rgba(255,255,228,0.5);
      max-width: 420px; margin-top: 20px; margin-bottom: 36px;
    }
    .submit-stats {
      display: flex; gap: 40px; padding-top: 32px;
      border-top: 1px solid rgba(255,255,228,0.06);
    }
    .submit-stat-n {
      font-family: var(--font-body); font-weight: 700; font-size: 44px;
      color: var(--off-white); line-height: 1;
    }
    .submit-stat-l {
      font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
      text-transform: uppercase; color: rgba(255,255,228,0.35); margin-top: 6px;
    }
    .submit-right {
      border: 1px solid rgba(255,255,228,0.08);
      padding: 48px;
    }
    .submit-form-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
      text-transform: uppercase; color: rgba(255,255,228,0.35);
      margin-bottom: 8px;
    }
    .submit-field {
      width: 100%; background: rgba(255,255,228,0.04);
      border: 1px solid rgba(255,255,228,0.1);
      color: var(--off-white); font-family: var(--font-body); font-size: 14px;
      padding: 14px 18px; outline: none; margin-bottom: 20px;
      transition: border-color 0.2s;
    }
    .submit-field:focus { border-color: rgba(255,255,228,0.35); }
    .submit-field::placeholder { color: rgba(255,255,228,0.2); }
    .submit-upload {
      width: 100%;
      border: 1px dashed rgba(255,255,228,0.2);
      padding: 40px 20px;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      cursor: pointer; transition: border-color 0.2s; margin-bottom: 24px;
    }
    .submit-upload:hover { border-color: var(--gold); }
    .upload-icon {
      font-size: 32px; color: rgba(255,255,228,0.2);
    }
    .upload-text {
      font-size: 13px; color: rgba(255,255,228,0.45); text-align: center;
    }

    /* ─── SHOP SECTION ───────────────────────────── */
    .shop-section { background: var(--off-white); color: var(--black); }
    .shop-head {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 56px;
    }
    .shop-head .label { color: var(--cool-gray); margin-bottom: 14px; }
    .shop-head .display { font-size: clamp(48px, 8vw, 96px); color: var(--black); }

    .product-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
    }
    .product-card {
      position: relative; background: #f0f0d8;
      text-decoration: none; overflow: hidden; display: block;
    }
    .product-card:hover .product-img { transform: scale(1.04); }
    .product-img {
      aspect-ratio: 3/4; background: #e8e8d0;
      position: relative; overflow: hidden; transition: transform 0.5s ease;
      display: flex; align-items: center; justify-content: center;
    }
    .product-ph {
      font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
      color: rgba(0,0,0,0.2);
    }
    .product-info { padding: 24px 28px; }
    .product-year {
      font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
      text-transform: uppercase; color: var(--cool-gray); margin-bottom: 8px;
    }
    .product-name {
      font-family: var(--font-body); font-weight: 700; font-size: 28px;
      color: var(--black); letter-spacing: 0.02em; margin-bottom: 4px;
    }
    .product-price {
      font-size: 16px; font-weight: 600; color: var(--black); margin-bottom: 20px;
    }
    .product-cta {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--black);
      border-bottom: 1px solid var(--black); padding-bottom: 2px;
      transition: color 0.2s, border-color 0.2s;
    }
    .product-card:hover .product-cta { color: var(--infrared); border-color: var(--infrared); }
    .product-badge {
      position: absolute; top: 16px; left: 16px; z-index: 2;
      background: var(--infrared); color: var(--off-white);
      font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; padding: 5px 10px;
    }
    .product-badge-sold {
      background: rgba(0,0,0,0.5); color: rgba(255,255,228,0.7);
    }

    /* ─── STORY / ABOUT ──────────────────────────── */
    .story-section {
      background: var(--black);
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 70vh;
    }
    .story-visual {
      background: var(--padres-brown);
      position: relative; overflow: hidden;
      display: flex; flex-direction: column;
      justify-content: flex-end; padding: 48px;
    }
    .story-visual::before {
      content: '2010';
      position: absolute; bottom: -30px; right: -20px;
      font-family: var(--font-body); font-weight: 700; font-size: 240px;
      color: rgba(255,255,228,0.04); line-height: 1;
      pointer-events: none;
    }
    .story-visual-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
      text-transform: uppercase; color: var(--gold);
      position: relative; z-index: 2; margin-bottom: 12px;
    }
    .story-visual-title {
      font-family: var(--font-body); font-weight: 700; font-size: clamp(40px, 6vw, 80px);
      color: var(--off-white); line-height: 0.92;
      position: relative; z-index: 2;
    }
    .story-content {
      padding: 80px 64px; display: flex; flex-direction: column; justify-content: center;
    }
    .story-content .label { color: rgba(255,255,228,0.35); margin-bottom: 16px; }
    .story-content .display {
      font-size: clamp(36px, 5vw, 60px); color: var(--off-white); margin-bottom: 28px;
    }
    .story-body {
      font-size: 16px; line-height: 1.8; color: rgba(255,255,228,0.55);
      max-width: 440px; margin-bottom: 18px;
    }
    .story-body strong { color: var(--off-white); font-weight: 600; }

    /* ─── FOOTER ─────────────────────────────────── */
    footer { background: #060606; }
    .footer-inner {
      padding: 64px 40px 56px;
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 48px;
      border-bottom: 1px solid rgba(255,255,228,0.05);
    }
    .footer-logo-wrap {}
    .footer-logo {
      font-family: var(--font-body); font-weight: 700; font-size: 44px;
      color: var(--off-white); letter-spacing: 0.08em; line-height: 1;
    }
    .footer-logo-by {
      font-size: 11px; color: rgba(255,255,228,0.3); margin-top: 8px;
      letter-spacing: 0.1em;
    }
    .footer-logo-by a { color: rgba(255,255,228,0.5); text-decoration: none; }
    .footer-logo-by a:hover { color: var(--off-white); }
    .footer-col-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
      text-transform: uppercase; color: rgba(255,255,228,0.3); margin-bottom: 20px;
    }
    .footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .footer-col-links a {
      font-size: 14px; color: rgba(255,255,228,0.45); text-decoration: none; transition: color 0.2s;
    }
    .footer-col-links a:hover { color: var(--off-white); }
    .footer-bar {
      padding: 20px 40px;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 16px;
    }
    .footer-legal { font-size: 11px; color: rgba(255,255,228,0.2); letter-spacing: 0.05em; }
    .footer-social-row {
      display: flex; gap: 24px; list-style: none;
    }
    .footer-social-row a {
      font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: rgba(255,255,228,0.3);
      text-decoration: none; transition: color 0.2s;
    }
    .footer-social-row a:hover { color: var(--off-white); }

    /* ─── FADE IN ───────────────────────────────────  */
    .fade { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
    .fade.visible { opacity: 1; transform: translateY(0); }

    /* ─── HAMBURGER BUTTON ──────────────────────── */
    .hamburger {
      display: none;
      flex-direction: column; gap: 5px;
      cursor: pointer; padding: 8px; background: none; border: none;
      position: relative; z-index: 500;
    }
    .hamburger span {
      display: block; width: 24px; height: 2px;
      background: var(--off-white); transition: all 0.3s ease;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ─── MOBILE NAV OVERLAY ─────────────────────── */
    .mobile-nav {
      display: none;
      position: fixed; inset: 0; z-index: 400;
      background: rgba(0,0,0,0.97);
      flex-direction: column; justify-content: center; align-items: center; gap: 36px;
      opacity: 0; transform: translateY(-16px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      pointer-events: none; /* ← CRITICAL: invisible overlay must not block taps */
    }
    .mobile-nav.open { opacity: 1; transform: translateY(0); pointer-events: all; }
    .mobile-nav a {
      font-family: var(--font-body);
      font-size: clamp(34px, 10vw, 56px);
      font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--off-white); text-decoration: none;
      transition: color 0.2s;
    }
    .mobile-nav a:hover { color: var(--gold); }
    .mobile-nav .mobile-shop {
      background: var(--gold); color: var(--black) !important;
      padding: 12px 40px;
    }

    /* ─── RESPONSIVE — 900px (tablets & large phones) ── */
    @media (max-width: 900px) {
      /* Nav */
      nav { padding: 16px 20px; }
      .nav-right { display: none; }
      .hamburger { display: flex; }
      .mobile-nav { display: flex; } /* flex structure ready; opacity:0 + pointer-events:none hides it */

      /* Hero — tighten up, drop the 5-cell mosaic to 2 cols */
      .hero { padding: 0 20px 52px; min-height: 520px; }
      .hero-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 1fr);
      }
      .m1 { grid-row: 1 / 3; }
      .hero-badge { display: none; } /* remove badge on tablet — clutters small hero */

      /* Section padding */
      .section { padding: 64px 20px; }
      .cat-nav { padding: 0 20px; }

      /* Gallery */
      .gallery-head { padding: 48px 20px 32px; flex-direction: column; align-items: flex-start; gap: 20px; }
      .gallery-head .btn { align-self: flex-start; }
      .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: 0 20px; gap: 3px; }

      /* Submit section — stack vertically */
      .submit-section { grid-template-columns: 1fr; gap: 40px; padding: 64px 20px; }
      .submit-right { padding: 32px 24px; }
      .submit-copy { max-width: 100%; }

      /* Shop */
      .product-grid { grid-template-columns: 1fr 1fr; }
      .shop-head { flex-direction: column; align-items: flex-start; gap: 20px; }

      /* Story */
      .story-section { grid-template-columns: 1fr; }
      .story-visual { padding: 56px 28px; min-height: 300px; }
      .story-content { padding: 56px 28px; }
      .story-body { max-width: 100%; }

      /* Map teaser */
      .map-teaser-inner { flex-direction: column !important; gap: 28px !important; }
      .map-preview { width: 100% !important; max-width: 420px !important; }

      /* Footer */
      .footer-inner { grid-template-columns: 1fr; gap: 40px; padding: 48px 20px 40px; }
      .footer-bar { padding: 16px 20px; flex-direction: column; align-items: flex-start; }
    }

    /* ─── RESPONSIVE — 480px (phones) ─────────────── */
    @media (max-width: 480px) {
      /* Hero — single column mosaic on small phones */
      .hero { padding: 0 0 44px; min-height: 100svh; }
      .hero-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
      }
      /* Hide m4 and m5 on very small screens — 4-tile mosaic is cleaner */
      .m4, .m5 { display: none; }
      .m1 { grid-row: 1 / 3; }
      .hero-content { padding: 0 20px 0; }
      .hero-badge { display: none; }
      .hero-btns { flex-direction: column; padding-right: 4px; }
      .hero-btns .btn { justify-content: center; min-height: 52px; width: 100%; }

      /* General */
      .section { padding: 52px 16px; }
      .cat-nav { padding: 0 12px; }
      .cat-btn { padding: 14px 14px; font-size: 10px; }

      /* Gallery */
      .gallery-head { padding: 40px 16px 24px; }
      .gallery-head .btn { font-size: 10px; padding: 12px 18px; }
      /* 2-col grid — keeps tiles large enough to see on phone */
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        gap: 2px;
      }
      /* Always show location text on mobile (no hover) */
      .g-info { opacity: 1; padding: 20px 10px 8px; }
      .g-location { font-size: 11px; }
      .g-fan { font-size: 9px; }

      /* Submit */
      .submit-section { padding: 52px 16px; }
      .submit-stats { flex-wrap: wrap; gap: 20px; }
      .submit-right { padding: 24px 16px; }

      /* Shop */
      .product-grid { grid-template-columns: 1fr; }
      .shop-head { flex-direction: column; align-items: flex-start; gap: 16px; }
      .shop-section { padding: 52px 16px; }

      /* Story */
      .story-visual { padding: 40px 16px; min-height: 260px; }
      .story-content { padding: 44px 16px; }

      /* Map teaser */
      .map-teaser-inner { flex-direction: column !important; gap: 28px !important; padding: 40px 16px !important; }
      .map-preview { width: 100% !important; height: 100px !important; }

      /* Email signup row */
      .email-row { flex-direction: column !important; }
      .email-row input { min-width: 0 !important; width: 100% !important; }
      .email-row button { width: 100% !important; padding: 16px !important; min-height: 52px; }

      /* Buttons — large touch targets */
      .btn { min-height: 52px; padding: 14px 24px; }

      /* Footer */
      .footer-inner { padding: 40px 16px 32px; }
      .footer-bar { padding: 14px 16px; gap: 12px; }
      .footer-logo { font-size: 36px; }
    }


    /* ═══════════════════════════════════════════════
       LIGHTBOX / SHADOWBOX CAROUSEL
       ═══════════════════════════════════════════════ */
    .lb-overlay {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.28s ease;
    }
    .lb-overlay.open { opacity: 1; pointer-events: all; }
    .lb-img-wrap {
      position: relative;
      max-width: min(90vw, 1100px); max-height: 82vh;
      display: flex; align-items: center; justify-content: center;
      z-index: 1;
    }
    .lb-img {
      max-width: min(90vw, 1100px); max-height: 82vh;
      width: auto; height: auto; object-fit: contain; display: block;
      transition: opacity 0.18s ease;
      user-select: none; -webkit-user-drag: none;
    }
    .lb-img.fading { opacity: 0; }
    .lb-info {
      position: fixed; bottom: 0; left: 0; right: 0;
      padding: 72px 56px 40px;
      background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0) 100%);
      display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
      pointer-events: none; z-index: 2;
    }
    .lb-location {
      font-family: var(--font-body); font-weight: 800;
      font-size: clamp(20px, 3.5vw, 38px);
      color: var(--off-white); letter-spacing: -0.015em; line-height: 1.05;
    }
    .lb-fan {
      font-family: var(--font-body); font-size: 13px;
      color: rgba(255,255,228,0.45); margin-top: 7px; letter-spacing: 0.05em;
    }
    .lb-counter {
      font-family: var(--font-body); font-size: 11px; font-weight: 700;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: rgba(255,255,228,0.35); white-space: nowrap; flex-shrink: 0;
    }
    .lb-close {
      position: fixed; top: 24px; right: 28px; z-index: 9001;
      background: none; border: none; color: rgba(255,255,228,0.45);
      font-size: 24px; cursor: pointer; line-height: 1;
      width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
      transition: color 0.15s;
    }
    .lb-close:hover { color: var(--off-white); }
    .lb-prev, .lb-next {
      position: fixed; top: 50%; transform: translateY(-50%); z-index: 9001;
      background: none; border: none; cursor: pointer;
      color: rgba(255,255,228,0.35); font-size: 56px; line-height: 1;
      width: 80px; height: 130px;
      display: flex; align-items: center; justify-content: center;
      transition: color 0.15s; user-select: none;
    }
    .lb-prev { left: 0; }
    .lb-next { right: 0; }
    .lb-prev:hover, .lb-next:hover { color: var(--off-white); }
    .lb-prev.edge, .lb-next.edge { opacity: 0.15; pointer-events: none; }
    @media (max-width: 600px) {
      .lb-prev { left: 0; font-size: 36px; width: 48px; }
      .lb-next { right: 0; font-size: 36px; width: 48px; }
      .lb-info { padding: 40px 20px 30px; flex-direction: column; gap: 8px; }
      .lb-counter { align-self: flex-start; }
      .lb-close { top: 14px; right: 10px; }
    }