@import url('./owner-share.css');

/* Full-length, verbatim interviews composed with OwnerInterviewPreview.
   The approved template is the layout; no old article stylesheet is loaded. */
.owner-interview-site { --owner-paper:#fff; --owner-soft:#f3f3f3; --owner-ink:#171718; --owner-muted:#63605d; --owner-line:#cbc7bf; --owner-accent:#a52d36; }
.owner-interview-page a { text-decoration: none; }
.owner-interview-page picture { display: block; }
.owner-interview-page .owner-interview-cover::after { content: ''; position: absolute; inset: clamp(14px,1.8vw,28px); border: 1px solid #ffffff40; pointer-events: none; }
.owner-interview-cover__copy > div { color: #ddd; font-size: 9px; }
.owner-interview-cover__copy > p { font-size: 9px; }
.owner-cover-video { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.owner-cover-video.is-ready { opacity: 1; }
.owner-cover-toggle { position: absolute; top: 40px; right: 40px; min-height: 44px; padding: 10px 15px; border: 1px solid #ffffff70; color: #fff; background: #0006; font-size: 11px; }
.owner-interview-cover__copy h1 { font-size: clamp(44px,4.8vw,68px); }
.owner-interview-intro { width:min(1180px,calc(100% - 120px)); }
.owner-interview-intro > h2 span { max-width:100%; white-space:normal; }
.owner-interview-intro > p:not(.owner-interview-kicker) { font-size: 16px; line-height: 2.05; }
.owner-interview-page .owner-interview-film { padding: 0; min-height: 0; border: 0; max-width: 1160px; }
.owner-interview-page .owner-interview-film::after { display: none; }
.owner-interview-film__copy h2 > span { display: block; }
.owner-interview-film__copy .owner-film-credit { font-size: 10px; margin-top: 12px; color: #ccc; }
.owner-interview-film__copy .owner-film-description { font-size: 13px; }
.owner-interview-film__copy .mag-film-play { width: fit-content; min-height: 46px; border: 1px solid #ffffff90; background: transparent; color: #fff; padding: 12px 18px; margin-top: 20px; font-size: 12px; }
.owner-interview-film__copy .mag-film-play:hover { background: #fff; color: #111; }
.owner-interview-film .mag-film-player { position: absolute; inset: 0; z-index: 5; background: #000; }
.owner-interview-film .mag-film-player iframe { width: 100%; height: 100%; border: 0; }
.owner-interview-film.is-playing .mag-film-copy { visibility: hidden; }
.owner-interview-film__copy { max-width: 780px; }
.owner-interview-film__copy h2 { font-size: clamp(32px,3.8vw,52px); }
.owner-contents { padding: 22px max(60px,calc((100% - 1160px)/2)); border-block: 1px solid var(--owner-line); margin-bottom: 100px; }
.owner-contents > p { margin: 0 0 12px; color: var(--owner-accent); font: 600 9px Montserrat,sans-serif; letter-spacing: .14em; }
.owner-contents__links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px 28px; }
.owner-contents__links a { padding: 12px 0; min-height: 44px; font-size: 12px; border-bottom: 1px solid var(--owner-line); }
.owner-contents__links a span { color: var(--owner-accent); margin-right: 10px; }
.owner-contents__links a b { font-weight: 500; }
.owner-contents__links a:hover { color: var(--owner-accent); }
.owner-chapter__heading .owner-chapter__label { font: 600 9px/1.5 Montserrat,sans-serif; text-transform: uppercase; letter-spacing: .16em; color: var(--owner-muted); margin: 18px 0 0; }
.owner-chapter--dark .owner-chapter__heading .owner-chapter__label { color: #bdbab4; }
.owner-chapter__heading h2 { font-size: clamp(30px,3.4vw,44px); line-height: 1.5; text-wrap:pretty; }
.owner-chapter__heading h2 span { max-width:100%; white-space:normal; }
.owner-chapter__opening { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(40px,5vw,72px); }
.owner-chapter__shell > .owner-dialogue { width: min(100%,760px); margin: 64px auto; }
.owner-dialogue { min-width: 0; }
.owner-question { margin-bottom: 22px; }
.owner-question__label { color: var(--owner-accent); font: 600 9px/1.4 Montserrat,sans-serif; letter-spacing: .15em; margin-bottom: 10px; }
.owner-question__text { font-size: 19px; line-height: 1.7; margin: 0; font-weight: 600; }
.owner-answer p,.owner-chapter__body .owner-answer p { font-size: 16px; font-weight: 500; color: #4d4946; line-height: 2.05; margin: 0 0 23px; }
.owner-answer p:last-child { margin-bottom: 0; }
.owner-answer a { border-bottom: 1px solid currentColor; }
.owner-chapter--dark .owner-answer p { color: #d1cec8; }
.owner-chapter--dark .owner-question__label { color: #ef7770; }
.owner-interview-page .owner-chapter__wide-photo { margin-block: 34px; }
.owner-interview-figure > picture { height: 100%; }
.owner-interview-figure img { width: 100%; border-radius: 0; }
.owner-interview-figure figcaption { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1.8; }
.owner-chapter__wide-photo img { max-height: 780px; object-fit: cover; }
.owner-photo-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px; margin: 34px 0; }
.owner-photo-pair img { height: auto; aspect-ratio: 3/2; object-fit: cover; }
.owner-photo-pair:has(> :only-child) { grid-template-columns: 1fr; }
.owner-photo-pair:has(> :only-child) img { max-height: 660px; }
.owner-photo-pair--portraits { align-items: start; }
.owner-photo-pair--portraits img { aspect-ratio: auto; }
.owner-interview-page .owner-reading-note { max-width: 720px; margin-inline: auto; line-height: 2.05; text-wrap: pretty; }
.owner-photo-dialogue { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 60px; margin-block: 60px; }
.owner-photo-dialogue img { height: auto; }
.owner-photo-dialogue .owner-dialogue { padding: 20px 0; }
.owner-custom-layout { margin-block: 46px; align-items: stretch; }
.owner-custom-layout__portrait { height: 100%; }
.owner-custom-layout__portrait img { min-height: 100%; }
.owner-custom-layout__details { grid-template-rows: auto 1fr; }
.owner-custom-layout__details > .owner-detail-note { padding: 32px; }
.owner-detail-note > h3 span { display: block; }
.owner-detail-note > h3 { text-align: center; text-wrap: balance; }
.owner-detail-note > p { text-align: center; }
.owner-detail-note .owner-dialogue { margin-top: 24px; }
.owner-detail-note .owner-question { margin-bottom: 14px; }
.owner-detail-note .owner-question__text { font-size: 15px; }
.owner-detail-note .owner-answer p { font-size: 14px; }
.owner-interview-quote { clear: both; }
.owner-interview-quote p { text-wrap: balance; }
.owner-seat-gallery { align-items: start; margin-block: 40px; }
.owner-seat-gallery img { height: auto; aspect-ratio: 2/3; object-fit: cover; }
.owner-chapter__portrait-photo { max-width: 700px; margin-inline: auto !important; }
.owner-interview-page .owner-chapter__portrait-photo img { height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; }
.owner-chapter--dark .owner-interview-quote { border-color: #424343; }
.owner-record { width: min(1160px,calc(100% - 120px)); margin: 0 auto 120px; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 70px; border-top: 1px solid var(--owner-line); padding-top: 70px; }
/* Owner photographs retain their original framing, with the biography below. */
.owner-profile-card { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; align-items: start; }
.owner-profile-avatar { width: 100%; max-width: 520px; }
.owner-profile-avatar img { width: 100%; height: auto; object-fit: contain; }
.owner-profile-info { max-width: 520px; }
/* Balance the vertical camp portrait with the neighboring vehicle data. */
[data-article="interview-jeep-yohhei"] .owner-profile-avatar { max-width: 360px; }
.owner-profile-name { margin:0; font-size: 30px; line-height: 1.4; }
.owner-profile-name-en { font: 600 10px/1.5 Montserrat,sans-serif; color: var(--owner-accent); margin:8px 0 20px; letter-spacing: .14em; }
.owner-profile-detail { margin:0; font-size: 14px; line-height: 1.9; color: var(--owner-muted); }
.owner-profile-detail + .owner-profile-detail { margin-top:16px; }
.owner-profile-social { margin-top:28px; }
.owner-profile-social ul { margin:0; padding:0; list-style:none; }
.owner-profile-social li { margin:0; padding:0; }
.owner-profile-social li:last-child { border-bottom:1px solid var(--owner-line); }
.owner-profile-social a { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:72px; padding:14px 0; border-top:1px solid var(--owner-line); text-decoration:none; }
.owner-profile-social-icon { display:block; width:24px; height:24px; color:var(--owner-ink); }
.owner-profile-social a:hover .owner-profile-social-platform { color:var(--owner-accent); text-decoration:underline; text-underline-offset:4px; }
.owner-profile-social a:focus-visible { outline:2px solid var(--owner-accent); outline-offset:4px; }
.owner-profile-social-platform { display:block; font-size:14px; font-weight:700; line-height:1.5; }
.owner-profile-social-purpose { margin-left:10px; color:var(--owner-muted); font-size:11px; font-weight:500; }
.owner-profile-social-account { display:block; margin-top:4px; color:var(--owner-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.owner-profile-social-arrow { color:var(--owner-accent); font-size:20px; }
.owner-record-data-title { margin: 0 0 22px; font-size: 23px; }
.owner-record-data dl { margin:0; }
.owner-record-data-row { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 18px; border-top: 1px solid var(--owner-line); padding: 15px 0; font-size: 13px; line-height: 1.9; }
.owner-record-data-row dt,.owner-record-data-row dd { margin:0; }
.owner-record-data-label { color: var(--owner-muted); }
.owner-record-data-val { overflow-wrap: anywhere; }
.owner-anchor { display: block; width: 0; height: 0; }
.owner-related { padding: 90px max(60px,calc((100% - 1160px)/2)); background: var(--owner-soft); }
.owner-related .sec-h2 { margin: 0 0 36px; font-size: 36px; }
.owner-related .slash { color: var(--owner-accent); }
.owner-related .related-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
.owner-related .related-card { min-width: 0; display: block; }
.owner-related .related-card-img img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.owner-related .related-card-body { padding-block: 18px; }
.owner-related .related-card-cat { font: 600 9px/1.5 Montserrat,var(--sans); letter-spacing: .06em; color: var(--owner-accent); }
.owner-related .related-card-title { font-size: 18px; line-height: 1.65; margin-top: 12px; }
.owner-cta { padding: 100px max(60px,calc((100% - 1100px)/2)); background: #111214; color: #fff; }
.owner-cta .cta-title { font-size: clamp(30px,4vw,52px); font-weight: 600; line-height: 1.5; }
.owner-cta .cta-desc { margin-top: 24px; font-size: 15px; color: #ccc; }
.owner-cta .cta-btn { display: inline-block; padding: 14px 0; border-bottom: 1px solid #ccc; font-size: 13px; }
@media (max-width:1100px) {
  .owner-interview-intro { width:calc(100% - 72px); }
  .owner-contents { padding-inline: 36px; }
  .owner-record { width: calc(100% - 72px); gap: 36px; }
  .owner-related { padding-inline: 36px; }
  .owner-related .related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .owner-chapter__opening { grid-template-columns: 1fr; gap: 32px; }
  .owner-chapter__body { width: 100%; max-width: none; }
  .owner-record { grid-template-columns: 1fr; }
  .owner-custom-layout { grid-template-columns: 1fr 1fr; }
  .owner-detail-note .owner-answer p { font-size: 14px; }
}
@media (max-width:760px) {
  .owner-interview-intro { width:auto; margin-inline:20px; }
  .owner-interview-page .owner-interview-cover::after { inset: 12px; }
  .owner-interview-cover__copy { left: 24px; right: 24px; }
  .owner-interview-cover__copy h1 { font-size: clamp(30px,8.7vw,38px); }
  .owner-interview-cover__copy > p { font-size: 8px; }
  .owner-interview-cover__copy > div { font-size: 8px; line-height: 1.8; }
  .owner-cover-toggle { top: 24px; right: 24px; font-size: 10px; }
  .owner-interview-intro > p:not(.owner-interview-kicker) { font-size: 15px; }
  .owner-interview-film__copy h2 { font-size: 28px; }
  .owner-interview-film__copy { left: 22px; right: 22px; bottom: 24px; }
  .owner-interview-film__copy .owner-film-description { font-size: 11px; }
  .owner-interview-film__copy .owner-film-credit { font-size: 9px; }
  .owner-contents { padding: 20px; margin-bottom: 74px; }
  .owner-contents__links { grid-template-columns: 1fr; gap: 0; }
  .owner-contents__links a { max-width: none; white-space: normal; font-size: 12px; }
  .owner-chapter__heading h2 { font-size: 30px; }
  .owner-chapter__shell > .owner-dialogue { margin-block: 40px; }
  .owner-question__text { font-size: 18px; }
  .owner-answer p,.owner-chapter__body .owner-answer p { font-size: 15px; line-height: 2; }
  .owner-interview-figure figcaption { font-size: 11px; }
  .owner-interview-page .owner-chapter__wide-photo { margin-block: 28px; }
  .owner-photo-pair { grid-template-columns: 1fr; gap: 14px; margin-block: 28px; }
  .owner-photo-pair img { aspect-ratio: auto; max-height: none; object-fit: contain; }
  .owner-photo-dialogue { grid-template-columns: 1fr; gap: 24px; margin-block: 40px; }
  .owner-custom-layout { grid-template-columns: 1fr; }
  .owner-custom-layout__portrait img { height: auto; min-height: 0; }
  .owner-custom-layout__details { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; }
  .owner-custom-layout__details > .owner-detail-note { grid-column: 1/-1; padding: 30px 22px; }
  .owner-record { width: auto; margin: 0 20px 80px; padding-top: 50px; gap: 42px; }
  .owner-profile-name { font-size: 25px; }
  .owner-profile-detail { font-size: 13px; }
  .owner-record-data-row { grid-template-columns: 90px minmax(0,1fr); gap: 15px; font-size: 12px; }
  .owner-related { padding: 65px 20px; }
  .owner-related .sec-h2 { font-size: 30px; }
  .owner-related .related-grid { grid-template-columns: 1fr; gap: 30px; }
  .owner-related .related-card { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 18px; }
  .owner-related .related-card-body { padding: 0; }
  .owner-related .related-card-title { font-size: 15px; margin-top: 8px; }
  .owner-related .related-card-img img { aspect-ratio: 1; }
  .owner-cta { padding: 76px 20px; }
  .owner-cta .cta-desc { font-size: 14px; }
}