/* Audio MotorSports Blog Book, v2 (Oct 28 fix brief): cement pages, ink type, blue as accent only (links, year numerals,
   thin rules, outline pills, arrow hover), gold only on the cover seal and the "likely" chips. No red, no blue panels,
   no halftones. Photos are never filtered or cropped: natural aspect (width:100%; height:auto) in paper mats.
   Video thumbnails may cover their box. Loaded only on /sema-show/, /es/sema-show/ and their two blog posts.
   Tokens live on .bb (the page's <main>) so the site header and footer keep their own variables. */
html { overflow-x: clip; }
body.page-blog-book { --cement: #E9E4DE; /* PLACEHOLDER pending Zack: keep it this one variable */ background: var(--cement); }
.bb {
  --cement-2: #DED7CD;
  --paper: #F5F2ED;
  --line: #CDC4B8;
  --ink: #1E1B18;
  --ink-2: #4F473F;
  --bar: #151311;
  --blue: #1878B8;
  --blue-deep: #125E92;
  --gold: #FFC43F;
  --max: 1200px;
  --gut: clamp(16px, 4vw, 32px);
  --shadow: 0 14px 26px -16px rgba(30, 27, 24, .6);
  --head: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Rail edge = the text column's left edge from the page edge. */
  --edge: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  container-type: inline-size;
  font-family: var(--body);
  color: var(--ink);
}
/* 100cqw is main's own width, so a desktop scrollbar doesn't push the rails past the column. */
@supports (width: 1cqw) { .bb { --edge: max(var(--gut), calc((100cqw - var(--max)) / 2 + var(--gut))); } }
body.page-blog-book main.bb { background: var(--cement); color: var(--ink); padding-bottom: 0; }
.bb *, .bb *::before, .bb *::after { box-sizing: border-box; }
.bb .bb-inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.bb .bb-sec { padding-block: 40px; }
.bb .bb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb .bb-inner a { color: var(--blue-deep); }
.bb a:focus-visible, .bb button:focus-visible, .bb summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* The site header's Book button: ink on this page (no red). */
.page-blog-book .btn-book, .page-blog-book .btn-book:hover, .page-blog-book .btn-book:focus-visible { background: #1E1B18; border-color: #1E1B18; color: #F5F2ED; }

/* Blog Book bar */
.bb .bb-bar { background: var(--bar); color: var(--paper); }
.bb .bb-bar__in { display: flex; align-items: center; gap: 18px; max-width: var(--max); margin-inline: auto; padding: 10px var(--gut); overflow-x: auto; scrollbar-width: none; }
.bb .bb-bar__in::-webkit-scrollbar { display: none; }
.bb .bb-bar__mark { flex: 0 0 auto; font-family: var(--head); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.bb .bb-bar ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bb .bb-bar li { flex: 0 0 auto; }
.bb .bb-bar a { display: block; padding: 6px 10px; color: var(--paper); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.bb .bb-bar a:hover { border-bottom-color: var(--blue); }

/* Cover: the white Hummer photo, uncropped, on a dark frame; gold seal top-right. */
.bb .cover { padding-block: 28px 36px; }
.bb .cover__mast { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--blue); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.bb .cover h1 { margin: 0; max-width: none; color: var(--ink); font-family: var(--head); font-weight: 400; line-height: .95; text-transform: uppercase; letter-spacing: 0; }
.bb .cover__big { display: block; font-size: clamp(44px, 9vw, 104px); }
.bb .cover__who { display: inline-block; margin-top: 8px; font-family: var(--body); font-weight: 800; font-size: clamp(14px, 2vw, 18px); letter-spacing: .1em; }
.bb .cover__years { display: inline-block; margin: 8px 0 0 12px; font-size: clamp(22px, 3.4vw, 34px); color: var(--blue); }
.bb .cover__sep { font-size: 0; }
.bb .cover__strip { margin: 12px 0 22px; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.bb .cover__frame { position: relative; margin: 0; background: var(--bar); padding: clamp(8px, 1.6vw, 16px); box-shadow: var(--shadow); }
.bb .cover__frame img { display: block; width: 100%; height: auto; max-height: min(78vh, 720px); object-fit: contain; }
.bb .seal { position: absolute; top: -12px; right: -4px; z-index: 2; display: grid; place-content: center; width: clamp(84px, 13vw, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--gold); color: var(--ink); text-align: center; font-family: var(--head); line-height: .95; text-transform: uppercase; transform: rotate(-8deg); box-shadow: inset 0 0 0 5px var(--gold), inset 0 0 0 7px var(--ink), var(--shadow); }
@media (min-width: 900px) { .bb .seal { top: -22px; right: -18px; } }
.bb .seal span { font-size: clamp(12px, 1.6vw, 17px); letter-spacing: .1em; }
.bb .seal b { font-weight: 400; font-size: clamp(32px, 5vw, 54px); }

/* Opening: matted photo, the quote, year pills */
.bb .opening { padding-block: 24px 48px; }
.bb .opening__grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .bb .opening__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; } }
.bb .opening__text { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.bb .opening__text p { margin: 0 0 12px; }
.bb .bb-quote { margin: 0 0 18px; padding: 0 0 0 16px; border-left: 3px solid var(--blue); }
.bb .bb-quote p { margin: 0; font-family: var(--head); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; color: var(--ink); text-transform: uppercase; }
.bb .bb-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.bb .bb-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.bb .bb-pills a { display: inline-block; padding: 5px 13px; border: 1.5px solid var(--blue); border-radius: 999px; color: var(--blue-deep); font-weight: 600; font-size: 14px; text-decoration: none; }
.bb .bb-pills a:hover { background: var(--paper); }

/* Mats: natural-aspect photos, caption inside the mat */
.bb .bb-mat { margin: 0 0 18px; break-inside: avoid; background: var(--paper); padding: 10px 10px 0; box-shadow: var(--shadow); }
.bb .bb-mat img { display: block; width: 100%; height: auto; }
.bb .bb-mat figcaption { padding: 9px 2px 11px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.bb .bb-mat--white { margin: 0; background: #FFFFFF; }
.bb .bb-mat--white figcaption { min-height: 38px; padding: 10px 2px; }
.bb .bb-mat--tilt { margin-inline: 6px; transform: rotate(-2.2deg); }
.bb .bb-photos { columns: 3 300px; column-gap: 18px; margin: 0 0 12px; }

/* Year headings: big blue numeral, chapter title, one-line dek */
.bb .bb-chapter { padding-block: 36px 24px; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.bb .yh { margin: 0 0 22px; }
.bb .yh h2 { margin: 0; max-width: none; display: flex; flex-direction: column; color: var(--ink); font-family: var(--head); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: .9; }
.bb .yh-year { font-size: clamp(68px, 12vw, 150px); color: var(--blue); }
.bb .yh-title { margin-top: 6px; font-size: clamp(24px, 3.6vw, 42px); line-height: 1.05; }
.bb .yh-dek { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--ink-2); }

/* Rails: full-bleed track, first card on the text column, the next one peeking at the screen edge */
.bb .rail { margin: 26px 0 8px; }
.bb .rail__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.bb .rail__head h3 { margin: 0; font-family: var(--head); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.bb .rail__count { flex: 0 0 auto; padding: 2px 9px; border: 1.5px solid var(--blue); border-radius: 999px; color: var(--blue-deep); font-weight: 600; font-size: 13px; white-space: nowrap; }
.bb .rail__nav { display: none; margin-left: auto; gap: 8px; }
.bb .rail__btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.bb .rail__btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.bb .rail__btn:disabled { opacity: .3; cursor: default; }
@media (min-width: 900px) and (hover: hover) { .bb .rail.is-overflow .rail__nav { display: flex; } }
.bb .r-track { display: flex; gap: 16px; margin: 0 calc(-1 * var(--edge)); padding: 6px var(--edge) 26px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); overscroll-behavior-x: contain; scrollbar-width: thin; }
.bb .r-item { flex: 0 0 auto; width: min(85vw, 560px); scroll-snap-align: start; }
.bb .rail--short .r-item { width: min(60vw, 260px); }
.bb .r-cap { margin: 10px 2px 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }

/* Click-to-load YouTube: 16:9 for long videos, 9:16 for Shorts */
.bb .lite { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bar); box-shadow: var(--shadow); }
.bb .lite--short { aspect-ratio: 9 / 16; }
.bb .lite__btn { position: absolute; inset: 0; display: block; }
.bb .lite__btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb .lite__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(21, 19, 17, .78); box-shadow: 0 0 0 2px rgba(245, 242, 237, .9); transition: background .15s ease; }
.bb .lite__play::after { content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #F5F2ED; }
.bb .lite__btn:hover .lite__play { background: var(--ink); box-shadow: 0 0 0 2px var(--blue); }
.bb .lite__chip { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 7px; border-radius: 3px; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 11px; letter-spacing: .06em; pointer-events: none; }
.bb .lite iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.bb .lite.is-playing .lite__btn, .bb .lite.is-playing .lite__chip { visibility: hidden; }

/* v3: our SEMA 2019 exhibit (Project 553): a big 16:9 player, never cut off, and three video frames shown whole */
.bb .bb-exhibit__player { max-width: 1100px; }
.bb .bb-exhibit__player .lite__play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.bb .bb-exhibit__player .lite__play::after { left: 30px; top: 23px; border-width: 15px 0 15px 23px; }
.bb .bb-exhibit__cap { max-width: 860px; margin: 18px 0 22px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.bb .bb-exhibit__photos { display: grid; gap: 18px; max-width: 1100px; }
@media (min-width: 900px) { .bb .bb-exhibit__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bb .bb-exhibit__photo { margin: 0; background: var(--paper); padding: 8px; box-shadow: var(--shadow); }
.bb .bb-exhibit__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }

/* Shop panel, FAQ, CTA */
.bb .bb-ride h2, .bb .bb-faq h2, .bb .bb-cta h2 { margin: 0 0 10px; max-width: none; color: var(--ink); font-family: var(--head); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1; }
.bb .bb-ride { border-top: 1px solid var(--line); padding-top: 36px; }
.bb .bb-ride p { max-width: 760px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.bb .bb-faq details { max-width: 860px; border-top: 1px solid var(--line); }
.bb .bb-faq details:last-child { border-bottom: 1px solid var(--line); }
.bb .bb-faq summary { cursor: pointer; padding: 14px 2px; font-weight: 600; font-size: 17px; color: var(--ink); }
.bb .bb-faq details p { margin: 0; padding: 0 2px 16px; line-height: 1.55; color: var(--ink-2); }
.bb .bb-cta { background: var(--cement-2); text-align: center; }
.bb .bb-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 6px 0 16px; }
.bb .bb-btn, .bb .bb-inner a.bb-btn { display: inline-block; min-width: 150px; padding: 13px 22px; border: 2px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 17px; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.bb .bb-btn--line, .bb .bb-inner a.bb-btn--line { background: transparent; color: var(--ink); }
.bb .bb-cta address { font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* Blog post extras (the two Blog Book posts) */
.bb.bb-post-extras { margin: 18px 0; background: transparent; }
.bb.bb-post-extras .bb-photos { margin-top: 18px; columns: 3 200px; }
.bb .bb-feature { max-width: 900px; }

@media (prefers-reduced-motion: reduce) {
  .bb .r-track { scroll-behavior: auto; }
  .bb .lite__play { transition: none; }
}