/* Odd John: A+ campaign artwork in the existing Haidoroya site. */
body.odd-john { max-width: 1120px; --accent: #675562; --line: #d9cfd4; }
.odd-john .lang-bar { max-width: none; }
.odd-john h2 { letter-spacing: .06em; font-size: clamp(21px,2.5vw,28px); line-height: 1.65; }
.odd-john h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.7; }
.odd-john img { display: block; max-width: 100%; height: auto; }
.oj-head { margin: 44px auto 40px; }
.oj-series,.oj-kicker { font-size: 13px; color: var(--accent); letter-spacing: .12em; }
.oj-head h1 { font-size: clamp(34px,6vw,52px); letter-spacing: .12em; }
.oj-subtitle { margin: 6px 0 16px; font-family: var(--serif); font-size: 17px; }
.oj-head .intro { margin-top: 26px; }
.oj-jump { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 26px; font-size: 14px; }
.odd-john main .oj-hero { margin-top: 0; border: 0; padding: 0; }
.oj-hero>img,.oj-banner { width: 100%; }
.oj-prose { max-width: 740px; margin: 30px auto 0; }
.oj-prose p { margin: 16px 0; }
.oj-trio { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 28px; }
.oj-trio h3 { margin: 16px 0 8px; }
.oj-trio p { margin: 0; font-size: 16px; }
.oj-banner { margin-top: 28px; }
.oj-kicker { margin: 0 0 4px; }
.oj-note { font-size: 14px; color: #62545e; }
.oj-spec { margin: 26px 0; font-size: 15px; }
.oj-spec>div { display: grid; grid-template-columns: 8.5em minmax(0,1fr); gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.oj-spec dt { color: #62545e; }.oj-spec dd { margin: 0; overflow-wrap: anywhere; }
.oj-buy { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.oj-buy a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px; background: #675562; border: 1px solid #675562; color: white; text-decoration: none; font-size: 14px; line-height: 1.6; }
.oj-buy a:hover { background: #50414c; }
.oj-buy a:nth-child(2) { background: transparent; color: #594651; }
.oj-buy a:nth-child(2):hover { background: #eee7eb; }
.odd-john a:focus-visible { outline: 3px solid #996b3d; outline-offset: 5px; }
.oj-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; margin-top: 38px; }
.oj-choice article { display: flex; flex-direction: column; align-items: flex-start; border-top: 2px solid #675562; padding-top: 28px; }
.oj-choice img { width: 150px; align-self: center; }
.oj-choice h3 { margin: 24px 0 0; }.oj-choice p { font-size: 16px; }
.oj-choice .oj-buy { margin-top: auto; padding-top: 18px; }
.odd-john [id] { scroll-margin-top: 24px; }
@media (max-width: 700px) {
  .oj-trio,.oj-choice { grid-template-columns: 1fr; gap: 36px; }
  .oj-head { margin-top: 28px; }.oj-head .intro { font-size: 16px; }
  .oj-prose { margin-top: 24px; }.oj-prose p { font-size: 16px; }
  .oj-trio img { width: 100%; }.oj-trio p { font-size: 16px; }
  .oj-spec>div { grid-template-columns: 1fr; gap: 3px; }
  .oj-buy { flex-direction: column; width: 100%; }
  .oj-buy a { width: 100%; }.oj-choice p { margin: 12px 0; }
}