.gibson-story-page { background:#0b0b0b; color:#eee; }
.story-main { overflow:hidden; background:#0b0b0b; }
.history-switch { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,270px)); width:min(560px,calc(100% - 38px)); margin:24px auto; border:1px solid rgba(255,255,255,.18); background:#101010; }
.history-switch a { display:flex; flex-direction:column; gap:5px; padding:16px 20px; color:#aaa; text-decoration:none; }
.history-switch a+a { border-left:1px solid rgba(255,255,255,.15); }
.history-switch span { color:#c8aa6e; font-size:.72rem; letter-spacing:.22em; }
.history-switch strong { color:#ddd; font-size:.9rem; font-weight:500; letter-spacing:.04em; }
.history-switch small { color:#777; font-size:.67rem; }
.history-switch .is-current { background:rgba(200,170,110,.11); }
.history-switch .is-current strong { color:#fff; }
.story-hero { background:#000; }
.story-hero-image { width:100%; height:min(72svh,760px); background:#000; }
.story-hero-image>img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.story-closing>img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.story-hero-copy { width:min(1040px,calc(100% - 48px)); margin:0 auto; padding:68px 0 76px; }
.story-kicker,.story-label { margin:0 0 17px; color:#c8aa6e; font-size:.84rem; letter-spacing:.28em; font-weight:600; }
.story-hero h1 { max-width:850px; margin:0 0 24px; font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(2.3rem,5vw,5rem); line-height:1.28; letter-spacing:.01em; }
.story-hero-copy>p:last-child { margin:0; color:#d0d0d0; font-size:clamp(.92rem,1.5vw,1.08rem); line-height:2; }
.story-scroll { position:absolute; z-index:2; right:28px; bottom:54px; color:#bbb; font-size:.66rem; letter-spacing:.25em; writing-mode:vertical-rl; }
.story-scroll:after { content:""; display:block; width:1px; height:46px; margin:12px auto 0; background:#c8aa6e; }
.story-section { width:min(1040px,calc(100% - 48px)); margin:0 auto; padding:112px 0; }
.story-intro { max-width:760px; text-align:center; }
.story-intro h2,.story-heading h2,.story-closing h2 { margin:0 0 32px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.8rem,3.5vw,3rem); line-height:1.45; font-weight:400; }
.story-intro>p:not(.story-label),.story-heading>p:last-child { color:#bcbcbc; line-height:2.15; }
.story-intro>p:not(.story-label) { margin:0 0 20px; text-align:left; }
.story-timeline,.model-section,.era-section { border-top:1px solid #242424; }
.story-heading { margin-bottom:54px; }
.timeline-list { border-top:1px solid #292929; }
.timeline-item { display:grid; grid-template-columns:190px 1fr; gap:50px; padding:45px 0; border-bottom:1px solid #292929; }
.timeline-year { margin:0; color:#c8aa6e; font-family:Georgia,'Times New Roman',serif; font-size:1.4rem; letter-spacing:.08em; }
.timeline-item h3 { margin:0 0 15px; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif; font-size:1.2rem; font-weight:400; letter-spacing:.04em; line-height:1.7; }
.timeline-item div p { margin:0 0 18px; max-width:720px; color:#aaa; line-height:2.05; }
.timeline-item div p:last-child { margin-bottom:0; }
.model-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:#292929; border:1px solid #292929; }
.model-card { position:relative; display:block; min-height:300px; padding:43px; background:#111; color:inherit; text-decoration:none; }
.model-card-featured { background:linear-gradient(145deg,#251f15,#111 68%); }
.model-number { margin:0 0 45px; color:#777; font-family:Georgia,'Times New Roman',serif; }
.model-card h3 { margin:0; color:#eee; font-family:Georgia,'Times New Roman',serif; font-size:2rem; font-weight:400; }
.model-sub { margin:8px 0 25px; color:#c8aa6e; font-size:.78rem; letter-spacing:.22em; }
.model-card>p:last-child { margin:0; color:#aaa; line-height:1.9; }
.era-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.era-grid article { border-top:1px solid #6f5b34; padding-top:24px; }
.era-grid span { color:#6d6d6d; font-family:Georgia,'Times New Roman',serif; }
.era-grid h3 { margin:35px 0 14px; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif; font-weight:400; letter-spacing:.03em; }
.era-grid p { margin:0; color:#aaa; line-height:1.9; }
.story-final-text { max-width:760px; }
.story-final-text p { margin:0 0 22px; color:#aaa; line-height:2.1; }
.story-closing { position:relative; min-height:720px; display:flex; align-items:center; background:#000; }
.story-closing-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.2) 100%); }
.story-closing-copy { position:relative; z-index:1; width:min(1040px,calc(100% - 48px)); margin:0 auto; }
.story-closing-copy>p:not(.story-label) { max-width:610px; margin:0 0 35px; color:#ccc; line-height:2; }
.story-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border:1px solid #c8aa6e; color:#f2e5ca; text-decoration:none; font-size:.82rem; letter-spacing:.08em; transition:.25s; }
.story-button:hover { background:#c8aa6e; color:#111; }
.story-back { display:block; width:max-content; margin:48px auto 80px; }
.story-mobile-break { display:none; }
@media(max-width:700px) {
  .history-switch { width:calc(100% - 24px); margin:14px auto 22px; }
  .history-switch a { padding:12px 11px; }
  .history-switch strong { font-size:.8rem; }
  .history-switch small { display:none; }
  .story-hero-image { height:auto; aspect-ratio:893/911; }
  .story-hero-copy { width:calc(100% - 38px); padding:42px 0 50px; }
  .story-hero h1 { font-size:1.95rem; line-height:1.48; }
  .story-scroll { display:none; }
  .story-mobile-break { display:block; }
  .story-section { width:calc(100% - 38px); padding:78px 0; }
  .story-intro { text-align:left; }
  .timeline-item { grid-template-columns:1fr; gap:18px; padding:34px 0; }
  .timeline-year { font-size:1.1rem; }
  .model-grid { grid-template-columns:1fr; }
  .model-card { min-height:0; padding:34px 28px; }
  .model-number { margin-bottom:32px; }
  .era-grid { grid-template-columns:1fr; gap:42px; }
  .era-grid h3 { margin-top:24px; }
  .story-closing { min-height:690px; align-items:flex-end; }
  .story-closing-shade { background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.9) 73%,#0b0b0b); }
  .story-closing-copy { width:calc(100% - 38px); padding:0 0 64px; }
  .story-closing h2 { font-size:2rem; }
  .story-closing-copy>p:not(.story-label) br { display:none; }
  .story-button { width:100%; box-sizing:border-box; }
  .story-back { margin:42px auto 64px; }
}
@media(prefers-reduced-motion:reduce) { .story-button { transition:none; } }

/* Mobile Japanese heading reflow: avoid orphaned 1–2 character lines. */
.story-hero h1,.story-intro h2,.story-heading h2,.story-closing h2,.timeline-item h3,.model-card h3,.era-grid h3{
  line-break:strict;word-break:normal;overflow-wrap:normal;text-wrap:balance;
}
.history-hub-title span,.tone-balanced-title span{display:block;}
@media(max-width:700px){
  .story-intro h2,.story-heading h2{font-size:clamp(1.5rem,6.45vw,1.78rem);line-height:1.6;}
  .timeline-item h3{font-size:1.08rem;line-height:1.75;}
  .history-hub-title{font-size:clamp(2rem,9.3vw,2.8rem)!important;line-height:1.48!important;}
  .history-hub-title span{text-wrap:balance;}
  .tone-balanced-title{font-size:clamp(1.48rem,6.2vw,1.72rem)!important;line-height:1.65!important;}
  .tone-balanced-title span{text-wrap:balance;}
}

/* Semantic heading lines: intentional phrase-based wrapping. */
.semantic-title span{display:block;}
@media(max-width:700px){.semantic-title span{text-wrap:balance;max-width:100%}.semantic-title{font-size:clamp(1.6rem,7.4vw,2.08rem)!important;line-height:1.5!important}}

/* 2026-08-23 mobile containment fix: prevent intentional nowrap headings from widening timeline rows. */
.timeline-item > div{min-width:0}
.semantic-title{max-width:100%;min-width:0}
@media(max-width:700px){
  .timeline-item{grid-template-columns:minmax(0,1fr)}
  .timeline-item > div,.timeline-item div p{max-width:100%}
  .story-hero h1,.story-intro h2,.story-heading h2,.story-closing h2,.timeline-item h2,.timeline-item h3,.model-card h3,.era-grid h3{max-width:100%;overflow-wrap:anywhere}
  .semantic-title,.semantic-title span{max-width:100%}
}