/* ---------- RESET ---------- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    /* ---------- TOKENS ---------- */
    :root {
      --bg-dark:   #0A0A0A;
      --bg-cream:  #F4F1EA;
      --bg-paper:  #FAF8F3;
      --ink:       #141414;
      --ink-mute:  #6B6862;
      --paper:     #F4F1EA;
      --accent:    #B5121B;
      --rule-light:rgba(20,20,20,0.12);
      --rule-dark: rgba(244,241,234,0.16);

      /* Single typeface — Outfit (same as leica-camera.com) + system Chinese sans */
      /* Three weights only: 300 Light, 400 Regular, 600 SemiBold */
      --display-en:        'Outfit', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
      --display-en-italic: 'Outfit', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
      --display-cn:        'Outfit', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
      --sans:              'Outfit', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
      --sans-cn:           'Outfit', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;

      --max:      1440px;
      --content:  1200px;
      --gutter:   40px;
    }

    body {
      font-family: var(--sans);
      font-weight: 400;
      color: var(--ink);
      background: var(--bg-cream);
      line-height: 1.6;
      font-size: 15px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: 0;
    }

    a { color: inherit; text-decoration: none; }
    img, svg { max-width: 100%; display: block; }

    /* ---------- HEADER / NAV ---------- */
    .header {
      background: var(--bg-paper);
      border-bottom: 1px solid var(--rule-light);
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: saturate(140%) blur(12px);
      background: rgba(250, 248, 243, 0.92);
    }
    .header-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 22px var(--gutter);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 40px;
    }

    /* Globally remove the browser's default focus ring (blue/purple box) for a clean editorial look.
       Form fields keep their own focus feedback via border-color changes defined per element. */
    *,
    *:focus,
    *:focus-visible,
    *:active {
      outline: none !important;
      -webkit-tap-highlight-color: transparent;
    }
    a:focus, button:focus, input:focus, textarea:focus, select:focus,
    a:active, button:active,
    [tabindex]:focus {
      box-shadow: none !important;
    }

    .site-logo {
      display: inline-flex;
      align-items: center;
      transition: opacity 0.2s;
    }
    .site-logo:hover { opacity: 0.7; }
    .site-logo img {
      width: 200px;
      height: auto;
      max-height: 32px;
      object-fit: contain;
      object-position: left center;
    }

    /* Nav rendered by wp_nav_menu() — defaults to <ul class="editorial-menu"><li><a>...</a><ul class="sub-menu">...</ul></li></ul> */
    .nav { display: flex; align-items: center; justify-self: center; }
    .editorial-menu {
      display: flex;
      gap: 38px;
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .editorial-menu > li { position: relative; list-style: none; }
    .editorial-menu > li > a {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--ink);
      padding: 10px 0;
      transition: color 0.2s;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }
    .editorial-menu > li > a:hover { color: var(--accent); }
    .editorial-menu > li.menu-item-has-children > a::after {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
      margin-left: 7px;
      opacity: 0.45;
    }
    .editorial-menu .sub-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: var(--bg-paper);
      border: 1px solid var(--rule-light);
      min-width: 240px;
      padding: 14px 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.22s ease;
      box-shadow: 0 16px 50px rgba(0,0,0,0.06);
      list-style: none;
      margin: 0;
      z-index: 200;
    }
    .editorial-menu > li:hover > .sub-menu,
    .editorial-menu > li:focus-within > .sub-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .editorial-menu .sub-menu li { list-style: none; padding: 0; margin: 0; }
    .editorial-menu .sub-menu a {
      display: block;
      padding: 11px 24px;
      font-size: 13px;
      letter-spacing: 0.01em;
      transition: background 0.15s;
      color: var(--ink);
      text-decoration: none;
    }
    .editorial-menu .sub-menu a:hover { background: rgba(20,20,20,0.04); }

    .nav-icons {
      display: flex;
      gap: 18px;
      align-items: center;
      justify-self: end;
      line-height: 1;
    }
    .icon-btn {
      width: 22px; height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: opacity 0.2s;
      position: relative;
      background: none;
      border: none;
      padding: 0;
    }
    .icon-btn:hover { opacity: 0.55; }
    .icon-btn svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.3; }

    /* Search — pill-shaped input on the left, magnifier submit button outside on the right */
    .search-form {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      line-height: 1;
    }
    .search-pill {
      width: 150px;
      height: 26px;
      box-sizing: border-box;
      border: 1px solid var(--rule-light);
      border-radius: 100px;
      background: rgba(20,20,20,0.03);
      padding: 0 14px;
      font-family: var(--sans);
      font-size: 12px;
      line-height: 24px;
      letter-spacing: 0.02em;
      color: var(--ink);
      outline: none;
      transition: border-color 0.2s, background 0.2s;
      -webkit-appearance: none;
      appearance: none;
      vertical-align: middle;
    }
    .search-pill::placeholder { color: var(--ink-mute); }
    .search-pill:focus {
      border-color: var(--ink);
      background: var(--bg-paper);
    }
    .search-pill::-webkit-search-decoration,
    .search-pill::-webkit-search-cancel-button { -webkit-appearance: none; }
    .search-submit {
      width: 22px;
      height: 22px;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s;
    }
    .search-submit:hover { opacity: 0.55; }
    .search-submit svg {
      width: 18px;
      height: 18px;
      stroke: var(--ink);
      fill: none;
      stroke-width: 1.3;
    }
    .cart-count {
      position: absolute;
      top: -5px;
      right: -8px;
      background: var(--ink);
      color: var(--paper);
      font-size: 9px;
      font-weight: 500;
      width: 15px; height: 15px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0;
      font-family: var(--sans);
    }
    .lang {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--ink);
      padding-left: 18px;
      border-left: 1px solid var(--rule-light);
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0;
    }
    .lang .lang-cn,
    .lang .lang-en {
      transition: opacity 0.2s;
      opacity: 0.4;
    }
    .lang .lang-cn.active,
    .lang .lang-en.active { opacity: 1; }
    .lang .lang-sep { opacity: 0.3; margin: 0 1px; }
    .lang:hover .lang-cn:not(.active),
    .lang:hover .lang-en:not(.active) { opacity: 0.7; }

    /* ---------- HERO ---------- */
    /* Hero with sticky stage for scroll-driven 30-frame camera unfold animation.
       Desktop: .hero is 200vh tall (= scroll space for the animation timeline);
       .hero-sticky pins to the viewport at 100vh while the user scrolls.
       JS swaps .hero-photo-main background-image based on scroll progress.
       Mobile: .hero collapses to 100vh and the animation is disabled — keeps
       the static fallback image, avoids janky touch-scroll + 3MB asset cost. */
    .hero {
      position: relative;
      height: 200vh;
      background: var(--bg-dark);
      color: var(--paper);
      overflow: clip; /* allow sticky to work; clip so blurred backdrop doesn't bleed */
    }
    .hero-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    /* Mobile: same 200vh sticky behaviour, same animation. The sticky-scroll
       pattern works on iOS/Android — momentum scroll just makes the camera
       unfold smoother. Total asset weight (~440KB) is fine on mobile data. */
    .hero-photo {
      /* Dark stage. Frames are 1600x1595 alpha-PNG (camera floats with transparency
         around it), JS swaps background-image of .hero-photo-main on scroll.
         Subtle radial spotlight gives the camera some atmospheric depth. */
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.05), transparent 65%),
        var(--bg-dark);
    }
    .hero-photo-main {
      position: absolute;
      inset: 0;
      /* Frame 001 is the default — visible immediately on first paint. JS will
         overwrite background-image inline as the user scrolls (instant swap,
         no transition). If JS never runs (e.g., disabled, mobile), this stays. */
      background:
        url('https://cdnshop.10art.cc/wp-content/uploads/2026/05/pf66-fold-r2/pf66-fold-001.webp')
        center/contain no-repeat;
      transition: background-image 0s;
    }
    .hero-photo::after {
      /* Dark gradient — keeps the white headline + button readable over the image.
         Heavier at top (eyebrow band) and bottom (button band), lightest in middle. */
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 22%, rgba(0,0,0,0.05) 65%, rgba(0,0,0,0.55));
      pointer-events: none;
    }
    @media (max-width: 768px) {
      /* Mobile: scale up the camera frame. With `contain`, the square 1600x1595
         image is letterboxed by the narrow viewport width and the camera (which
         occupies only ~37% of the canvas width) shrinks to ~37% of viewport.
         At 200% the camera fills ~74% of viewport width — matches the desktop
         visual size. Position is biased upward so the unfold motion below the
         camera body stays in view. */
      .hero-photo-main {
        background-size: 200% auto;
        background-position: center 38%;
      }
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 820px;
      padding: 0 var(--gutter);
      text-align: center;
    }
    .eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--paper);
      opacity: 0.75;
      margin-bottom: 36px;
    }
    .eyebrow::before, .eyebrow::after {
      content: '';
      display: inline-block;
      width: 22px; height: 1px;
      background: currentColor;
      vertical-align: middle;
      margin: 0 16px;
      opacity: 0.5;
    }
    .hero h1 {
      font-family: var(--display-en);
      font-weight: 200;
      font-size: clamp(56px, 8vw, 116px);
      line-height: 1;
      letter-spacing: -0.025em;
      margin-bottom: 28px;
      color: #ffffff;
    }
    .hero-sub {
      font-family: var(--display-cn);
      font-weight: 400;
      font-size: 18px;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.74);
      margin-bottom: 8px;
      line-height: 1.5;
    }
    .hero-sub-en {
      font-family: var(--display-en);
      font-weight: 300;
      font-size: 14px;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.62);
      margin-bottom: 64px;
    }

    /* Override parent storefront button styles — keep btn-line transparent in all states */
    button.btn-line,
    .btn-line {
      display: inline-block;
      font-family: var(--sans);
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      padding: 14px 0 !important;
      color: var(--paper);
      border: none !important;
      border-bottom: 1px solid currentColor !important;
      border-radius: 0 !important;
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      text-shadow: none !important;
      cursor: pointer;
      transition: letter-spacing 0.3s, color 0.2s, opacity 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    button.btn-line:hover,
    button.btn-line:focus,
    button.btn-line:active,
    .btn-line:hover,
    .btn-line:focus,
    .btn-line:active {
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      outline: none !important;
      letter-spacing: 0.32em;
      color: inherit;
    }
    .btn-line .arrow { display: inline-block; transition: transform 0.3s; margin-left: 10px; font-size: 14px; }
    .btn-line:hover .arrow { transform: translateX(8px); }

    .btn-line-dark { color: var(--ink) !important; }
    .btn-line-dark:hover, .btn-line-dark:focus { color: var(--ink) !important; }

    /* scroll cue */
    .scroll-cue {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.32em;
      color: var(--paper);
      opacity: 0.45;
      text-transform: uppercase;
      z-index: 2;
    }
    .scroll-cue::after {
      content: '';
      display: block;
      width: 1px; height: 32px;
      background: var(--paper);
      margin: 14px auto 0;
      animation: cue 2.4s ease-in-out infinite;
      transform-origin: top;
    }
    @keyframes cue {
      0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
      50% { transform: scaleY(1); opacity: 0.7; }
    }

    /* ---------- MANIFESTO ---------- */
    .manifesto {
      padding: 180px var(--gutter);
      background: var(--bg-cream);
      text-align: center;
    }
    .manifesto-inner {
      max-width: 760px;
      margin: 0 auto;
    }
    .manifesto h2 {
      font-family: var(--display-cn);
      font-weight: 300;
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.3;
      letter-spacing: 0.005em;
      margin-bottom: 36px;
      color: var(--ink);
      /* CJK 标点紧凑化（仅 palt：让逗号贴字，不强制半角） */
      font-feature-settings: "palt" 1;
    }
    .manifesto p {
      font-family: var(--sans-cn);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.85;
      color: #4a4843;
      max-width: 580px;
      margin: 0 auto 52px;
      letter-spacing: 0.01em;
    }

    /* ---------- SECTION COMMON ---------- */
    .section-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 18px;
    }
    .section-label::before, .section-label::after {
      content: ''; display: block; width: 32px; height: 1px;
      background: currentColor; opacity: 0.4;
    }
    .section-title {
      font-family: var(--display-en);
      font-weight: 300;
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.2;
      text-align: center;
      margin-bottom: 88px;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .section-title em { font-style: normal; font-weight: 500; }

    /* ---------- MADE ---------- */
    .made {
      padding: 160px var(--gutter) 140px;
      background: var(--bg-paper);
      border-top: 1px solid var(--rule-light);
    }
    .made-inner {
      max-width: var(--content);
      margin: 0 auto;
    }
    .made-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }
    .made-card {
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .made-card:hover { text-decoration: none; }
    /* When the photo has an inline background-image, suppress the noise/grain overlay */
    .made-photo[style*="background"]::after { display: none; }
    .made-photo {
      aspect-ratio: 3/4;
      background:
        radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.06), transparent 55%),
        linear-gradient(160deg, #1a1a1a, #050505);
      position: relative;
      overflow: hidden;
      margin-bottom: 28px;
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .made-card:hover .made-photo { transform: scale(0.99); }
    .made-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: 0.5;
      mix-blend-mode: overlay;
    }
    .made-photo-label {
      position: absolute;
      bottom: 18px;
      left: 22px;
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.3em;
      color: rgba(244,241,234,0.28);
      text-transform: uppercase;
      z-index: 1;
    }
    .made-photo-archived {
      background:
        radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.04), transparent 55%),
        linear-gradient(160deg, #2a2826, #100f0d);
    }
    .badge {
      position: absolute;
      top: 22px;
      left: 22px;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      padding: 6px 12px;
      background: var(--paper);
      color: var(--ink);
      z-index: 1;
    }
    .badge.archived {
      background: transparent;
      color: var(--paper);
      border: 1px solid var(--paper);
      opacity: 0.85;
    }
    .made-info { padding: 4px 4px 0; }
    .made-info-eyebrow {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 14px;
      font-weight: 500;
    }
    .made-info h3 {
      font-family: var(--display-en);
      font-weight: 300;
      font-size: 34px;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
      color: var(--ink);
    }
    .made-info p {
      font-family: var(--sans-cn);
      font-size: 14.5px;
      font-weight: 400;
      color: #4a4843;
      margin-bottom: 24px;
      line-height: 1.75;
      max-width: 460px;
      letter-spacing: 0.01em;
    }
    .price-line {
      font-family: var(--sans);
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--ink);
      margin-bottom: 22px;
    }
    .price-line .small { color: var(--ink-mute); font-size: 12px; }

    /* ---------- LENS (pf66intro) ----------
       Dark cinematic block. Single-column vertical stack:
         label → pull-quote → image-1 → spec strip → image-2 → credit.
       Bg #0a0a0a matches the photos' own background → images sit frameless.
       Scroll-reveal: .lens-reveal blocks fade + slide up on first intersection
       (driven by IntersectionObserver in template-pf66intro.php).
    */
    .lens {
      background: #0a0a0a;
      padding: 180px var(--gutter);
      color: rgba(244, 241, 234, 0.78);
      overflow: hidden;
    }
    .lens-inner {
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
    }

    /* Top: label + technical headline (single product designation line) */
    .lens-head { margin-bottom: 110px; }
    .lens-label {
      color: rgba(244, 241, 234, 0.6) !important;
      margin-bottom: 32px;
    }
    .lens-label::before, .lens-label::after {
      background: currentColor !important;
      opacity: 0.32 !important;
    }
    .lens-headline {
      font-family: var(--display-en);
      font-weight: 200;
      font-size: clamp(20px, 3.2vw, 38px);
      line-height: 1.3;
      color: var(--bg-cream);
      letter-spacing: 0.005em;
      max-width: 880px;
      margin: 0 auto;
      /* Force English/numeric typography even if browser tries CJK fallback */
      font-variant-numeric: tabular-nums lining-nums;
    }
    .lens-headline em {
      font-style: normal;
      font-weight: 300;
      color: var(--bg-cream);
    }

    /* Image shot — single hero image. Tight margin-bottom because the
       spec strip below is describing the same lens; extra space would
       feel like a topic break. */
    .lens-shot {
      max-width: 640px;
      margin: 0 auto 50px;
    }
    .lens-photo {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      background-color: #0a0a0a;
    }
    .lens-shot figcaption {
      margin-top: 22px;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(244, 241, 234, 0.4);
    }

    /* Spec strip — 6 cells with viewport-locked light-rays background.
       CSS-only parallax via `background-attachment: fixed`, modeled on
       WooCommerce's wc-block-featured-category implementation. Three layers:
         ::before   — bg image, viewport-locked (compositor-driven, no JS).
                      Image sized to a fixed centerpiece (~1000px) instead
                      of `cover` so the lens doesn't dominate the whole
                      viewport. 80% opacity for atmospheric subtlety.
         ::after    — dark gradient overlay (scrolls WITH the strip).
         .lens-spec — the cells themselves.

       iOS Safari ignores background-attachment: fixed (10+ year old bug).
       Detected via @supports(-webkit-overflow-scrolling: touch) — a
       deprecated iOS-only property — and gracefully degrades to scroll.
       This is the same fallback strategy WP/WC themes use. */
    .lens-specs {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0;
      width: 100vw;
      margin: 0 calc(50% - 50vw) 100px;
      padding-block: 88px;
      padding-inline: max(16px, calc((100vw - 1100px) / 2));
      min-height: 340px;
      align-items: center;
      border-top: 1px solid rgba(244, 241, 234, 0.18);
      border-bottom: 1px solid rgba(244, 241, 234, 0.18);
      isolation: isolate;
      overflow: hidden;
    }
    .lens-specs::before {
      /* Bg image positioned by JS-driven transform (see template-pf66intro.php).
         Box is 100vh tall + clipped by parent .lens-specs's overflow:hidden,
         so the JS just translates this layer to keep it visually anchored to
         viewport. CSS-only `background-attachment: fixed` would be cleaner
         but iOS Safari silently ignores it, and the user wants the effect
         to work on iOS too. JS parallax has minor compositor-vs-main-thread
         lag on iOS but it's the only way to get a visible effect there. */
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100vh;
      background-image: url('https://cdnshop.10art.cc/wp-content/uploads/2026/05/pf66-lens/lenslinebg-strip.webp');
      background-size: min(1000px, 88vw) auto;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.45;  /* lowered from 0.8 — bg is atmosphere, not subject */
      z-index: 0;
      pointer-events: none;
      transform: translate3d(0, var(--lens-bg-y, 0px), 0);
      -webkit-transform: translate3d(0, var(--lens-bg-y, 0px), 0);
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .lens-specs::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(180deg,
          rgba(10,10,10,0.42) 0%,
          rgba(10,10,10,0.18) 50%,
          rgba(10,10,10,0.42) 100%),
        radial-gradient(ellipse at center,
          rgba(10,10,10,0) 0%,
          rgba(10,10,10,0.25) 85%);
      pointer-events: none;
      z-index: 1;
    }
    @media (prefers-reduced-motion: reduce) {
      .lens-specs::before { transform: none; -webkit-transform: none; }
    }
    .lens-spec {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 0 10px;
    }
    .lens-spec + .lens-spec::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 1px; height: 56px;
      background: rgba(244, 241, 234, 0.18);
    }
    .lens-spec-num {
      font-family: var(--display-en);
      font-weight: 200;
      font-size: clamp(30px, 3.6vw, 48px);
      line-height: 1;
      color: var(--bg-cream);
      letter-spacing: -0.02em;
      text-shadow: 0 1px 24px rgba(0,0,0,0.5);
    }
    /* Text-only specs (ASPH / 全玻璃) — slightly smaller + tracked-out so the
       letterforms don't dominate vs the numerical cells */
    .lens-spec-num--text {
      font-size: clamp(22px, 2.6vw, 34px);
      letter-spacing: 0.04em;
      font-weight: 300;
    }
    .lens-spec-num small {
      font-size: 0.38em;
      font-weight: 300;
      margin-left: 4px;
      color: rgba(244, 241, 234, 0.6);
      letter-spacing: 0;
    }
    .lens-spec-num em {
      font-style: normal;
      font-weight: 300;
    }
    .lens-spec-label {
      font-family: var(--sans);
      font-size: 10.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(244, 241, 234, 0.6);
      text-shadow: 0 1px 12px rgba(0,0,0,0.6);
    }

    /* Samples grid — 5 square cards in a row, F16 in center.
       Square aspect-ratio (1:1) chosen for visual consistency: the source
       images mix portrait (DSC) and landscape (F16) orientations; cropping
       all to square via object-fit gives a tidy editorial row. Full image
       seen via lightbox click. */
    .samples-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin: 0 auto 80px;
      max-width: 1100px;
    }
    .samples-card {
      display: block;
      padding: 0;
      border: 0;
      background: #0a0a0a;
      cursor: zoom-in;
      overflow: hidden;
      position: relative;
      aspect-ratio: 1 / 1;
      outline: none;
      -webkit-appearance: none;
      transition: box-shadow 0.3s ease;
    }
    .samples-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .samples-card:hover img,
    .samples-card:focus-visible img { transform: scale(1.05); }
    .samples-card:focus-visible {
      box-shadow: 0 0 0 2px rgba(244, 241, 234, 0.35);
    }

    /* Lightbox modal — fixed full-viewport overlay, fade in/out, click
       backdrop OR close button OR Esc to dismiss. JS toggles the
       --open modifier class. */
    .samples-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(8, 8, 8, 0.94);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4vh 4vw;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0s linear 0.3s;
      cursor: zoom-out;
    }
    .samples-lightbox--open {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease;
    }
    .samples-lightbox-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
      cursor: zoom-out; /* image is clickable to close (matches WeChat/IG UX) */
      box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
    }
    .samples-lightbox-close {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 44px;
      height: 44px;
      border: 0;
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      font-size: 26px;
      font-family: var(--sans);
      line-height: 1;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, transform 0.2s;
      padding: 0;
    }
    .samples-lightbox-close:hover {
      background: rgba(255, 255, 255, 0.18);
      transform: scale(1.06);
    }

    /* Closing credit */
    .lens-foot {
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.06em;
      color: rgba(244, 241, 234, 0.45);
    }
    .lens-foot strong { color: rgba(244, 241, 234, 0.85); font-weight: 400; }

    /* Reveal-on-scroll — driven by IntersectionObserver toggling .lens-reveal--in */
    .lens-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
      will-change: opacity, transform;
    }
    .lens-reveal--in {
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .lens-reveal { opacity: 1; transform: none; transition: none; }
    }

    /* ---------- CRAFT (pf66intro) ----------
       Split layout: hero photo on left, title + paragraph + meta list on
       right. Dark background (#0a0a0a) to match .lens above and the
       overall pf66intro section rhythm. Image's dark CNC-detail content
       blends seamlessly into the section bg (frameless feel).
    */
    .craft {
      padding: 160px var(--gutter);
      background: #0a0a0a;
      color: rgba(244, 241, 234, 0.78);
    }
    .craft-inner {
      max-width: 1100px;
      margin: 0 auto;
    }
    .craft-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 80px;
      align-items: center;
    }
    .craft-image { margin: 0; }
    .craft-image img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 5 / 4;
      object-fit: cover;
      background-color: #0a0a0a;
    }
    .craft-text {
      max-width: 460px;
    }
    .craft-label {
      /* Override .section-label's centered + dashes — left-aligned for split layout */
      justify-content: flex-start;
      margin-bottom: 28px;
      color: rgba(244, 241, 234, 0.6) !important;
    }
    .craft-label::before { display: none; }
    .craft-label::after {
      content: '';
      flex: 1;
      max-width: 60px;
      height: 1px;
      background: currentColor !important;
      opacity: 0.32 !important;
      margin-left: 14px;
    }
    .craft-title {
      font-family: var(--display-en);
      font-weight: 200;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--bg-cream);
      margin-bottom: 28px;
    }
    .craft-body {
      font-family: var(--sans-cn);
      font-weight: 400;
      font-size: 15.5px;
      line-height: 1.85;
      color: rgba(244, 241, 234, 0.7);
      letter-spacing: 0.01em;
      margin-bottom: 36px;
    }
    .craft-meta {
      list-style: none;
      padding: 0;
      margin: 0;
      border-top: 1px solid rgba(244, 241, 234, 0.14);
      padding-top: 20px;
    }
    .craft-meta li {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(244, 241, 234, 0.5);
      padding: 9px 0;
      border-bottom: 1px solid rgba(244, 241, 234, 0.14);
    }
    .craft-meta li:last-child { border-bottom: 0; }

    /* ---------- MOD ---------- */
    .mod {
      padding: 160px var(--gutter) 140px;
      background: var(--bg-cream);
      border-top: 1px solid var(--rule-light);
    }
    .mod-inner { max-width: var(--content); margin: 0 auto; }
    .mod-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 72px;
    }
    .mod-card {
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .mod-card:hover { text-decoration: none; }
    .mod-photo[style*="background"]::after { display: none; }
    .mod-photo {
      aspect-ratio: 1/1;
      position: relative;
      margin-bottom: 18px;
      overflow: hidden;
    }
    .mod-photo-1 { background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.06), transparent 60%), linear-gradient(160deg, #1c1a18, #050403); }
    .mod-photo-2 { background: radial-gradient(ellipse at 60% 45%, rgba(255,255,255,0.05), transparent 60%), linear-gradient(140deg, #25201c, #080604); }
    .mod-photo-3 { background: radial-gradient(ellipse at 40% 55%, rgba(255,255,255,0.04), transparent 65%), linear-gradient(180deg, #1a1816, #060504); }
    .mod-photo-4 { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.05), transparent 60%), linear-gradient(150deg, #201d1a, #070605); }
    .mod-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: 0.45;
      mix-blend-mode: overlay;
    }
    .mod-photo-tag {
      position: absolute;
      bottom: 12px; left: 14px;
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 0.3em;
      color: rgba(244,241,234,0.26);
      text-transform: uppercase;
    }
    .mod-info-eyebrow {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 8px;
      font-weight: 500;
    }
    .mod-info h4 {
      font-family: var(--display-en);
      font-weight: 400;
      font-size: 18px;
      line-height: 1.3;
      margin-bottom: 6px;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
    .mod-price {
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--ink-mute);
    }
    .mod-cta { text-align: center; }

    /* ---------- SHIPPING ---------- */
    .ship {
      padding: 160px var(--gutter) 140px;
      background: var(--bg-paper);
      border-top: 1px solid var(--rule-light);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .ship-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    .ship-bg svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .ship-inner {
      max-width: var(--content);
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    /* Full-section frosted glass — covers entire .ship box, soft blur on dots/routes */
    .ship-frost {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    /* World map dot/route animation */
    .city {
      fill: rgba(20,20,20,0.45);
      animation: cityPulse 3s ease-in-out infinite;
    }
    .city-hub { fill: #B5121B; }
    .city-1  { animation-delay: 0s; }
    .city-2  { animation-delay: 0.25s; }
    .city-3  { animation-delay: 0.5s; }
    .city-4  { animation-delay: 0.75s; }
    .city-5  { animation-delay: 1s; }
    .city-6  { animation-delay: 1.25s; }
    .city-7  { animation-delay: 1.5s; }
    .city-8  { animation-delay: 1.75s; }
    .city-9  { animation-delay: 2s; }
    .city-10 { animation-delay: 2.25s; }
    .city-11 { animation-delay: 2.5s; }
    .city-12 { animation-delay: 2.75s; }
    @keyframes cityPulse {
      0%, 100% { opacity: 0.45; }
      50% { opacity: 1; }
    }
    .route {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      opacity: 0;
      animation: drawRoute 30s ease-in-out infinite;
    }
    /* Sequential clockwise rotation — each route 2.5s slot, 12 routes × 2.5s = 30s cycle */
    .route-1  { animation-delay: 0s;    }   /* N */
    .route-9  { animation-delay: 2.5s;  }   /* NNE */
    .route-2  { animation-delay: 5s;    }   /* NE */
    .route-10 { animation-delay: 7.5s;  }   /* ENE */
    .route-3  { animation-delay: 10s;   }   /* E */
    .route-11 { animation-delay: 12.5s; }   /* ESE */
    .route-4  { animation-delay: 15s;   }   /* SE */
    .route-5  { animation-delay: 17.5s; }   /* S */
    .route-6  { animation-delay: 20s;   }   /* SW */
    .route-12 { animation-delay: 22.5s; }   /* WSW */
    .route-7  { animation-delay: 25s;   }   /* W */
    .route-8  { animation-delay: 27.5s; }   /* NW */
    @keyframes drawRoute {
      /* Active window 0–8% of 30s cycle (~2.4s per route) */
      0%   { stroke-dashoffset: 1000;  opacity: 0; }
      0.5% { stroke-dashoffset: 1000;  opacity: 0; }
      1%   { stroke-dashoffset: 1000;  opacity: 0.55; }
      5%   { stroke-dashoffset: 0;     opacity: 0.55; }
      6%   { stroke-dashoffset: 0;     opacity: 0.55; }
      8%   { stroke-dashoffset: -1000; opacity: 0; }
      100% { stroke-dashoffset: -1000; opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .route, .city { animation: none; opacity: 0.5; }
    }
    .ship .section-title { margin-bottom: 32px; }
    .ship-paragraph {
      font-family: var(--sans-cn);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.85;
      color: #4a4843;
      max-width: 580px;
      margin: 0 auto 80px;
      letter-spacing: 0.01em;
    }
    .ship-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      max-width: 820px;
      margin: 0 auto 64px;
      padding: 56px 0;
      border-top: 1px solid var(--rule-light);
      border-bottom: 1px solid var(--rule-light);
    }
    .stat { text-align: center; }
    .stat-num {
      font-family: var(--display-en);
      font-weight: 300;
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 14px;
      white-space: nowrap;
    }
    .stat-label {
      font-family: var(--sans);
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-mute);
      line-height: 1.7;
    }
    @media (max-width: 700px) {
      .ship { padding-top: 100px; padding-bottom: 100px; }
      .ship-stats { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
      .ship-paragraph { margin-bottom: 56px; }
    }

    /* ---------- CONNECT ---------- */
    .connect {
      padding: 140px var(--gutter);
      background: var(--bg-paper);
      border-top: 1px solid var(--rule-light);
    }
    .connect-inner {
      max-width: var(--content);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    /* EN homepage hides the WeChat block — Newsletter alone, narrower + centered */
    .connect-inner.connect-inner--single {
      grid-template-columns: 1fr;
      max-width: 540px;
    }
    .connect-block h3 {
      font-family: var(--display-en);
      font-weight: 300;
      font-size: 28px;
      margin-bottom: 18px;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .connect-block p {
      font-family: var(--sans-cn);
      font-size: 14.5px;
      font-weight: 400;
      color: #4a4843;
      margin-bottom: 24px;
      line-height: 1.75;
      letter-spacing: 0.01em;
    }
    .qr-block {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .qr-image {
      width: 132px;
      height: 132px;
      display: block;
      background: #fff;
      border: 1px solid var(--rule-light);
      padding: 6px;
      box-sizing: content-box;
      object-fit: contain;
    }
    /* WeChat deep-link launch button — only renders on touch devices (mobile/tablet)
       so users with WeChat installed can tap straight into the mini program. Hidden
       on desktop where weixin:// scheme would do nothing useful. */
    .wechat-launch-btn {
      display: none;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      padding: 9px 18px;
      background: #07C160;
      color: #fff !important;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      border-radius: 50px;
      text-decoration: none;
      transition: background 0.2s, transform 0.1s;
      box-shadow: 0 2px 10px rgba(7, 193, 96, 0.28);
    }
    .wechat-launch-btn svg { width: 15px; height: 15px; fill: #fff; flex-shrink: 0; }
    .wechat-launch-btn:hover { background: #06AE56; }
    .wechat-launch-btn:active { transform: translateY(1px); }
    /* Two triggers OR'd together: touch-only devices (most reliable for true
       mobile) plus narrow viewport (catches request-desktop-site mode and
       hybrid devices that report pointer: fine). */
    @media (hover: none) and (pointer: coarse), (max-width: 768px) {
      .wechat-launch-btn { display: inline-flex; }
    }
    /* ---- Newsletter plugin form (editorial override) ---------------- */
    .connect-newsletter { margin-top: 28px; }
    .connect-newsletter .tnp,
    .connect-newsletter .tnp-subscription,
    .connect-newsletter .tnp-subscription-minimal { margin: 0; }
    .connect-newsletter form {
      display: flex;
      align-items: stretch;
      gap: 0;
      border-bottom: 1px solid var(--ink);
      padding-bottom: 4px;
      margin: 0;
    }
    .connect-newsletter .tnp-field-email { flex: 1; margin: 0; }
    .connect-newsletter .tnp-field label { /* visually hide field labels */
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .connect-newsletter .tnp-email,
    .connect-newsletter input[type="email"] {
      flex: 1;
      width: 100%;
      box-sizing: border-box;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 10px 0 !important;
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: 0.01em;
      outline: none;
      color: var(--ink);
      font-weight: 300;
      border-radius: 0;
      min-height: 0;
    }
    .connect-newsletter .tnp-email::placeholder,
    .connect-newsletter input[type="email"]::placeholder { color: var(--ink-mute); }
    .connect-newsletter .tnp-field-button { margin: 0; flex: 0 0 auto; align-self: center; }
    .connect-newsletter .tnp-submit,
    .connect-newsletter input[type="submit"],
    .connect-newsletter button[type="submit"] {
      flex: 0 0 auto;
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      cursor: pointer;
      padding: 0 4px !important;
      color: var(--ink) !important;
      min-height: 0;
      border-radius: 0;
      width: auto;
    }
    .connect-newsletter .tnp-submit:hover,
    .connect-newsletter input[type="submit"]:hover { color: var(--accent, #B5121B) !important; }
    .connect-newsletter .tnp-error,
    .connect-newsletter .tnp-message {
      margin-top: 14px;
      font-size: 13px;
      color: var(--ink);
      line-height: 1.6;
    }
    .connect-newsletter .tnp-error { color: var(--accent, #B5121B); }
    .connect-newsletter-note {
      margin-top: 14px;
      font-size: 11.5px;
      line-height: 1.7;
      color: var(--ink-mute);
      letter-spacing: 0.02em;
    }

    /* ============================================
       ORIGINAL FOOTER (verbatim from shop.10art.cc,
       only minor tweaks for preview compatibility)
       ============================================ */
    .site-footer {
      background-color: #f8f8f8;
      color: #6d6d6d;
      font-size: .857143em;
    }
    .site-footer a:not(.button):not(.components-button) {
      color: #686868;
      text-decoration: none;
    }
    .site-footer a:not(.button):not(.components-button):hover {
      color: #333;
    }
    .site-footer .col-full {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 22px;
    }
    .tenart-footer { background:#f8f8f8; padding:40px 0 20px; }
    .tenart-footer__inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; gap:40px; flex-wrap:wrap; }
    .tenart-footer__brand { flex:1; min-width:220px; }
    .tenart-footer__brand img { width:80px; height:80px; border-radius:12px; margin-bottom:12px; }
    .tenart-footer__brand p { color:#888; font-size:13px; margin:0; line-height:1.6; font-family: var(--sans); font-weight: 300; letter-spacing: 0.02em; }
    .tenart-footer__categories { flex:1.5; min-width:280px; }
    .tenart-footer__categories h4 { font-size:15px; font-weight:600; color:#333; margin:0 0 16px; text-transform:uppercase; letter-spacing:1px; font-family: var(--sans); }
    .tenart-footer__cat-links { display:flex; gap:12px; flex-wrap:wrap; }
    .tenart-footer__cat-links a { display:inline-block; padding:8px 20px; background:#fff; border:1px solid #e0e0e0; border-radius:20px; color:#555; font-size:13px; text-decoration:none; transition:all .2s; font-family: var(--sans); }
    .tenart-footer__cat-links a:hover { border-color:#333; color:#333; background:#f0f0f0; }
    .tenart-footer__social { width:100%; text-align:center; padding-top:24px; border-top:1px solid #eee; margin-top:8px; }
    .tenart-footer__social a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin:0 6px; border-radius:50%; background:#eee; color:#555; text-decoration:none; transition:all .2s; font-size:16px; }
    .tenart-footer__social a:hover { background:#333; color:#fff; }
    .tenart-footer__social svg { width:16px; height:16px; fill:currentColor; }
    .site-footer .site-info .payment-icon svg { width:38px; height:24px; vertical-align:middle; }
    .site-info { font-family: var(--sans); }
    @media (max-width:600px) {
      .tenart-footer__inner { flex-direction:column; gap:24px; }
      .tenart-footer__brand { text-align:center; }
      .tenart-footer__brand img { margin:0 auto 12px; display:block; }
      .tenart-footer__categories { text-align:center; }
      .tenart-footer__cat-links { justify-content:center; }
      .site-footer .site-info { flex-direction:column; text-align:center; gap:12px; }
      .site-info__copyright { font-size:11px !important; gap:4px !important; flex-wrap:nowrap !important; white-space:nowrap; }
    }

    /* ---------- HAMBURGER + MOBILE MENU ---------- */
    .nav-toggle {
      display: none;             /* hidden on desktop, shown on mobile via media query */
      width: 28px; height: 28px;
      border: none; background: none; padding: 0;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }
    .nav-toggle svg {
      width: 22px; height: 22px;
      stroke: var(--ink); fill: none; stroke-width: 1.6;
      stroke-linecap: round;
    }
    .nav-toggle:hover { opacity: 0.55; }
    .mobile-menu {
      display: none;             /* hidden on desktop entirely */
    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 960px) {
      .header-inner { grid-template-columns: 1fr auto; gap: 12px; }
      .nav { display: none; }                /* hide desktop horizontal nav */
      .nav-icons .search-form { display: none; }   /* hide inline pill search on mobile */
      .nav-toggle { display: inline-flex; }  /* show hamburger */
      .lang { padding-left: 12px; }          /* tighter spacing on mobile */

      /* Mobile menu drawer (slides down from header) */
      .mobile-menu:not([hidden]) {
        display: block;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--bg-paper);
        border-bottom: 1px solid var(--rule-light);
        box-shadow: 0 16px 40px rgba(0,0,0,0.06);
        padding: 24px var(--gutter);
        z-index: 200;
      }
      .mobile-search {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 28px;
      }
      .mobile-search input[type="search"] {
        flex: 1; min-width: 0;
        height: 38px;
        border: 1px solid var(--rule-light);
        border-radius: 100px;
        background: rgba(20,20,20,0.03);
        padding: 0 18px;
        font-family: var(--sans);
        font-size: 14px;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
      }
      .mobile-search input[type="search"]:focus {
        border-color: var(--ink);
        background: var(--bg-paper);
      }
      .mobile-search button {
        width: 38px; height: 38px;
        border: none; background: none; padding: 0;
        cursor: pointer;
        flex-shrink: 0;
      }
      .mobile-search button svg {
        width: 22px; height: 22px;
        stroke: var(--ink); fill: none; stroke-width: 1.4;
      }
      .mobile-menu-list {
        list-style: none;
        margin: 0; padding: 0;
      }
      .mobile-menu-list > li {
        border-top: 1px solid var(--rule-light);
      }
      .mobile-menu-list > li:last-child {
        border-bottom: 1px solid var(--rule-light);
      }
      .mobile-menu-list a {
        display: block;
        padding: 16px 0;
        font-family: var(--sans);
        font-size: 15px;
        letter-spacing: 0.02em;
        color: var(--ink);
        text-decoration: none;
      }
      .mobile-menu-list .menu-item-has-children > a::after {
        content: ' +';
        opacity: 0.4;
        margin-left: 6px;
      }
      .mobile-menu-list .sub-menu {
        list-style: none;
        margin: 0 0 12px 0;
        padding: 0 0 4px 14px;
        border-left: 1px solid var(--rule-light);
      }
      .mobile-menu-list .sub-menu a {
        padding: 10px 0;
        font-size: 13.5px;
        opacity: 0.75;
      }

      .made-grid { grid-template-columns: 1fr; gap: 64px; }
      .mod-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .connect-inner { grid-template-columns: 1fr; gap: 56px; }
      .manifesto, .made, .mod, .lens, .craft, .connect { padding-top: 100px; padding-bottom: 100px; }

      /* Craft (pf66intro): split → stack. Image first, then text. */
      .craft-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .craft-text { max-width: none; }
      .craft-title { font-size: clamp(24px, 6vw, 30px); }
      .craft-body { font-size: 14.5px; }

      /* Lens (pf66intro): tighter vertical rhythm; 6-col strip → 3×2 grid */
      .lens-head { margin-bottom: 70px; }
      .lens-shot { margin-bottom: 36px; }
      .lens-headline {
        font-size: clamp(16px, 4.2vw, 22px);
        letter-spacing: 0.02em;
      }
      .lens-specs {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 48px 8px;
        /* Override ONLY bottom margin — keep the desktop full-bleed breakout
           (`margin-left/right: calc(50% - 50vw)`) so the strip still spans
           viewport edge-to-edge. Using `margin: 0 auto 70px` here would
           collapse left/right back to 0 (per CSS spec when width > parent),
           causing an asymmetric ~22px left gap (the .lens gutter shows). */
        margin-bottom: 70px;
        min-height: auto;
        /* CRITICAL: override desktop's `align-items: center`. With center,
           each cell shrinks to its own content height and gets centered in
           the row track → cells in the same row have DIFFERENT top edges
           when their contents differ → border-top doesn't align across the
           row → looks like a "short, misaligned" horizontal hairline.
           `stretch` (default) makes all cells fill the row's full height. */
        align-items: stretch;
      }
      .lens-spec {
        padding: 26px 8px;
        /* Now that cells are full row height, center their content vertically
           via the cell's own flex column rules */
        justify-content: center;
      }
      /* Reset desktop's sibling-relative vertical-divider rule and apply
         a grid-relative one so dividers sit between cells in BOTH rows */
      .lens-spec + .lens-spec::before { display: none; }
      .lens-spec:not(:nth-child(3n+1))::before {
        content: '';
        position: absolute;
        left: 0; top: 50%;
        transform: translateY(-50%);
        width: 1px; height: 44px;
        background: rgba(244, 241, 234, 0.28);
      }
      /* Horizontal hairline between row 1 and row 2.
         Opacity raised 0.18 → 0.28 so the line stays visible even where
         the bg image is dark (the dim overlay would otherwise swallow it). */
      .lens-spec:nth-child(n+4) {
        border-top: 1px solid rgba(244, 241, 234, 0.28);
      }
      .lens-spec-num { font-size: clamp(22px, 6.5vw, 34px); }
      .lens-spec-num--text { font-size: clamp(16px, 4.6vw, 22px); }

      /* Samples — 5 thumbnails too narrow at phone widths (~70px each at
         375px viewport). Switch to horizontal scroll-snap carousel: each
         card is ~62% of container width, user swipes left/right. Hidden
         scrollbar. Stays within .lens-inner's padding (no breakout needed). */
      .samples-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        margin-bottom: 56px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .samples-grid::-webkit-scrollbar { display: none; }
      .samples-card {
        flex: 0 0 62%;
        scroll-snap-align: start;
      }
      .hero { min-height: 88vh; }
      .site-logo img { width: 160px; max-height: 28px; }
    }
    @media (max-width: 600px) {
      :root { --gutter: 22px; }
      .mod-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
      /* Hero — keep "Pocket Fold 66" on a single line on phones */
      .hero h1 { font-size: 42px; letter-spacing: -0.02em; }
      .hero-sub { font-size: 16px; }
      .hero-sub-en { font-size: 14px; }
      /* Eyebrow — shrink + tighten + drop side dashes (otherwise wraps) */
      .eyebrow {
        font-size: 9.5px;
        letter-spacing: 0.16em;
        margin-bottom: 28px;
      }
      .eyebrow::before, .eyebrow::after { display: none; }
      .made-info h3 { font-size: 28px; }
    }

    /* Footer site-info row — single-line; font + icon size scale down on small screens */
    @media (max-width: 600px) {
      .site-footer .site-info {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        text-align: center !important;
        padding: 16px 10px !important;
      }
      /* ICP / copyright row: ALWAYS one line, font auto-scales to fit */
      .site-info__copyright {
        font-size: clamp(7.5px, 2.45vw, 11px) !important;
        line-height: 1.4 !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100%;
      }
      .site-info__copyright > * { white-space: nowrap !important; }
      .site-info__copyright a img { width: 1em !important; height: 1em !important; }

      /* Payment icons row: ALWAYS one line, icons share width equally */
      .site-info__payments {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: clamp(2px, 0.8vw, 6px) !important;
        width: 100%;
      }
      .site-info__payments .payment-icon {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: center !important;
      }
      .site-info__payments .payment-icon svg {
        width: 100% !important;
        max-width: 38px !important;
        height: auto !important;
        vertical-align: middle !important;
      }
    }

    /* preview hint */
    .preview-hint {
      position: fixed;
      bottom: 20px; right: 20px;
      background: rgba(10,10,10,0.92);
      color: var(--paper);
      padding: 14px 18px;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.04em;
      max-width: 300px;
      line-height: 1.65;
      z-index: 999;
      backdrop-filter: blur(8px);
      border-radius: 2px;
    }
    .preview-hint b { letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; font-weight: 500; display: block; margin-bottom: 4px; }
    .preview-hint button {
      background: none; border: none; color: var(--paper);
      font-size: 14px; opacity: 0.6; cursor: pointer;
      float: right; line-height: 1; padding: 0; margin-left: 10px;
    }

    /* Force light mode site-wide — opt out of OS dark + Chrome force-dark */
    :root { color-scheme: light only; }