/* ============================================================
   front.css — front-page (TOP / index) page-specific styles

   静的プロトタイプ index.html の inline <style> をそのまま移植。
   front-page.php からのみ enqueue する (条件: is_front_page()).

   除外:
     - footer 用ルール … footer.css へ集約 (全ページ共有)
     - .tw-panel / .tw-row / .tw-swatches … in-design ツール (WP では使わない)

   url() の修正:
     CSS が volto-theme/assets/ 内にあるので、
     `url('assets/scene-engine.jpg')` → `url('scene-engine.jpg')` のように
     ファイル名のみのパスに書き換えている。

   依存:
     tokens.css → base.css → header.css → footer.css → front.css
   ============================================================ */

  body{
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  .en{ font-family: var(--en); letter-spacing: 0.02em; }
  .mono{ font-family: var(--mono); letter-spacing: 0; }

  /* Mobile: full-hero clickable overlay disabled (use the explicit philo-link instead) */
  .hero .hero-link{ display: none; }

  /* --- Header (page-specific overrides on top of header.css) --- */
  .header .brand{ transition: opacity .5s ease; }
  .header.past-hero .brand{
    opacity: 0;
    pointer-events: none;
  }
  .header .menu-btn{
    width: 34px; height: 34px;
    display: grid; place-items: center;
    color: #fff;
    mix-blend-mode: difference;
  }
  .header .menu-btn .lines{
    width: 22px; height: 8px; position: relative;
  }
  .header .menu-btn .lines::before,
  .header .menu-btn .lines::after{
    content:""; position:absolute; left:0; right:0; height:1px; background: currentColor;
  }
  .header .menu-btn .lines::before{ top:0; }
  .header .menu-btn .lines::after{ bottom:0; }

  /* --- Fixed bottom CTA (split: primary + secondary) --- */
  .dock{
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 520px;
    z-index: 30;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    pointer-events: none;
    background: linear-gradient(180deg, rgba(244,242,237,0) 0%, rgba(244,242,237,0.75) 40%, rgba(244,242,237,0.95) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .dock .group{
    pointer-events: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .dock .cta{
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px;
    padding: 14px 18px;
    border-radius: 999px;
    font-family: var(--jp);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.18em;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .dock .cta:active{ transform: translateY(1px); }
  .dock .cta.primary{
    background: var(--ink);
    color: var(--paper);
  }
  .dock .cta.ghost{
    background: rgba(244,242,237,0.96);
    color: var(--ink);
    border: 1px solid rgba(10,10,10,0.18);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    gap: 6px;
  }
  .dock .cta .arrow{
    font-family: var(--en);
    font-weight: 300;
    font-size: 18px;
    opacity: 0.95;
  }
  .dock .cta.ghost .arrow{ font-size: 14px; opacity: 0.7; }

  /* --- Sections --- */
  section{ position: relative; }
  .section-dark{
    background: var(--ink);
    color: var(--paper);
  }
  .section-light{
    background: var(--paper);
    color: var(--ink);
  }
  .pad{
    padding: 120px 26px 140px;
  }

  /* --- Small label (monospace micro-caption) --- */
  .micro{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim-on-dark);
  }
  .section-light .micro{ color: var(--dim-on-light); }
  .rule{
    display: inline-block;
    width: 28px; height: 1px;
    background: currentColor;
    opacity: 0.35;
    vertical-align: middle;
    margin-right: 10px;
  }

  /* ===== 1. HERO ===== */
  .hero{
    min-height: 90vh;
    min-height: 90svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 110px 26px 12svh;
    overflow: hidden;
  }
  .hero .visual{
    position: absolute; inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .hero .visual picture,
  .hero .visual img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .hero .visual img{
    object-fit: cover;
    object-position: 55% center;
  }
  .hero .placeholder-tag{
    position: absolute;
    bottom: 150px; left: 26px;
    z-index: 2;
    color: var(--dim-on-dark);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
  .hero .top-row{
    position: relative; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    color: rgba(255,255,255,0.92);
  }
  .hero .top-row .meta{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--dim-on-dark);
    letter-spacing: 0.14em;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .hero .copy{
    position: relative; z-index: 2;
    color: rgba(255,255,255,0.92);
  }
  .hero .copy h1{
    font-family: var(--jp);
    font-weight: 250;
    font-size: clamp(30px, 8.6vw, 42px);
    line-height: 1.45;
    letter-spacing: 0.04em;
    margin: 0 0 22px;
    text-wrap: balance;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .hero .copy h1 .break{ display:block; }
  .hero .copy .sub{
    font-family: var(--jp);
    font-weight: 300;
    font-size: 13px;
    color: rgba(244,242,237,0.78);
    letter-spacing: 0.14em;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }

  /* Philosophy quiet link */
  .hero .copy .philo-link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 4px 0;
    font-family: var(--jp);
    font-weight: 300;
    font-size: 11.5px;
    letter-spacing: 0.25em;
    color: rgba(244,242,237,0.6);
    transition: color .3s ease;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .hero .copy .philo-link:hover{ color: rgba(244,242,237,0.85); }
  .hero .copy .philo-link .line{
    display: inline-block;
    width: 18px; height: 1px;
    background: currentColor;
    opacity: 0.6;
  }
  .hero .copy .philo-link .en{
    font-family: var(--en);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.22em;
    opacity: 0.7;
  }

  /* Hero CTA block */
  .hero .actions{
    position: relative; z-index: 2;
    margin-top: 28px;
    display: flex; flex-direction: column; gap: 14px;
    align-items: flex-start;
  }
  .hero .actions .btn{
    display: inline-flex; align-items: center; justify-content: space-between;
    min-width: 240px;
    min-height: 54px;
    padding: 14px 22px;
    border-radius: 999px;
    font-family: var(--jp);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.18em;
    transition: transform .2s ease, background-color .2s ease;
  }
  .hero .actions .btn:active{ transform: translateY(1px); }
  .hero .actions .btn.primary{
    background: var(--paper);
    color: var(--ink);
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  }
  .hero .actions .btn.primary .arrow{ font-family: var(--en); font-weight: 300; font-size: 18px; }
  .hero .actions .btn.ghost{
    background: transparent;
    color: var(--paper);
    border: 1px solid rgba(244,242,237,0.35);
    gap: 14px;
    font-size: 13px;
    letter-spacing: 0.16em;
    padding: 12px 20px;
    min-height: 48px;
  }
  .hero .actions .btn.ghost .arrow{ font-family: var(--en); font-weight: 300; font-size: 14px; opacity: 0.75; }
  .hero .actions .btn.ghost .dot{
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--accent);
    display: inline-block;
    margin-right: 4px;
  }
  .hero .scroll-hint{
    position: absolute;
    bottom: 110px; right: 26px;
    z-index: 2;
    color: var(--dim-on-dark);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
    display: flex; align-items: center; gap: 10px;
  }
  .scroll-hint .tick{
    width: 1px; height: 38px; background: currentColor; opacity: 0.5;
    animation: tick 2.4s ease-in-out infinite;
  }
  @keyframes tick{
    0%   { transform: scaleY(0.2); transform-origin: top; opacity: 0.2; }
    50%  { transform: scaleY(1);   transform-origin: top; opacity: 0.6; }
    51%  { transform: scaleY(1);   transform-origin: bottom; }
    100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0.2; }
  }

  /* ===== 1.5 QUICK INVENTORY (bridge band) ===== */
  .bridge{
    background: var(--paper);
    color: var(--ink);
    padding: 44px 22px 48px;
    border-bottom: 1px solid var(--line-on-light);
  }
  .bridge .head{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px;
  }
  .bridge .head .micro{ color: var(--dim-on-light); }
  .bridge .head .count{
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.16em; color: var(--ink);
  }
  .bridge .head .count .n{
    font-family: var(--en); font-weight: 500; font-size: 15px; letter-spacing: 0.04em;
    margin-right: 4px;
  }
  .bridge .grid{
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .bridge .card{
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 150px;
    padding: 18px 18px 16px;
    border: 1px solid var(--line-on-light);
    border-radius: 2px;
    background: var(--paper);
    position: relative;
    transition: background-color .25s ease;
  }
  .bridge .card.filled{
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .bridge .card .lbl{
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--dim-on-light);
  }
  .bridge .card.filled .lbl{ color: var(--dim-on-dark); }
  .bridge .card .t{
    font-family: var(--jp); font-weight: 400;
    font-size: 17px; letter-spacing: 0.14em;
    margin-top: 8px;
  }
  .bridge .card .sub{
    font-family: var(--jp); font-weight: 300;
    font-size: 11.5px; letter-spacing: 0.08em;
    line-height: 1.7;
    color: var(--dim-on-light);
    margin-top: 4px;
  }
  .bridge .card.filled .sub{ color: var(--dim-on-dark); }
  .bridge .card .go{
    margin-top: 14px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--en); font-weight: 400;
    font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .bridge .card .go .arrow{ font-weight: 300; font-size: 16px; }
  .bridge .card .seal{
    position: absolute; top: 14px; right: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent-soft);
  }
  .bridge .card .seal::before{
    content: ""; width: 6px; height: 6px; border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(120,150,180,0.12);
  }

  /* ===== 2. VALUES (light) ===== */
  .values{ padding: 88px 26px 140px; }
  .values .head{
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 90px;
  }
  .values .pair{
    display: grid;
    grid-template-columns: 1fr;
    gap: 90px;
  }
  .value{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .value .frame{
    aspect-ratio: 4 / 5;
    background: #e4e1d9;
    position: relative;
    overflow: hidden;
  }
  .value .frame.a{
    background:
      radial-gradient(120% 80% at 30% 30%, #c8c3b8 0%, #e4e1d9 55%, #d9d5ca 100%);
  }
  .value .frame.b{
    background:
      radial-gradient(120% 80% at 70% 70%, #cac5b9 0%, #e6e3db 55%, #ddd9ce 100%);
  }
  .value .frame .tag{
    position: absolute; left: 14px; bottom: 12px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(10,10,10,0.5);
  }
  .value .frame::after{
    content:""; position:absolute; inset:0;
    background: repeating-linear-gradient(100deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 6px);
    pointer-events:none;
  }
  .value .word{
    font-family: var(--jp);
    font-weight: 300;
    font-size: 34px;
    letter-spacing: 0.28em;
    padding-left: 4px;
  }
  .value .word .en-sub{
    display:block;
    font-family: var(--en);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--dim-on-light);
    margin-top: 10px;
  }

  /* ===== 3. MOOD (dark, full-bleed) ===== */
  .mood{
    min-height: 110vh;
    min-height: 110svh;
    padding: 140px 26px 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
  }
  .mood .bg{
    position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(80% 60% at 80% 20%, rgba(120,130,150,0.18), transparent 60%),
      radial-gradient(60% 40% at 10% 80%, rgba(200,200,200,0.08), transparent 70%),
      linear-gradient(180deg, #090909 0%, #121212 100%);
  }
  .mood .bg::after{
    content:""; position:absolute; inset:0;
    background: repeating-linear-gradient(86deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 9px);
  }
  .mood .inner{
    position: relative; z-index: 2;
  }
  .mood .caption{
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.2em; color: var(--dim-on-dark);
  }
  .mood .text{
    margin-top: 40vh;
    font-family: var(--jp);
    font-weight: 200;
    font-size: clamp(20px, 5.8vw, 28px);
    line-height: 2.1;
    letter-spacing: 0.1em;
    color: var(--paper);
  }
  .mood .text span{ display: block; }
  .mood .text span + span{ margin-top: 8px; }
  .mood .text .dim{ color: var(--dim-on-dark); }

  /* ===== 1c. SCENES (整備 → 美しさ → 空気感) ===== */
  .scenes{
    background: #050506;
  }
  .scene{
    position: relative;
    overflow: hidden;
    background: #050506;
  }
  .scene .img{
    position: absolute; inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .scene .img::after{
    content:""; position:absolute; inset:0;
    pointer-events:none;
  }
  .scene .cap{
    position: absolute;
    left: 22px; bottom: 18px;
    z-index: 2;
    color: rgba(244,242,237,0.55);
    font-family: var(--mono);
    font-size: 10px;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .scene .cap .n{
    color: rgba(244,242,237,0.4);
    margin-right: 12px;
  }
  /* 1: Engine — full bleed, deep contrast */
  .scene-engine{
    aspect-ratio: 4 / 5;
  }
  .scene-engine .img{
    background-image: url('scene-engine.jpg');
    background-position: 50% 55%;
  }
  .scene-engine .img::after{ background: transparent; }
  /* 2: Tank — contained with breathing room */
  .scene-tank-wrap{
    background: #050506;
    padding: 36px 20px 44px;
  }
  .scene-tank{
    aspect-ratio: 4 / 5;
  }
  .scene-tank .img{
    background-image: url('scene-tank.jpg');
    background-position: 50% 55%;
  }
  .scene-tank .img::after{ background: transparent; }
  /* 3: Workbench — darker close */
  .scene-bench{
    aspect-ratio: 4 / 5;
  }
  .scene-bench .img{
    background-image: url('scene-workbench.jpg');
    background-position: 50% 50%;
  }
  .scene-bench .img::after{ background: transparent; }

  /* ===== Narrative scenes (向き合う / 納得する / 人生を豊かに) ===== */
  .stanza{
    background: #0a0a0a;
    color: var(--paper);
    padding: 56px 0 64px;
  }
  .stanza + .stanza{
    padding-top: 0;
  }
  .stanza .photo{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #050506;
  }
  .stanza .photo img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .stanza .photo::after{ content: none; }
  .stanza .photo .num{
    position: absolute;
    top: 18px; left: 22px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: rgba(244,242,237,0.7);
  }
  .stanza .text{
    padding: 48px 26px 12px;
  }
  .stanza h2{
    font-family: var(--jp);
    font-weight: 300;
    font-size: 34px;
    letter-spacing: 0.10em;
    line-height: 1.5;
    margin: 0;
    color: var(--paper);
  }
  .stanza .en-sub{
    display: block;
    font-family: var(--en);
    font-weight: 300;
    font-size: 11.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(244,242,237,0.45);
    margin-top: 14px;
  }
  .stanza .body{
    margin-top: 26px;
    font-family: var(--jp);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 2.0;
    letter-spacing: 0.06em;
    color: rgba(244,242,237,0.72);
  }
  .stanza .body span{ display:block; }
  .stanza-divider{
    height: 1px;
    background: rgba(244,242,237,0.10);
    margin: 0 26px;
  }

  /* ===== Poster sections (full-bleed photo with text overlay) ===== */
  .pair-section{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #050506;
    color: var(--paper);
  }
  .pair-section + .pair-section{
    margin-top: 64px;
  }
  .inv.actions-band + .pair-section{
    padding-top: 36px;
  }
  @media (min-width: 540px){
    .pair-section + .pair-section{
      margin-top: 80px;
    }
  }
  .pair-section img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pair-section .veil{ display: none; }
  .pair-section .text{
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 36px;
    z-index: 2;
  }
  .pair-section .num{
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: rgba(244,242,237,0.7);
    margin-bottom: 16px;
    display: inline-block;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .pair-section h2{
    font-family: var(--jp);
    font-weight: 300;
    font-size: clamp(24px, 7.2vw, 30px);
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin: 0;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
    white-space: nowrap;
  }
  .pair-section .en-sub{
    display: block;
    font-family: var(--en);
    font-weight: 300;
    font-size: 11.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(244,242,237,0.62);
    margin-top: 12px;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .pair-section .body{
    margin-top: 16px;
    font-family: var(--jp);
    font-weight: 300;
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.06em;
    color: rgba(244,242,237,0.86);
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .pair-section .body span{ display:block; }
  .poster-gap{
    height: 1px;
    background: var(--paper);
  }

  /* ===== 4. FEATURED BIKE (dark -> light transition feel) ===== */
  .featured{
    background: var(--paper);
    padding: 140px 0 150px;
  }
  .featured .head{
    display: flex; align-items: center; gap: 12px;
    padding: 0 26px;
    margin-bottom: 50px;
  }
  .featured .visual{
    aspect-ratio: 4 / 5;
    background: #1a1a1a;
    position: relative; overflow:hidden;
    margin: 0;
  }
  .featured .visual::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(120% 80% at 50% 60%, rgba(90,100,115,0.22), transparent 55%),
      linear-gradient(180deg, #0d0d0f 0%, #191919 100%);
  }
  .featured .visual::after{
    content:""; position:absolute; inset:0;
    background: repeating-linear-gradient(98deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 7px);
  }
  .featured .visual .tag{
    position: absolute; left: 22px; bottom: 18px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.14em; color: var(--dim-on-dark);
  }
  .featured .meta{
    padding: 30px 26px 0;
  }
  .featured .meta .brand-line{
    font-family: var(--en);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--dim-on-light);
    text-transform: uppercase;
  }
  .featured .meta h3{
    font-family: var(--jp);
    font-weight: 300;
    font-size: 26px;
    letter-spacing: 0.06em;
    margin: 14px 0 6px;
  }
  .featured .meta .row{
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line-on-light);
    font-size: 13px;
    color: var(--dim-on-light);
    letter-spacing: 0.08em;
  }
  .featured .meta .row .value-n{
    font-family: var(--en);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.04em;
  }
  .featured .link{
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 36px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ink);
    font-family: var(--jp);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.2em;
  }
  .featured .link .arrow{ font-family: var(--en); font-weight: 300; }

  /* ===== 5. INVENTORY NAV (two cards: black / white) ===== */
  .inv{
    background: var(--paper);
    padding: 130px 26px 150px;
  }
  .inv.actions-band{
    padding: 28px 20px 36px;
    margin-top: 0;
    position: relative;
    z-index: 1;
    background: transparent;
  }
  .inv.actions-band .pair2{ align-items: stretch; }
  .inv.actions-band .pair2 a{
    min-height: 170px;
    height: 100%;
    box-shadow: none;
  }
  .inv .head{ display:flex; align-items:center; gap:12px; margin-bottom: 56px; }
  .inv h2{
    font-family: var(--jp);
    font-weight: 200;
    font-size: 30px;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin: 0 0 60px;
    text-wrap: balance;
  }
  .inv .pair2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .inv .pair2 a{
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 230px;
    padding: 22px 20px 22px;
    border-radius: 2px;
    transition: transform .25s ease;
  }
  .inv .pair2 a:active{ transform: translateY(1px); }
  .inv .pair2 .dark-card{
    background: var(--ink);
    color: var(--paper);
  }
  .inv .pair2 .light-card{
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line-on-light);
  }
  .inv .pair2 .num{
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    opacity: 0.6;
  }
  .inv .pair2 .jp{
    font-family: var(--jp);
    font-weight: 300;
    font-size: 22px;
    letter-spacing: 0.18em;
    line-height: 1.5;
  }
  .inv .pair2 .en-line{
    font-family: var(--en);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.45;
    margin-top: 8px;
  }
  .inv .pair2 .hint{
    font-family: var(--jp);
    font-weight: 300;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    opacity: 0.6;
    margin-top: 6px;
  }
  .inv .pair2 .go{
    margin-top: 28px;
    display: flex; align-items: center; justify-content: flex-end;
    font-family: var(--en); font-weight: 300; font-size: 18px;
  }

  /* ===== 5. QUIET CODA (replaces foot-inventory) ===== */
  .coda{
    background: var(--paper);
    color: var(--ink);
    padding: 108px 26px 80px;
    position: relative;
  }
  .coda .rule-top{
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--ink);
    opacity: 0.28;
    margin-bottom: 38px;
  }
  .coda .lead{
    font-family: var(--jp);
    font-weight: 200;
    font-size: clamp(26px, 7vw, 34px);
    letter-spacing: 0.1em;
    line-height: 1.7;
    margin: 0 0 36px;
    text-wrap: balance;
  }
  .coda .body{
    font-family: var(--jp);
    font-weight: 300;
    font-size: 13.5px;
    letter-spacing: 0.14em;
    line-height: 2.1;
    color: var(--dim-on-light);
    max-width: 420px;
    margin: 0;
  }
  .coda .body + .body{ margin-top: 22px; }
  .coda .body span{ display:block; }
  .coda .body span + span{ margin-top: 6px; }
  .coda .philo-link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 56px;
    padding: 4px 0;
    font-family: var(--jp);
    font-weight: 300;
    font-size: 11.5px;
    letter-spacing: 0.2em;
    color: rgba(10,10,10,0.5);
    transition: color .3s ease;
  }
  .coda .philo-link:hover{ color: var(--ink); }
  .coda .philo-link .line{
    display: inline-block;
    width: 18px; height: 1px;
    background: currentColor;
    opacity: 0.5;
  }
  .coda .philo-link .en{
    font-family: var(--en);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.22em;
    opacity: 0.7;
  }

  /* ===== 6. NEWS ===== */
  .news{ background: var(--paper); padding: 48px 26px 24px; }
  .news .head{ display:flex; align-items:center; gap:12px; margin-bottom: 56px; }
  .news .item{
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 18px;
    padding: 26px 0;
    border-top: 1px solid var(--line-on-light);
  }
  .news .item:last-child{ border-bottom: 1px solid var(--line-on-light); }
  .news .date{
    font-family: var(--en);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dim-on-light);
    padding-top: 4px;
  }
  .news .ttl{
    font-family: var(--jp);
    font-weight: 400;
    font-size: 14.5px;
    letter-spacing: 0.05em;
    line-height: 1.7;
  }
  .news .cat{
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--dim-on-light);
    text-transform: uppercase;
    display: block;
    margin-top: 8px;
  }

  /* ===== 6.5 WORLDS — brand bridge cards (mirrors .inv .pair2) ===== */
  .worlds{
    background: var(--paper);
    padding: 32px 26px 56px;
  }
  .worlds .head{
    margin: 0 0 14px;
  }
  .worlds .head .kicker{
    font-family: var(--en);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ink);
    opacity: 0.6;
    margin: 0;
  }
  .worlds .grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .worlds .card{
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 256px;
    padding: 22px 22px 24px;
    border-radius: 2px;
    overflow: hidden;
    background: #1a1a1a;
    color: var(--paper);
    transition: transform .25s ease;
  }
  .worlds .card:active{ transform: translateY(1px); }
  .worlds .card .visual{
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .8s ease, filter .6s ease;
    z-index: 0;
  }
  .worlds .card[data-brand="mv-agusta"] .visual{
    background-image:
      radial-gradient(120% 80% at 30% 30%, rgba(220,40,40,0.18), transparent 60%),
      linear-gradient(160deg, #2a0d0d 0%, #140505 55%, #0a0303 100%);
  }
  .worlds .card[data-brand="royal-enfield"] .visual{
    background-image:
      radial-gradient(110% 80% at 70% 35%, rgba(180,150,90,0.16), transparent 60%),
      linear-gradient(170deg, #1d1a14 0%, #100e0a 55%, #070605 100%);
  }
  .worlds .card .visual picture,
  .worlds .card .visual img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .worlds .card .visual img{
    object-fit: cover;
    object-position: center;
  }
  .worlds .card .visual::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.35) 35%,
      rgba(0,0,0,0) 65%
    );
    pointer-events: none;
  }
  .worlds .card .body{
    position: relative;
    z-index: 2;
  }
  .worlds .card .name{
    font-family: var(--en);
    font-weight: 300;
    font-size: 26px;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .worlds .card .by{
    display: block;
    margin-top: 8px;
    font-family: var(--en);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(244,242,237,0.55);
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .worlds .card .enter{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-family: var(--en);
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: rgba(244,242,237,0.7);
    transition: gap .3s ease, color .3s ease;
    text-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
  }
  .worlds .card .enter .arrow{
    font-family: var(--en);
    font-size: 11px;
    letter-spacing: 0;
    opacity: 0.85;
  }
  @media (hover: hover){
    .worlds .card:hover .visual{
      transform: scale(1.03);
    }
    .worlds .card:hover .enter{
      color: var(--paper);
      gap: 10px;
    }
  }

  /* ===== Nav drawer (page-specific overrides on top of header.css) ===== */
  .drawer{
    z-index: 50;
    transition: transform .6s cubic-bezier(.6,.02,.2,1);
    display: flex; flex-direction: column;
  }
  .drawer .close{ font-family: var(--en); font-size: 14px; letter-spacing: 0.2em; opacity: 0.65; transition: opacity .25s ease; }
  .drawer .close:hover{ opacity: 0.9; }
  .drawer nav a{
    font-family: var(--jp); font-weight: 300;
    font-size: 26px; letter-spacing: 0.12em;
  }
  .drawer nav a .n{
    display:inline-block; width: 34px;
    font-family: var(--mono); font-size: 11px;
    color: var(--dim-on-dark); letter-spacing: 0.16em;
    transform: translateY(-6px);
  }
  .drawer .foot{
    margin-top: auto;
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.2em; color: var(--dim-on-dark);
  }

  /* tiny scroll reveal */
  .reveal{ opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; }
  .reveal.in{ opacity:1; transform: none; }

  /* Quiet blur reveal for poster-section text — no translate */
  .pair-section .text{
    opacity: 0;
    filter: blur(8px);
    transition: opacity 1s ease, filter 1s ease;
    will-change: opacity, filter;
  }
  .pair-section .text.is-visible{
    opacity: 1;
    filter: blur(0);
  }

  /* ============================================================
     ===== DESKTOP (>=768px) — quiet, spacious, photo-first =====
     Mobile design above is preserved as-is.
     Footer 用 PC ルールはここには含めず、footer.css の @media に
     集約している (全ページ共有のため)。
     ============================================================ */
  @media (min-width: 768px){

    :root{
      --pc-max: 1200px;
      --pc-hero-max: 1320px;
      --pc-gutter: clamp(64px, 6vw, 96px);
      --pc-hero-pad: 40px;
    }

    body{
      font-size: 16px;
      line-height: 1.9;
      letter-spacing: 0.03em;
    }

    .page{
      max-width: none;
      overflow: visible;
      background: var(--paper);
    }

    /* ---------- Header ---------- */
    .header{
      position: static;
      top: auto;
      left: auto;
      right: auto;
      margin: 0;
      z-index: 5;
    }
    .header .menu-btn{ display: none !important; }
    .header.past-hero .brand{ opacity: 1; pointer-events: auto; }
    .header{
      transition: none;
    }
    .header.is-hidden-scroll{
      opacity: 1;
      pointer-events: auto;
    }
    body{ padding-top: 0; }
    .header .brand img{
      filter: none;
    }

    /* Hide mobile-only fixed dock + drawer on desktop */
    .dock{ display: none; }
    .drawer{ display: none !important; }

    /* ---------- Hero ---------- */
    .hero{
      height: 78vh;
      min-height: 620px;
      max-width: none;
      margin: 0;
      padding: 0 clamp(24px, 4vw, 56px);
      position: relative;
      background: var(--paper);
      overflow: hidden;
    }
    .hero .visual{
      position: absolute;
      inset: 0 clamp(24px, 4vw, 56px);
      z-index: 0;
    }
    .hero .visual img{
      object-position: center center;
    }
    .hero .copy{
      position: absolute;
      z-index: 2;
      left: calc(clamp(24px, 4vw, 56px) + var(--pc-hero-pad) + 7vw);
      bottom: 8%;
      top: auto;
      max-width: 480px;
      margin: 0;
      color: rgba(255,255,255,0.92);
    }
    .hero::after{
      content: "";
      position: absolute;
      left: clamp(24px, 4vw, 56px);
      right: clamp(24px, 4vw, 56px);
      bottom: 0;
      height: 38%;
      background: linear-gradient(
        to top,
        rgba(0,0,0,0.22),
        rgba(0,0,0,0)
      );
      pointer-events: none;
      z-index: 1;
    }
    .hero .copy .sub,
    .hero .copy .philo-link{
      display: block;
      visibility: visible;
      opacity: 1;
    }
    .hero .copy .philo-link{
      display: inline-flex;
      align-self: flex-start;
    }
    .hero .copy h1{
      font-size: clamp(38px, 3.3vw, 49px);
      line-height: 1.6;
      letter-spacing: 0.08em;
      margin: 0 0 22px;
    }
    .hero .copy .sub{
      font-size: 15px;
      letter-spacing: 0.20em;
      font-weight: 400;
      text-shadow:
        0 1px 2px rgba(0,0,0,0.55),
        0 0 10px rgba(0,0,0,0.35);
    }
    .hero .copy .philo-link{
      margin-top: 18px;
      font-size: 12px;
      letter-spacing: 0.30em;
      opacity: 0.95;
      text-shadow:
        0 1px 2px rgba(0,0,0,0.55),
        0 0 10px rgba(0,0,0,0.35);
    }
    .hero .copy .philo-link:hover{ opacity: 1; }
    .hero .copy .philo-link{
      color: rgba(255,255,255,0.98);
      position: relative;
      z-index: 3;
    }

    /* Whole-hero clickable link — PC only */
    .hero{ cursor: pointer; }
    .hero .hero-link{
      display: block;
      position: absolute;
      inset: 0;
      z-index: 4;
      cursor: pointer;
      text-decoration: none;
      background: transparent;
    }
    .hero .copy{ z-index: 3; pointer-events: none; }
    .hero .scroll-hint{ z-index: 3; pointer-events: none; }
    .hero .scroll-hint{
      bottom: 7vh;
      right: calc(clamp(24px, 4vw, 56px) + var(--pc-hero-pad));
      font-size: 11px;
    }

    /* ---------- Actions band ---------- */
    .inv.actions-band{
      padding: 60px var(--pc-gutter) 30px;
    }
    .inv.actions-band .pair2{
      max-width: var(--pc-max);
      margin: 0 auto;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .inv.actions-band .pair2.trio{
      grid-template-columns: 1fr 1fr 1fr;
    }
    .inv.actions-band .pair2 a{
      min-height: 200px;
      padding: 36px 40px;
    }
    .inv .pair2 .jp{ font-size: 24px; letter-spacing: 0.20em; }
    .inv .pair2 .en-line{ font-size: 12px; letter-spacing: 0.28em; margin-top: 12px; }
    .inv .pair2 .go{ font-size: 20px; }

    /* ---------- Poster sections ---------- */
    .pair-section{
      position: relative;
      aspect-ratio: auto;
      min-height: 0;
      width: 100%;
      max-width: var(--pc-max);
      margin: 0 auto;
      padding: 60px var(--pc-gutter);
      background: var(--paper);
      color: var(--ink);
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      align-items: stretch;
      gap: 64px;
      overflow: visible;
    }
    .pair-section + .pair-section{ margin-top: 0; padding-top: 60px; padding-bottom: 60px; }
    .inv.actions-band + .pair-section{ padding-top: 30px; }

    .pair-section{
      grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
      gap: 80px;
    }
    .pair-section:nth-of-type(even of .pair-section){
      grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    }
    .pair-section:nth-of-type(even of .pair-section) img{ grid-column: 1; justify-self: start; }
    .pair-section:nth-of-type(even of .pair-section) .text{
      grid-column: 2;
      padding: 0;
      justify-self: start;
    }
    .pair-section img{
      position: relative;
      inset: auto;
      width: 100%;
      max-width: 560px;
      height: auto;
      aspect-ratio: 4 / 5;
      min-height: 0;
      max-height: none;
      object-fit: cover;
      display: block;
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
    }
    .pair-section .veil{ display: none; }
    .pair-section .text{
      position: relative;
      left: auto; right: auto; bottom: auto;
      grid-column: 2;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0;
      max-width: 480px;
      background: transparent;
      color: var(--ink);
    }
    .pair-section:nth-of-type(even of .pair-section){
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }
    .pair-section:nth-of-type(even of .pair-section) img{ grid-column: 1; justify-self: start; }
    .pair-section:nth-of-type(even of .pair-section) .text{
      grid-column: 2;
      padding: 0;
      justify-self: start;
    }
    .pair-section .text{
      padding: 0;
    }

    .pair-section .num{
      font-size: 11px;
      letter-spacing: 0.28em;
      margin-bottom: 28px;
      color: rgba(10,10,10,0.45);
      text-shadow: none;
    }
    .pair-section h2{
      font-size: clamp(28px, 2.2vw, 36px);
      line-height: 1.7;
      letter-spacing: 0.12em;
      white-space: normal;
      color: var(--ink);
      text-shadow: none;
    }
    .pair-section .en-sub{
      font-size: 11.5px;
      letter-spacing: 0.32em;
      margin-top: 18px;
      color: rgba(10,10,10,0.45);
      text-shadow: none;
    }
    .pair-section .body{
      margin-top: 32px;
      font-size: 14.5px;
      line-height: 2.25;
      letter-spacing: 0.08em;
      color: rgba(10,10,10,0.7);
      text-shadow: none;
    }

    /* ---------- Coda ---------- */
    .coda{
      padding: 60px var(--pc-gutter) 60px;
      text-align: left;
    }
    .coda > *{
      max-width: var(--pc-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: 64px;
    }
    .coda .lead{
      font-size: clamp(30px, 2.4vw, 38px);
      line-height: 1.95;
      letter-spacing: 0.14em;
      margin-bottom: 48px;
    }
    .coda .body{
      font-size: 14.5px;
      line-height: 2.3;
      letter-spacing: 0.14em;
      max-width: 540px;
    }
    .coda .philo-link{
      margin-top: 72px;
      font-size: 12px;
      margin-left: 64px;
      padding-left: 0;
    }

    /* ---------- News ---------- */
    .news{
      padding: 60px var(--pc-gutter) 60px;
    }
    .news > .item,
    .news > .head{
      max-width: var(--pc-max);
      margin-left: auto;
      margin-right: auto;
    }
    .news .item{
      grid-template-columns: 110px 1fr 160px;
      gap: 40px;
      padding: 32px 0;
    }
    .news .date{ font-size: 12px; letter-spacing: 0.18em; }
    .news .ttl{ font-size: 16px; letter-spacing: 0.06em; line-height: 1.9; }
    .news .cat{ margin-top: 0; align-self: start; text-align: right; }

    /* ---------- Worlds ---------- */
    .worlds{
      padding: 60px var(--pc-gutter) 60px;
    }
    .worlds .head,
    .worlds .grid{
      max-width: var(--pc-max);
      margin-left: auto;
      margin-right: auto;
    }
    .worlds .head{ margin-bottom: 28px; }
    .worlds .head .kicker{ font-size: 12.5px; letter-spacing: 0.18em; }
    .worlds .grid{
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .worlds .card{
      min-height: 340px;
      padding: 40px 44px;
    }
    .worlds .card .name{ font-size: 32px; letter-spacing: 0.06em; }
    .worlds .card .by{ font-size: 12px; letter-spacing: 0.14em; margin-top: 12px; }
    .worlds .card .enter{ font-size: 12px; letter-spacing: 0.18em; margin-top: 28px; }

    /* footer rules — moved to footer.css */
  }