Here is the complete, self-contained index.html file.


You can simply copy the code below, paste it into a plain text file on your computer, save it as index.html, drop it inside a folder (e.g., named portfolio), and drag that folder right onto Netlify Drop to get your site live!



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>バウネ映像写真館 | John Baune Visuals — Shōwa Film & Motion</title>

  <script src="https://cdn.tailwindcss.com"></script>

  <link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+JP:wght@400;600;700;900&family=Shippori+Mincho:wght@400;600;800&display=swap" rel="stylesheet">

  <style>

    :root {

      --paper: #F2ECE1;

      --paper-dark: #E5DEC9;

      --sumi: #181615;

      --shu: #C83E2B;

      --amber: #D9822B;

      --emerald: #1F4E43;

      --film-border: #111111;

    }


    body {

      background-color: var(--paper);

      color: var(--sumi);

      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;

      overflow-x: hidden;

    }


    .font-mono-tech {

      font-family: 'IBM Plex Mono', monospace;

    }


    /* Vertical Japanese Text (Tategaki) */

    .tategaki {

      writing-mode: vertical-rl;

      text-orientation: upright;

      letter-spacing: 0.18em;

    }


    /* Hanko Stamp Effect */

    .hanko {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      border: 2.5px solid var(--shu);

      color: var(--shu);

      border-radius: 4px;

      padding: 4px 6px;

      font-weight: 900;

      line-height: 1.05;

      transform: rotate(-3deg);

      box-shadow: inset 0 0 2px rgba(200, 62, 43, 0.4);

      mask-image: radial-gradient(circle, rgba(0,0,0,1) 80%, rgba(0,0,0,0.6) 100%);

    }


    /* Film Grain Overlay */

    .grain-overlay {

      pointer-events: none;

      position: fixed;

      inset: 0;

      z-index: 999;

      opacity: 0.22;

      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

    }


    /* Showa Film Emulations */

    .stock-fujicolor img, .stock-fujicolor .film-preview {

      filter: contrast(1.06) saturate(1.12) sepia(0.18) hue-rotate(-4deg);

    }

    .stock-neopan img, .stock-neopan .film-preview {

      filter: grayscale(1) contrast(1.45) brightness(0.95);

    }

    .stock-sakura img, .stock-sakura .film-preview {

      filter: contrast(0.96) saturate(0.88) sepia(0.28) brightness(1.03);

    }


    /* Quartz Date Stamp (80s Point & Shoot style) */

    .quartz-date {

      font-family: 'IBM Plex Mono', monospace;

      color: #FF6B1A;

      text-shadow: 0 0 6px rgba(255, 107, 26, 0.85), 0 0 2px rgba(255, 60, 0, 0.9);

      letter-spacing: 0.12em;

      font-weight: 600;

    }


    /* 35mm Sprocket Holes */

    .sprocket-holes {

      background-image: repeating-linear-gradient(

        to right,

        transparent 0px,

        transparent 12px,

        #F2ECE1 12px,

        #F2ECE1 24px,

        transparent 24px,

        transparent 36px

      );

      height: 10px;

    }


    /* Light Leak Effect */

    .light-leak::after {

      content: "";

      position: absolute;

      inset: 0;

      pointer-events: none;

      background: linear-gradient(125deg, rgba(225, 85, 35, 0.24) 0%, rgba(217, 130, 43, 0.08) 35%, transparent 65%);

      mix-blend-mode: screen;

    }


    /* Custom Scrollbar */

    ::-webkit-scrollbar { width: 8px; }

    ::-webkit-scrollbar-track { background: #E5DEC9; }

    ::-webkit-scrollbar-thumb { background: #181615; }

  </style>

</head>

<body class="stock-fujicolor selection:bg-[#C83E2B] selection:text-white" id="app-body">


  <!-- Film Grain Layer -->

  <div id="grain-layer" class="grain-overlay"></div>


  <!-- Top Darkroom Control Strip -->

  <div class="sticky top-0 z-50 bg-[#181615] text-[#F2ECE1] border-b-2 border-[#C83E2B] px-4 py-2.5 text-xs font-mono-tech">

    <div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-3">

      <div class="flex items-center gap-3">

        <span class="bg-[#C83E2B] text-white px-2 py-0.5 font-bold tracking-wider">昭和レトロ現像所</span>

        <span class="hidden sm:inline text-[#D9822B]">DARKROOM EMULATION:</span>

        <div class="flex items-center gap-1 bg-black/50 p-1 rounded border border-neutral-700">

          <button onclick="setFilmStock('fujicolor')" id="btn-fujicolor" class="px-2.5 py-1 bg-[#1F4E43] text-white font-semibold transition">FUJICOLOR F-II (76)</button>

          <button onclick="setFilmStock('neopan')" id="btn-neopan" class="px-2.5 py-1 hover:bg-neutral-800 text-neutral-300 transition">NEOPAN 400 (B&W)</button>

          <button onclick="setFilmStock('sakura')" id="btn-sakura" class="px-2.5 py-1 hover:bg-neutral-800 text-neutral-300 transition">SAKURA KONICA (68)</button>

        </div>

      </div>


      <div class="flex items-center gap-3">

        <button onclick="toggleGrain()" id="grain-btn" class="px-2.5 py-1 border border-neutral-600 hover:border-[#D9822B] text-neutral-200 transition">

          GRAIN: ON

        </button>

        <button onclick="openBatchUpload()" class="px-3 py-1 bg-[#C83E2B] hover:bg-[#a93221] text-white font-semibold flex items-center gap-1.5 transition cursor-pointer">

          <span>+ LOAD GOOGLE PHOTOS</span>

        </button>

        <button onclick="resetPhotos()" class="px-2 py-1 text-neutral-400 hover:text-white underline" title="Reset custom photos">

          Reset

        </button>

      </div>

    </div>

  </div>


  <!-- Main Header / Indie Zine Masthead -->

  <header class="border-b-4 border-[#181615] bg-[#F2ECE1] relative">

    <div class="max-w-7xl mx-auto px-4 sm:px-8 py-8 md:py-12">

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

        

        <!-- Left Vertical Japanese Title & Hanko -->

        <div class="lg:col-span-2 flex lg:flex-col items-center lg:items-start justify-between border-b lg:border-b-0 lg:border-r-2 border-[#181615] pb-6 lg:pb-0 lg:pr-6">

          <div class="flex items-start gap-4">

            <h1 class="tategaki text-3xl sm:text-4xl font-black tracking-widest text-[#181615] leading-none select-none">

              バウネ映像写真館

            </h1>

            <div class="tategaki text-xs text-neutral-600 font-mono-tech pt-2">

              川越・西オーストラリア

            </div>

          </div>

          <div class="mt-0 lg:mt-8 flex flex-col items-end lg:items-start gap-2">

            <div class="hanko text-sm">

              <span>寫眞<br>記録</span>

            </div>

            <span class="font-mono-tech text-[10px] tracking-widest uppercase text-neutral-600">ISSUED: 1978 / 2026</span>

          </div>

        </div>


        <!-- Center Editorial Masthead & Lead Photo -->

        <div class="lg:col-span-7 flex flex-col justify-between">

          <div class="border-b-2 border-[#181615] pb-4 mb-6 flex flex-wrap items-baseline justify-between gap-2">

            <div>

              <p class="font-mono-tech text-xs uppercase tracking-[0.2em] text-[#C83E2B] font-semibold">

                SHŌWA SILVER HALIDE & 8MM MOTION ARCHIVE

              </p>

              <h2 class="text-4xl sm:text-6xl font-black tracking-tight mt-1">

                JOHN BAUNE

              </h2>

            </div>

            <div class="text-right font-mono-tech text-xs">

              <p class="bg-[#181615] text-[#F2ECE1] px-2 py-0.5 inline-block">VOL. 04 — KAWAGOE TO PERTH</p>

              <p class="mt-1 text-neutral-600">35MM STILL / 16MM & 4K MOTION</p>

            </div>

          </div>


          <!-- Featured Hero Negative Frame -->

          <div class="relative bg-[#121212] p-3 sm:p-5 shadow-2xl group light-leak">

            <div class="flex justify-between items-center text-[11px] font-mono-tech text-[#D9822B] mb-2">

              <span>▶ FUJI RVP 50</span>

              <span>FRAME 00A — FEATURE</span>

              <span>◁ 36A</span>

            </div>

            <div class="relative aspect-[16/10] overflow-hidden bg-black">

              <img id="hero-img" src="https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1400&q=85" alt="Featured Frame" class="w-full h-full object-cover transition duration-700 group-hover:scale-105" />

              <div class="absolute bottom-3 right-4 quartz-date text-sm sm:text-base">

                '86 10 14

              </div>

              <button onclick="triggerPhotoSwap('hero')" class="absolute top-3 right-3 bg-[#181615]/90 hover:bg-[#C83E2B] text-[#F2ECE1] font-mono-tech text-xs px-3 py-1.5 border border-[#F2ECE1]/40 transition">

                [SWAP HERO PHOTO]

              </button>

            </div>

            <div class="mt-3 flex justify-between items-center text-xs text-neutral-300 font-mono-tech">

              <span>LOC: KOEDO KAWAGOE / SWAN VALLEY</span>

              <span>LENS: 50MM F/1.4 PLANAR</span>

            </div>

          </div>

        </div>


        <!-- Right Column Manifesto & Navigation Index -->

        <div class="lg:col-span-3 border-t lg:border-t-0 lg:border-l-2 border-[#181615] pt-6 lg:pt-0 lg:pl-6 flex flex-col justify-between h-full">

          <div>

            <div class="bg-[#181615] text-[#F2ECE1] px-3 py-1.5 font-mono-tech text-xs uppercase tracking-widest mb-4 flex justify-between">

              <span>目録 / INDEX</span>

              <span>P. 01</span>

            </div>

            <nav class="space-y-2.5 text-sm font-semibold border-b-2 border-[#181615] pb-6">

              <a href="#contact-sheet" class="flex justify-between items-center hover:text-[#C83E2B] transition py-1 border-b border-dashed border-neutral-400">

                <span>01. 密着印画 / Contact Sheet</span>

                <span class="font-mono-tech text-xs">→</span>

              </a>

              <a href="#telecine" class="flex justify-between items-center hover:text-[#C83E2B] transition py-1 border-b border-dashed border-neutral-400">

                <span>02. 映写室 / 8mm & Studio Motion</span>

                <span class="font-mono-tech text-xs">→</span>

              </a>

              <a href="#rates" class="flex justify-between items-center hover:text-[#C83E2B] transition py-1 border-b border-dashed border-neutral-400">

                <span>03. 料金表 / Darkroom Menu</span>

                <span class="font-mono-tech text-xs">→</span>

              </a>

              <a href="#dispatch" class="flex justify-between items-center hover:text-[#C83E2B] transition py-1">

                <span>04. 電報依頼 / Commission Slip</span>

                <span class="font-mono-tech text-xs">→</span>

              </a>

            </nav>


            <div class="mt-6 bg-[#E5DEC9] p-4 border border-[#181615]">

              <p class="text-xs font-mono-tech uppercase text-[#C83E2B] font-bold mb-1">作家ノート / STATEMENT</p>

              <p class="text-sm leading-relaxed text-neutral-800">

                Unpolished grain, warm halation, and candid human presence. Documenting street corners in Saitama, quiet family moments in the Perth Hills, and live studio productions with the tactile honesty of Shōwa-era silver gelatin prints.

              </p>

            </div>

          </div>


          <div class="mt-6 pt-4 border-t border-[#181615] font-mono-tech text-[11px] text-neutral-600 space-y-1">

            <div>STUDIO: BRABHAM / PERTH WA</div>

            <div>ARCHIVE: KAWAGOE, SAITAMA JP</div>

            <div class="text-[#1F4E43] font-bold">● AVAILABLE FOR COMMISSIONS</div>

          </div>

        </div>


      </div>

    </div>

  </header>


  <!-- Section 01: 35mm Contact Sheet Gallery (密着印画) -->

  <section id="contact-sheet" class="py-16 px-4 sm:px-8 max-w-7xl mx-auto">

    <div class="flex flex-col md:flex-row md:items-end justify-between border-b-4 border-[#181615] pb-4 mb-8 gap-4">

      <div>

        <div class="flex items-center gap-3">

          <span class="bg-[#C83E2B] text-white font-mono-tech text-xs px-2 py-0.5 font-bold">ARCHIVE 01</span>

          <span class="font-mono-tech text-xs uppercase tracking-widest text-neutral-600">PROOF SHEET / 35MM NEGATIVE STRIPS</span>

        </div>

        <h3 class="text-3xl sm:text-4xl font-black mt-2">密着印画・作品集 <span class="text-xl font-normal text-neutral-600">/ Contact Sheet</span></h3>

      </div>


      <!-- Category Filter Tabs -->

      <div class="flex flex-wrap gap-1.5 font-mono-tech text-xs" id="filter-tabs">

        <button onclick="filterGallery('all')" data-cat="all" class="filter-btn bg-[#181615] text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">ALL ROLLS</button>

        <button onclick="filterGallery('kawagoe')" data-cat="kawagoe" class="filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">川越・東京 STREETS</button>

        <button onclick="filterGallery('family')" data-cat="family" class="filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">家族・日常 PORTRAITS</button>

        <button onclick="filterGallery('wa')" data-cat="wa" class="filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">西豪州 LANDSCAPES</button>

        <button onclick="filterGallery('companions')" data-cat="companions" class="filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">猫と犬 COMPANIONS</button>

      </div>

    </div>


    <!-- Instructions Banner for Google Photos -->

    <div class="mb-8 bg-[#E5DEC9] border-2 border-[#181615] p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">

      <div class="flex items-center gap-3">

        <span class="hanko text-xs shrink-0">写真<br>入替</span>

        <p class="text-xs sm:text-sm">

          <strong>Your Google Photos Library:</strong> Click <strong>[SWAP PHOTO]</strong> on any frame below to load your own portraits, street snaps, or family albums directly from your computer/Google Photos exports. Everything saves automatically in your browser.

        </p>

      </div>

      <button onclick="openBatchUpload()" class="shrink-0 bg-[#181615] hover:bg-[#C83E2B] text-[#F2ECE1] font-mono-tech text-xs px-4 py-2 transition">

        + ADD MULTIPLE PHOTOS

      </button>

    </div>


    <!-- Contact Sheet Wrapper -->

    <div class="bg-[#121212] p-4 sm:p-8 border-4 border-[#181615] shadow-2xl">

      <div class="sprocket-holes mb-4 opacity-80"></div>


      <div id="gallery-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <!-- Rendered dynamically by JS -->

      </div>


      <div class="sprocket-holes mt-6 opacity-80"></div>

    </div>

  </section>


  <!-- Section 02: 8mm & Studio Telecine Room (昭和映写室) -->

  <section id="telecine" class="py-16 bg-[#181615] text-[#F2ECE1] border-y-4 border-[#C83E2B]">

    <div class="max-w-7xl mx-auto px-4 sm:px-8">

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">

        

        <div class="lg:col-span-5 space-y-6">

          <div class="inline-block bg-[#C83E2B] text-white font-mono-tech text-xs px-2.5 py-1 font-bold">

            ARCHIVE 02 / TELECINE & STUDIO MOTION

          </div>

          <h3 class="text-3xl sm:text-5xl font-black leading-tight">

            昭和映写室<br>

            <span class="text-[#D9822B] text-2xl sm:text-3xl font-normal">Motion Picture & Stage Production</span>

          </h3>

          <p class="text-neutral-300 text-sm sm:text-base leading-relaxed">

            From multi-camera studio shoots with performers and crew to intimate handheld family reels in the park. Edited with rhythmic pacing, analog sound design, and authentic film halation.

          </p>


          <!-- Reel Selector -->

          <div class="space-y-3 pt-2 font-mono-tech text-xs">

            <p class="text-[#D9822B] uppercase tracking-wider">SELECT REEL CARTRIDGE:</p>

            

            <button onclick="selectReel(0)" id="reel-btn-0" class="w-full text-left p-3.5 border-2 border-[#C83E2B] bg-black/60 flex items-center justify-between transition">

              <div>

                <div class="font-bold text-white">REEL A: STUDIO PERFORMANCE & CREW</div>

                <div class="text-neutral-400 text-[11px] mt-0.5">Multi-cam lighting • Live stage • Soundstage reel</div>

              </div>

              <span class="bg-[#C83E2B] text-white px-2 py-0.5">PLAYING</span>

            </button>


            <button onclick="selectReel(1)" id="reel-btn-1" class="w-full text-left p-3.5 border border-neutral-700 hover:border-[#D9822B] bg-black/30 flex items-center justify-between transition">

              <div>

                <div class="font-bold text-white">REEL B: PARK CHRONICLES & CHILDHOOD</div>

                <div class="text-neutral-400 text-[11px] mt-0.5">Sunlight & bubbles • Handheld 16mm texture • Perth parks</div>

              </div>

              <span class="text-neutral-400">02:15</span>

            </button>


            <button onclick="selectReel(2)" id="reel-btn-2" class="w-full text-left p-3.5 border border-neutral-700 hover:border-[#D9822B] bg-black/30 flex items-center justify-between transition">

              <div>

                <div class="font-bold text-white">REEL C: KAWAGOE TO WESTERN AUSTRALIA</div>

                <div class="text-neutral-400 text-[11px] mt-0.5">Cross-continental travelogue • Super 8 & 4K hybrid</div>

              </div>

              <span class="text-neutral-400">03:40</span>

            </button>

          </div>

        </div>


        <!-- Retro Trinitron / Telecine Monitor -->

        <div class="lg:col-span-7">

          <div class="bg-[#262320] p-4 sm:p-6 rounded-lg border-4 border-neutral-700 shadow-2xl">

            <div class="flex justify-between items-center mb-3 font-mono-tech text-xs text-neutral-400">

              <span class="text-[#D9822B] font-bold">● TELECINE MONITOR // 24 FPS</span>

              <span id="reel-code">TC 01:14:22:08</span>

            </div>


            <!-- Screen Frame -->

            <div class="relative aspect-video bg-black overflow-hidden border-4 border-black rounded shadow-inner film-preview light-leak">

              <img id="reel-poster" src="https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1200&q=85" class="w-full h-full object-cover opacity-85" alt="Reel frame" />

              

              <!-- Scanlines & Viewfinder Crosshair -->

              <div class="absolute inset-0 pointer-events-none flex items-center justify-center">

                <div class="w-16 h-16 border border-white/30 rounded-full flex items-center justify-center">

                  <div class="w-2 h-2 bg-[#C83E2B] rounded-full animate-ping"></div>

                </div>

              </div>


              <!-- Top Left OSD -->

              <div class="absolute top-4 left-4 font-mono-tech text-xs bg-black/70 px-2.5 py-1 text-[#52FF7C] border border-[#52FF7C]/40">

                <span id="reel-title-osd">▶ PLAY // STUDIO SHOWREEL</span>

              </div>


              <!-- Subtitles (Japanese Cinema Style) -->

              <div class="absolute bottom-6 inset-x-6 text-center">

                <p id="reel-subtitle" class="inline-block bg-black/80 text-[#F2ECE1] px-4 py-1.5 text-sm sm:text-base tracking-widest border border-white/20">

                  「光と影のあいだに、記憶を焼き付ける」

                </p>

              </div>

            </div>


            <!-- Monitor Controls -->

            <div class="mt-4 flex flex-wrap items-center justify-between gap-4 font-mono-tech text-xs">

              <div class="flex items-center gap-2">

                <span class="text-neutral-400">GATE:</span>

                <button onclick="setGate('16:9')" class="px-2 py-1 bg-neutral-800 text-white border border-neutral-600">SUPER 16</button>

                <button onclick="setGate('4:3')" class="px-2 py-1 bg-neutral-900 text-neutral-400 border border-neutral-700">REGULAR 8 (4:3)</button>

              </div>

              <a href="#dispatch" class="bg-[#C83E2B] hover:bg-[#a63120] text-white px-4 py-1.5 font-bold transition">

                BOOK VIDEO PRODUCTION →

              </a>

            </div>

          </div>

        </div>


      </div>

    </div>

  </section>


  <!-- Section 03: Showa Darkroom Rate Card (料金表) -->

  <section id="rates" class="py-16 px-4 sm:px-8 max-w-7xl mx-auto">

    <div class="border-4 border-[#181615] bg-[#E5DEC9] p-6 sm:p-10 relative">

      <div class="flex flex-col sm:flex-row sm:items-center justify-between border-b-2 border-[#181615] pb-6 mb-8 gap-4">

        <div>

          <span class="font-mono-tech text-xs uppercase tracking-widest text-[#C83E2B] font-bold">MENU & SPECIFICATIONS</span>

          <h3 class="text-3xl font-black mt-1">撮影料金表 <span class="text-lg font-normal text-neutral-700">/ Commission Packages</span></h3>

        </div>

        <div class="hanko text-base self-start sm:self-auto">

          <span>公認<br>価格</span>

        </div>

      </div>


      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

        <!-- Package 1 -->

        <div class="bg-[#F2ECE1] border-2 border-[#181615] p-6 flex flex-col justify-between">

          <div>

            <div class="flex justify-between items-center font-mono-tech text-xs border-b border-[#181615] pb-2 mb-4">

              <span>PLAN A // 肖像・家族</span>

              <span class="bg-[#1F4E43] text-white px-2 py-0.5">STILLS</span>

            </div>

            <h4 class="text-xl font-bold mb-2">Portrait & Family Chronicle</h4>

            <p class="text-sm text-neutral-700 mb-4 leading-relaxed">

              Natural, unposed outdoor or at-home sessions across Perth, Swan Valley, and regional WA. Graded with signature Shōwa film warmth.

            </p>

            <ul class="text-xs font-mono-tech space-y-1.5 text-neutral-800 mb-6">

              <li>✓ 90-Minute Location Shoot</li>

              <li>✓ 60+ High-Res Archival Stills</li>

              <li>✓ Custom Contact Sheet Print PDF</li>

            </ul>

          </div>

          <a href="#dispatch" onclick="selectPackage('Portrait & Family Chronicle')" class="block text-center bg-[#181615] hover:bg-[#C83E2B] text-[#F2ECE1] font-mono-tech text-xs py-2.5 transition">

            SELECT PLAN A

          </a>

        </div>


        <!-- Package 2 -->

        <div class="bg-[#F2ECE1] border-2 border-[#C83E2B] p-6 flex flex-col justify-between relative shadow-lg">

          <div>

            <div class="flex justify-between items-center font-mono-tech text-xs border-b border-[#181615] pb-2 mb-4">

              <span>PLAN B // 映像制作</span>

              <span class="bg-[#C83E2B] text-white px-2 py-0.5">MOTION + STILLS</span>

            </div>

            <h4 class="text-xl font-bold mb-2">Studio, Artist & Event Reel</h4>

            <p class="text-sm text-neutral-700 mb-4 leading-relaxed">

              Multi-camera videography for performers, creative studios, brands, and live events—paired with behind-the-scenes documentary stills.

            </p>

            <ul class="text-xs font-mono-tech space-y-1.5 text-neutral-800 mb-6">

              <li>✓ Half or Full-Day Production</li>

              <li>✓ 4K Master Edit + Vertical Cutdowns</li>

              <li>✓ Professional Audio & Color Grade</li>

            </ul>

          </div>

          <a href="#dispatch" onclick="selectPackage('Studio, Artist & Event Reel')" class="block text-center bg-[#C83E2B] hover:bg-[#181615] text-white font-mono-tech text-xs py-2.5 transition">

            SELECT PLAN B

          </a>

        </div>


        <!-- Package 3 -->

        <div class="bg-[#F2ECE1] border-2 border-[#181615] p-6 flex flex-col justify-between">

          <div>

            <div class="flex justify-between items-center font-mono-tech text-xs border-b border-[#181615] pb-2 mb-4">

              <span>PLAN C // 特別企画</span>

              <span class="bg-[#D9822B] text-black px-2 py-0.5 font-bold">BESPOKE</span>

            </div>

            <h4 class="text-xl font-bold mb-2">Editorial & Cross-Cultural</h4>

            <p class="text-sm text-neutral-700 mb-4 leading-relaxed">

              Bilingual (English / Japanese) visual production for publications, hospitality venues, artisans, and tourism across WA and Japan.

            </p>

            <ul class="text-xs font-mono-tech space-y-1.5 text-neutral-800 mb-6">

              <li>✓ Storyboard & Art Direction</li>

              <li>✓ Stills + Short Documentary Film</li>

              <li>✓ Full Commercial Licensing</li>

            </ul>

          </div>

          <a href="#dispatch" onclick="selectPackage('Editorial & Cross-Cultural')" class="block text-center bg-[#181615] hover:bg-[#C83E2B] text-[#F2ECE1] font-mono-tech text-xs py-2.5 transition">

            SELECT PLAN C

          </a>

        </div>

      </div>

    </div>

  </section>


  <!-- Section 04: Darkroom Order Slip / Commission Form (電報・現像依頼票) -->

  <section id="dispatch" class="py-16 px-4 sm:px-8 max-w-4xl mx-auto">

    <div class="bg-[#F2ECE1] border-4 border-[#181615] p-6 sm:p-10 shadow-2xl relative">

      <div class="flex justify-between items-start border-b-2 border-[#181615] pb-4 mb-6">

        <div>

          <p class="font-mono-tech text-xs text-[#C83E2B] font-bold">FORM NO. 1988-JB // DARKROOM ORDER SLIP</p>

          <h3 class="text-2xl sm:text-3xl font-black mt-1">撮影・現像依頼票 / Commission Dispatch</h3>

        </div>

        <div class="hanko text-xs">

          <span>受付<br>済印</span>

        </div>

      </div>


      <form id="booking-form" onsubmit="submitBooking(event)" class="space-y-5 font-mono-tech text-xs sm:text-sm">

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

          <div>

            <label class="block font-bold uppercase mb-1">01. ご芳名 / Client Name *</label>

            <input type="text" required placeholder="Your Name" class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]" />

          </div>

          <div>

            <label class="block font-bold uppercase mb-1">02. 連絡先 / Email or Phone *</label>

            <input type="text" required placeholder="name@example.com" class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]" />

          </div>

        </div>


        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

          <div>

            <label class="block font-bold uppercase mb-1">03. ご希望プラン / Package</label>

            <select id="package-select" class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]">

              <option value="Portrait & Family Chronicle">Plan A: Portrait & Family Chronicle</option>

              <option value="Studio, Artist & Event Reel">Plan B: Studio, Artist & Event Reel</option>

              <option value="Editorial & Cross-Cultural">Plan C: Editorial & Cross-Cultural</option>

            </select>

          </div>

          <div>

            <label class="block font-bold uppercase mb-1">04. 撮影場所 / Location</label>

            <input type="text" placeholder="e.g. Swan Valley, Perth CBD, Studio..." class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]" />

          </div>

        </div>


        <div>

          <label class="block font-bold uppercase mb-1">05. 内容詳細 / Project Notes</label>

          <textarea rows="4" placeholder="Tell me about the mood, dates, or story you want to capture..." class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]"></textarea>

        </div>


        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pt-2">

          <span class="text-xs text-neutral-600">STAMPED & DISPATCHED DIRECTLY TO JOHN BAUNE</span>

          <button type="submit" class="w-full sm:w-auto bg-[#C83E2B] hover:bg-[#181615] text-white font-bold px-8 py-3 transition cursor-pointer">

            STAMP & SEND ORDER SLIP →

          </button>

        </div>

      </form>


      <div id="booking-confirm" class="hidden mt-6 bg-[#1F4E43] text-white p-4 font-mono-tech text-xs border-2 border-[#181615]">

        ✓ 現像依頼を受理しました — Order slip stamped and logged! John will respond shortly.

      </div>

    </div>

  </section>


  <!-- Footer -->

  <footer class="bg-[#181615] text-[#F2ECE1] py-10 px-4 sm:px-8 border-t-4 border-[#C83E2B] font-mono-tech text-xs">

    <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">

      <div class="flex items-center gap-3">

        <span class="hanko text-xs border-[#C83E2B] text-[#C83E2B]">バウネ</span>

        <span>© JOHN FREDERICK BAUNE VISUALS (バウネ映像写真館) — PERTH, WA & KAWAGOE, JP</span>

      </div>

      <div class="text-neutral-400">

        PRINTED ON ARCHIVAL SHŌWA STOCK

      </div>

    </div>

  </footer>


  <!-- Hidden File Inputs for Google Photos Replacement -->

  <input type="file" id="single-file-input" accept="image/*" class="hidden" onchange="handleSingleFileSelect(event)" />

  <input type="file" id="batch-file-input" accept="image/*" multiple class="hidden" onchange="handleBatchFileSelect(event)" />


  <script>

    const defaultPhotos = [

      {

        id: 'frame-01',

        code: '▶ 01A',

        title: '小江戸の午後 / Afternoon in Koedo',

        category: 'kawagoe',

        date: "'84 04 08",

        notes: 'Kawagoe warehouse district — 35mm F/2',

        src: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?auto=format&fit=crop&w=900&q=80'

      },

      {

        id: 'frame-02',

        code: '▶ 02A',

        title: '公園のシャボン玉 / Soap Bubbles in the Park',

        category: 'family',

        date: "'86 10 13",

        notes: 'Afternoon light & laughter — 50mm F/1.4',

        src: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=900&q=80'

      },

      {

        id: 'frame-03',

        code: '▶ 03A',

        title: 'スワンバレーの夕暮れ / Swan Valley Dusk',

        category: 'wa',

        date: "'86 08 21",

        notes: 'Eastern corridor golden hour — Fujicolor',

        src: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=900&q=80'

      },

      {

        id: 'frame-04',

        code: '▶ 04A',

        title: '午後の猫と犬 / Afternoon Companions',

        category: 'companions',

        date: "'86 06 05",

        notes: 'Quiet sunbeams on the veranda — 85mm',

        src: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=900&q=80'

      },

      {

        id: 'frame-05',

        code: '▶ 05A',

        title: '路地裏のネオン / Backstreet Halation',

        category: 'kawagoe',

        date: "'85 11 19",

        notes: 'Evening rain & lantern reflections — Pushed 1 Stop',

        src: 'https://images.unsplash.com/photo-1509198397868-475647b2a1e5?auto=format&fit=crop&w=900&q=80'

      },

      {

        id: 'frame-06',

        code: '▶ 06A',

        title: '平均台のステップ / Balance Beam Steps',

        category: 'family',

        date: "'86 09 28",

        notes: 'Candid childhood milestones in Perth',

        src: 'https://images.unsplash.com/photo-1472162072942-cd5147eb3902?auto=format&fit=crop&w=900&q=80'

      }

    ];


    const reels = [

      {

        title: '▶ PLAY // STUDIO SHOWREEL',

        tc: 'TC 01:14:22:08',

        sub: '「光と影のあいだに、記憶を焼き付ける」',

        img: 'https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1200&q=85'

      },

      {

        title: '▶ PLAY // PARK CHRONICLES',

        tc: 'TC 02:08:11:19',

        sub: '「風に舞うシャボン玉と、午後の陽だまり」',

        img: 'https://images.unsplash.com/photo-1516627145497-ae6968895b74?auto=format&fit=crop&w=1200&q=85'

      },

      {

        title: '▶ PLAY // KAWAGOE TO WA',

        tc: 'TC 03:40:05:02',

        sub: '「川越の街並みから、西オーストラリアの広い空へ」',

        img: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=1200&q=85'

      }

    ];


    let photos = JSON.parse(localStorage.getItem('jb_showa_photos')) || defaultPhotos;

    let currentFilter = 'all';

    let swapTargetId = null;


    const savedHero = localStorage.getItem('jb_showa_hero');

    if (savedHero) {

      document.getElementById('hero-img').src = savedHero;

    }


    function renderGallery() {

      const grid = document.getElementById('gallery-grid');

      const filtered = currentFilter === 'all' ? photos : photos.filter(p => p.category === currentFilter);


      grid.innerHTML = filtered.map((item, idx) => `

        <div class="bg-[#1b1918] p-3 border border-neutral-800 flex flex-col justify-between group relative">

          <div class="flex justify-between items-center font-mono-tech text-[11px] text-[#D9822B] mb-2">

            <span>${item.code || ('▶ 0' + (idx + 1) + 'A')}</span>

            <span class="uppercase text-neutral-400">${item.category}</span>

            <span class="text-[#C83E2B]">● REC</span>

          </div>


          <div class="relative aspect-[4/3] bg-black overflow-hidden">

            <img src="${item.src}" alt="${item.title}" class="w-full h-full object-cover transition duration-500 group-hover:scale-105" />

            <div class="absolute bottom-2.5 right-3 quartz-date text-xs">

              ${item.date}

            </div>

            <button onclick="triggerPhotoSwap('${item.id}')" class="absolute top-2.5 right-2.5 bg-black/85 hover:bg-[#C83E2B] text-white font-mono-tech text-[10px] px-2.5 py-1 border border-white/30 transition">

              [SWAP PHOTO]

            </button>

          </div>


          <div class="mt-3 pt-2 border-t border-neutral-800">

            <h4 class="text-[#F2ECE1] font-bold text-base">${item.title}</h4>

            <p class="font-mono-tech text-[11px] text-neutral-400 mt-0.5">${item.notes}</p>

          </div>

        </div>

      `).join('');

    }


    function filterGallery(cat) {

      currentFilter = cat;

      document.querySelectorAll('.filter-btn').forEach(btn => {

        if (btn.dataset.cat === cat) {

          btn.className = 'filter-btn bg-[#181615] text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition';

        } else {

          btn.className = 'filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition';

        }

      });

      renderGallery();

    }


    function setFilmStock(stock) {

      const body = document.getElementById('app-body');

      body.classList.remove('stock-fujicolor', 'stock-neopan', 'stock-sakura');

      body.classList.add('stock-' + stock);


      ['fujicolor', 'neopan', 'sakura'].forEach(s => {

        const btn = document.getElementById('btn-' + s);

        if (s === stock) {

          btn.className = 'px-2.5 py-1 bg-[#1F4E43] text-white font-semibold transition';

        } else {

          btn.className = 'px-2.5 py-1 hover:bg-neutral-800 text-neutral-300 transition';

        }

      });

    }


    function toggleGrain() {

      const grain = document.getElementById('grain-layer');

      const btn = document.getElementById('grain-btn');

      if (grain.style.display === 'none') {

        grain.style.display = 'block';

        btn.textContent = 'GRAIN: ON';

      } else {

        grain.style.display = 'none';

        btn.textContent = 'GRAIN: OFF';

      }

    }


    function triggerPhotoSwap(id) {

      swapTargetId = id;

      document.getElementById('single-file-input').click();

    }


    function handleSingleFileSelect(event) {

      const file = event.target.files[0];

      if (!file) return;

      const reader = new FileReader();

      reader.onload = function(e) {

        if (swapTargetId === 'hero') {

          document.getElementById('hero-img').src = e.target.result;

          localStorage.setItem('jb_showa_hero', e.target.result);

        } else {

          photos = photos.map(p => p.id === swapTargetId ? { ...p, src: e.target.result } : p);

          localStorage.setItem('jb_showa_photos', JSON.stringify(photos));

          renderGallery();

        }

      };

      reader.readAsDataURL(file);

    }


    function openBatchUpload() {

      document.getElementById('batch-file-input').click();

    }


    function handleBatchFileSelect(event) {

      const files = Array.from(event.target.files);

      if (!files.length) return;

      files.forEach((file, i) => {

        const reader = new FileReader();

        reader.onload = function(e) {

          const newEntry = {

            id: 'custom-' + Date.now() + '-' + i,

            code: '▶ NEW',

            title: file.name.replace(/\.[^/.]+$/, ""),

            category: currentFilter === 'all' ? 'family' : currentFilter,

            date: "'86 10 14",

            notes: 'Imported from Google Photos Archive',

            src: e.target.result

          };

          photos.unshift(newEntry);

          localStorage.setItem('jb_showa_photos', JSON.stringify(photos));

          renderGallery();

        };

        reader.readAsDataURL(file);

      });

    }


    function resetPhotos() {

      localStorage.removeItem('jb_showa_photos');

      localStorage.removeItem('jb_showa_hero');

      photos = [...defaultPhotos];

      document.getElementById('hero-img').src = 'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1400&q=85';

      renderGallery();

    }


    function selectReel(idx) {

      const r = reels[idx];

      document.getElementById('reel-title-osd').textContent = r.title;

      document.getElementById('reel-code').textContent = r.tc;

      document.getElementById('reel-subtitle').textContent = r.sub;

      document.getElementById('reel-poster').src = r.img;


      [0, 1, 2].forEach(i => {

        const btn = document.getElementById('reel-btn-' + i);

        if (i === idx) {

          btn.className = 'w-full text-left p-3.5 border-2 border-[#C83E2B] bg-black/60 flex items-center justify-between transition';

        } else {

          btn.className = 'w-full text-left p-3.5 border border-neutral-700 hover:border-[#D9822B] bg-black/30 flex items-center justify-between transition';

        }

      });

    }


    function setGate(ratio) {

      const img = document.getElementById('reel-poster');

      img.style.padding = ratio === '4:3' ? '0 12%' : '0';

    }


    function selectPackage(pkg) {

      document.getElementById('package-select').value = pkg;

    }


    function submitBooking(e) {

      e.preventDefault();

      document.getElementById('booking-confirm').classList.remove('hidden');

      e.target.reset();

    }


    renderGallery();

  </script>

</body>

</html>