/*
Theme Name: Bentley Publishers
Description: Functional-equivalence port of the legacy bentleypublishers.com design. Markup and CSS ported from pubs-proto-r0-v024 (app) and product pages r0 v026. Banner per BANNER-SPEC (genuine jpeg 234x60, band #00529b). Do not restyle the banner here — banner.py is the single source of truth.
Version: 1.0.0
Author: Claude Fable 5 for Bentley Publishers
Text Domain: bentleypubs
*/

/* v010 — v009 + Miko's style notes: flush left/ragged right (no centered text), alphabetical
   marques w/ Automotive Reference last, left nav restored on full screens, date ranges not
   year lists, no self-promoting copy foregrounded (Road & Track speaks instead), title/author
   spacing fixed, color-wiring-diagrams badge (air-cooled VW books). */
:root{--blue:#00529b;--ink:#1a1a1c;--mut:#7c828a;--line:#e6e8eb;--ghost:#dfe5ec}
*{box-sizing:border-box}
body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;margin:0;background:#fff;color:var(--ink)}
a{text-decoration:none;color:var(--blue)}
.page{max-width:980px;margin:0 auto;padding:0 22px}
/* ---------- brand ---------- */
.mastband{background:#00529b}
.masthead{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:70px;gap:8px;min-width:0}
.masthead img.lg{display:block;width:234px;height:60px;max-width:100%;height:auto}
.masthead .brand{min-width:0;flex:0 1 auto}
.mast-right{flex:0 0 auto}
@media(max-width:400px){.masthead img.lg{width:170px}
  .mast-right a.carticon{padding-left:44px;background-size:34px 22px}}
.mast-right a{color:#fff !important;font-size:14px;font-weight:600}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.bmark{display:flex;align-items:center;gap:3px}
.bmark .br{width:8px;height:34px;border:3px solid var(--blue);border-radius:0}
.bmark .br.l{border-right:none}
.bmark .br.r{border-left:none}
.bmark .sq{width:34px;height:34px;background:var(--blue);color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center}
.wordmark{line-height:1.05}
.wordmark .nm{font-size:19px;font-weight:800;letter-spacing:-.2px}
.wordmark .nm sup{font-size:9px;font-weight:400}
.wordmark .tag{font-size:11.5px;color:var(--mut);letter-spacing:.02em;margin-top:2px}
.mast-right{display:flex;align-items:center;gap:16px}
.mast-right a{font-size:14px;color:var(--ink);padding:10px 0 10px 10px}
.mast-right a b{color:var(--blue)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
/* ---------- brand row ---------- */
.marques{display:flex;flex-wrap:wrap;gap:0 4px;padding:8px 0;font-size:14px}
.marques a{padding:10px 9px;color:var(--ink)}
.marques a:hover{color:var(--blue)}
.marques .sep{color:var(--line);padding:10px 0}
/* ---------- hero ---------- */
.hero{position:relative;padding:34px 0 30px;overflow:hidden}
.ghost{position:absolute;inset:0;pointer-events:none;opacity:.55}
.hero-inner{position:relative;display:grid;grid-template-columns:1fr;gap:26px}
.hero-copy h1{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.4px;margin:0 0 10px}
.hero-copy p{font-size:16px;line-height:1.5;color:#3c4046;max-width:34em;margin:0 0 16px}
.hero-copy .go{display:inline-block;background:var(--blue);color:#fff;font-size:15px;font-weight:600;padding:11px 18px;border-radius:2px}
.shelf{display:flex;align-items:flex-end;gap:26px;justify-content:center;padding:8px 0 2px}
.shelf a{display:block;text-align:left}
.shelf img{display:block;box-shadow:0 14px 30px rgba(10,40,80,.25), 0 2px 6px rgba(10,40,80,.12)}
.shelf .s1 img{width:150px}.shelf .s2 img{width:190px}.shelf .s3 img{width:150px}
.shelf .cap{font-size:12.5px;color:var(--mut);margin-top:10px}
/* ---------- featured grid ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:10px;padding:16px 0 6px}
.lrow{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.lrow img{width:92px;height:auto;align-self:flex-start;box-shadow:0 3px 8px rgba(10,40,80,.18)}
.lrow .lt{font-family:Verdana,Geneva,Arial,sans-serif;font-size:14px;font-weight:700;line-height:1.35;color:#00529b;display:block;margin-bottom:4px}
.lrow .lm{font-size:13px;color:#3c4046;line-height:1.4}
.lrow .lcart{margin-top:6px;text-decoration:none} /* Miko 2026-07-19: add-to-cart lozenge on every listing row — pill style inherited from .cartbtn */
.pcard{display:block;color:var(--ink);text-align:left}
.pcard img{width:72%;max-width:210px;box-shadow:0 10px 22px rgba(10,40,80,.22);transition:transform .15s}
.pcard:hover img{transform:translateY(-3px)}
.pcard .t{font-size:15px;font-weight:650;line-height:1.3;margin:14px 0 6px;max-width:24em}
.pcard .a{font-size:12.5px;color:var(--mut);display:block;margin:0 0 3px}
.pcard .pr{font-size:12.5px;color:var(--mut)}
/* ---------- quick searches (demoted, low on page) ---------- */
.quick{padding:26px 0 8px;border-top:1px solid var(--line);margin-top:30px}
.quick .lbl{font-size:13px;color:var(--mut);margin-bottom:2px}
.quick a{display:inline-block;font-size:14px;padding:9px 12px 9px 0;color:var(--blue)}
.searchrow{display:flex;gap:8px;max-width:380px;margin-top:8px}
.searchrow input{flex:1;font-size:14px;padding:8px 11px;border:1px solid #cfd4da;border-radius:2px;min-width:0}
.searchrow button{font-size:14px;padding:8px 13px;border:0;border-radius:2px;background:var(--blue);color:#fff}
.results{padding:6px 0}
.results a{display:block;font-size:14.5px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.results .pr{color:var(--mut);font-size:12.5px}
/* ---------- reinforcing copy + wiring-diagram badge (low on page by design) ---------- */
.lowline{font-size:13.5px;color:var(--mut);max-width:44em;padding:18px 0 0;line-height:1.5}
.wire{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:2px;padding:12px 14px;margin:18px 0 0;max-width:520px}
.wire svg{flex:none}
.wire .wt{font-size:13.5px;line-height:1.45;color:#2c2f33}
.wire .wt a{font-weight:600}
/* ---------- running footer (wiki-style strip) ---------- */
.runfoot{border-top:1px solid var(--line);margin-top:34px;padding:16px 0 8px;font-size:13.5px;color:var(--mut)}
.runfoot a{color:var(--blue);padding:8px 12px 8px 0;display:inline-block}
.colophon{font-size:12px;color:var(--mut);padding:4px 0 26px}
.colophon a{color:var(--mut)}
/* ---------- product page ---------- */
.cbar{background:#eeeeee;border-bottom:1px solid #d5d5d5}
.cbar .in{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:27px;padding:2px 0}
.crumb{font-family:Verdana,Geneva,Arial,sans-serif;font-size:11px;color:#111}
.crumb a{color:#00529b;text-decoration:none}
.crumb .sep{color:#b5b5b5;padding:0 8px;font-size:12px}
.cbar form{display:flex;gap:6px}
.cbar input{font-size:13px;padding:6px 9px;border:1px solid #c6c6c6;border-radius:2px;width:180px;min-width:0}
@media(max-width:520px){.cbar .in{flex-wrap:wrap}.cbar form{flex:1 1 100%;min-width:0}
  .cbar input{width:auto;flex:1 1 auto;min-width:0}}
.cbar button{font-size:13px;padding:6px 10px;border:1px solid #c6c6c6;background:#fff;border-radius:2px}
.prod{position:relative;display:grid;grid-template-columns:1fr;gap:30px;padding:24px 0 10px}
.prod .stage{position:relative;text-align:center;padding:26px 10px}
.prod .stage img{width:74%;max-width:225px;box-shadow:0 18px 40px rgba(10,40,80,.28), 0 3px 8px rgba(10,40,80,.12)} /* Miko 2026-07-19: slightly smaller cover to match legacy */
/* spacing QC: title, subtitle, author must never crowd (permanent check) */
.pinfo h1{font-size:24px;line-height:1.25;font-weight:800;letter-spacing:-.3px;margin:0 0 10px}
.pinfo .sub{font-size:16.5px;color:#3c4046;line-height:1.45;margin:0 0 10px}
.pinfo .auth{font-size:14px;color:var(--mut);margin:0 0 20px}
.spec{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 18px}
.spec td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{color:var(--mut);width:32%}
.spec .isbn{font-weight:700;letter-spacing:.02em}
.buy{display:flex;align-items:center;gap:16px;margin:2px 0 20px}
.buy button{background:var(--blue);color:#fff;font-size:15.5px;font-weight:600;border:0;border-radius:2px;padding:12px 22px}
.buy .pr{font-size:15px;color:#3c4046}
.buy .code{font-size:12px;color:var(--mut)}
.desc{font-size:15px;line-height:1.6;color:#2c2f33;max-width:44em}
.desc h3{font-size:15px;margin:18px 0 6px}
.vids{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.vids .lbl{font-size:15px;font-weight:700;margin-bottom:6px}
.vids a{display:block;font-size:14.5px;padding:9px 0}
.vids .dur{color:var(--mut);font-size:12.5px}
.stagecap{font-size:11.5px;color:var(--mut);margin-top:8px}
.plinks{list-style:none;margin:16px auto 0;padding:0;max-width:300px;text-align:left}
.plinks li{border-bottom:1px solid var(--line)}
.plinks a{display:block;font-size:13.5px;padding:8px 2px;color:var(--blue)}
.also{border-top:1px solid var(--line);margin-top:26px;padding-top:14px}
.also .lbl,.assoc .lbl{font-size:15px;font-weight:700;margin-bottom:10px}
.alsorow{display:flex;gap:22px;flex-wrap:wrap}
.alsorow a{width:110px;font-size:12.5px;line-height:1.35;color:var(--blue)}
.alsorow img{width:100%;height:auto;display:block;margin-bottom:6px;box-shadow:0 3px 8px rgba(10,40,80,.18)}
.assoc{margin-top:22px}
.assoc p{font-size:13.5px;color:#3c4046;margin:0 0 6px}
.assoc ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7}
.comment{font-size:13px;margin:26px 0 0}
.secbar{background:#00529b;color:#fff;font-family:Verdana,Geneva,Arial,sans-serif;font-size:12px;font-weight:700;padding:4px 8px;margin:18px 0 10px}
.secbar.gray{background:#dddddd;color:#000}
.morerow{font-size:13px;padding:2px 0 8px}
.morerow a{padding-right:16px}
.vidrows a{display:block;font-size:14px;padding:8px 0}
.ytpara{font-size:13.5px;line-height:1.55;color:#2c2f33;max-width:44em}
.narrow{width:100%;font-size:14px;padding:9px 11px;border:1px solid #c6c6c6;border-radius:2px;margin:2px 0 6px}
/* ============================================================
   TECHNICAL VIDEOS  (fixed 2026-07-13, Miko reported)
   ============================================================
   THE BUG: front-page.php emitted .vidgrid / .vidcard / .vidthumb / .vidplay /
   .vidcap — and NOT ONE of them existed in this stylesheet. Five classes, zero
   rules. So the browser did the only thing it could: laid out bare 320px
   thumbnails as inline images with the captions flowing around them like text
   around a magazine photo. The markup was correct. The markup was never LOOKED AT.

   Same failure family as the favicon: every programmatic check passed. The HTML
   validated, the classes were spelled right, the images loaded 200. Only a human
   eye on the actual page caught it — and it was Miko's eye, not mine.
   → QC RULE (added to QC-PREFLIGHT): a class written into a template is not
     styled until a rule for it exists. Grep the stylesheet for every class the
     template emits. This is a mechanical check and it is now part of preflight.
   ============================================================ */
.secbar-r{float:right;font-weight:400;font-size:13px}
.secbar-r a{color:#fff;text-decoration:none}
.secbar-r a:hover{text-decoration:underline}

.vidgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:14px 0 4px}
.vidcard{display:block;text-decoration:none;color:inherit}
.vidthumb{position:relative;display:block;line-height:0}
.vidthumb img{width:100%;max-width:none;height:auto;display:block;border:1px solid #d9d9d9;background:#eee}
.vidcard:hover .vidthumb img{border-color:var(--blue)}
/* the play badge: a real button-looking thing, centred on the still */
.vidplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:rgba(10,40,80,.78);
  color:#fff;font-size:17px;line-height:46px;text-align:center;
  padding-left:3px;box-sizing:border-box;transition:background .12s}
.vidcard:hover .vidplay{background:var(--blue)}
.vidcap{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--blue)}
.vidcard:hover .vidcap{text-decoration:underline}
@media (max-width:760px){.vidgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.vidgrid{grid-template-columns:1fr}}
/* ============================================================
   THE TECH LIBRARY  (/tech/, 2026-07-13)
   ============================================================
   ⚠️ EVERY CLASS BELOW EXISTS BECAUSE tech.php EMITS IT. That sentence is here
   because THIS MORNING the Technical Videos section shipped with five classes and
   zero rules, and the browser laid the whole thing out as flowing text. The class
   list in the template and the rule list in this file are ONE THING. Check them
   against each other. It is a mechanical check and it is now in QC-PREFLIGHT.
   ============================================================ */
.techcrumb{font-size:12.5px;color:var(--mut);margin:2px 0 12px}
.techcrumb a{color:var(--blue);text-decoration:none}
.techcrumb a:hover{text-decoration:underline}
.techcrumb .sep{margin:0 7px;color:#b8b8b8}
.techlede{font-size:14px;line-height:1.55;color:#2c2f33;max-width:52em;margin:10px 0 16px}
.techcount{display:inline-block;margin-left:8px;font-size:12.5px;color:var(--mut)}

/* Warnings & Cautions — safety content, given the prominence it earns */
.techsafety{display:flex;flex-direction:column;gap:2px;padding:12px 15px;margin:0 0 16px;
  border:1px solid #d9b38c;border-left:5px solid #c8791a;background:#fdf6ec;
  text-decoration:none;border-radius:2px}
.techsafety:hover{background:#faeeda;border-color:#c8791a}
.techsafety-t{font-size:15px;font-weight:700;color:#8a4b06}
/* Miko, 2026-07-13: "That should be black or maybe even red. It should be in bold."
   It is the sentence that tells a person not to get hurt. It gets weight. */
.techsafety-m{font-size:13px;color:#a11212;font-weight:700}
/* And the page's own bar is RED, not blue — it is not a marque, it is a warning. */
.secbar-red{background:#a11212 !important}
.techbody.safety h1,.techbody.safety h2,.techbody.safety h3,.techbody.safety h4{color:#a11212}
.techbody.safety{max-width:54em}

/* level 1 — the marques */
.techgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
/* Miko 2026-07-20: /tech/ home — grouped, full-width vertical brand rows (mirror the left rail) */
.techgroup{margin:0 0 22px}
.techgroup-h{font:700 11px/1.3 Verdana,Geneva,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8a4b06;border-bottom:2px solid #e7d9c9;padding:0 0 5px;margin:6px 0 6px}
.techrows{display:flex;flex-direction:column}
.techrow{display:flex;align-items:center;gap:16px;padding:10px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.techrow:hover{background:#f2f7fc}
.techrow-car{flex:0 0 100px;width:100px;line-height:0}
.techrow-car img{width:100px;height:auto;display:block;border-radius:2px}
.techrow-b{flex:1;display:flex;flex-direction:column;gap:2px}
.techrow-t{font-size:16px;font-weight:700;color:var(--blue);line-height:1.2}
.techrow-m{font-size:12.5px;color:var(--mut)}
.techrow-go{flex:0 0 auto;color:var(--blue);font-size:22px;opacity:.45}
.techrow:hover .techrow-go{opacity:1}
/* Miko 2026-07-20: tech video posters — large block at bottom of product page + small panel thumbs */
.techvids{margin-top:26px}
.techvids .lbl{font-size:15px;font-weight:700;margin-bottom:8px}
.tvthumbs{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px}
.tvthumb{position:relative;flex:0 0 auto;width:64px;height:36px;line-height:0;border:1px solid #d9d9d9;overflow:hidden;display:block;background:#eee}
.tvthumb img{width:64px;height:36px;object-fit:cover;display:block}
.tvthumb .tvplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:11px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.tvthumb:hover{border-color:var(--blue)}
/* Miko 2026-07-20: featured technical videos strip on /tech/ home */
.techfeat{margin:4px 0 22px}
.techfeat-h{font:700 11px/1.3 Verdana,Geneva,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8a4b06;border-bottom:2px solid #e7d9c9;padding:0 0 5px;margin:0 0 10px}
.techfeat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.techfeat-v{text-decoration:none;color:inherit}
.techfeat-i{position:relative;display:block;line-height:0;border:1px solid #d9d9d9;background:#eee}
.techfeat-i img{width:100%;height:auto;display:block}
.techfeat-i .vplay{position:absolute;left:50%;top:50%;width:42px;height:30px;transform:translate(-50%,-50%);background:rgba(0,41,102,.82);border-radius:7px}
.techfeat-i .vplay:after{content:'';position:absolute;left:16px;top:8px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff}
.techfeat-v:hover .vplay{background:#c8102e}
.techfeat-t{display:block;font-size:12.5px;line-height:1.35;color:var(--blue);margin-top:5px}
@media(max-width:640px){.techfeat-row{grid-template-columns:1fr 1fr}}
.techtile{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border:1px solid var(--line);
  background:#fbfcfd;text-decoration:none;border-radius:2px;transition:border-color .12s,background .12s}
.techtile:hover{border-color:var(--blue);background:#f2f7fc}
.techtile-t{font-size:15px;font-weight:700;color:var(--blue);line-height:1.25}
.techtile-m{font-size:12.5px;color:var(--mut)}
.techcodes{font-size:11.5px;color:#8b9199;margin-top:3px;letter-spacing:.02em}
/* the car profile picture. Absent by default — no placeholder art, ever. */
.techcar{display:block;line-height:0;margin:-3px 0 6px}
.techcar img{width:100%;max-width:none;height:auto;display:block;border-radius:2px}
.techcar.sm{flex:0 0 auto;width:96px;margin:0}
.techcar.sm img{width:96px}

/* level 2 — the platforms */
.techplats{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:20px}
.techplat{display:flex;align-items:flex-start;gap:14px;padding:12px 14px;background:#fff;text-decoration:none}
.techplat:hover{background:#f2f7fc}
.techplat-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.techplat-t{font-size:14.5px;font-weight:700;color:var(--blue);line-height:1.3}
.techplat-m{font-size:12.5px;color:var(--mut)}

/* the chassis chip — the thing an owner actually recognises */
.chassis{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-block;padding:1px 7px;border:1px solid #c9d6e4;border-radius:9px;
  background:#eef4fa;color:#2c5c8f;font-size:11.5px;font-weight:700;letter-spacing:.03em}
.chassis.big{margin:2px 0 14px}
.chassis.big .chip{font-size:12.5px;padding:2px 9px}

/* levels 3 & 4 — articles and bodies */
.techarts{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.techart{display:block;padding:10px 13px;background:#fff;text-decoration:none;color:var(--blue);font-size:14px;line-height:1.35}
.techart:hover{background:#f2f7fc;text-decoration:underline}
.techbody{font-size:14px;line-height:1.6;color:#2c2f33;max-width:54em}
.techbody h1,.techbody h2,.techbody h3{font-size:15.5px;margin:18px 0 7px;color:#1b1d20}
.techbody p{margin:0 0 11px}
.techbody img{max-width:100%;height:auto;border:1px solid var(--line);margin:8px 0}
.techbody table{border-collapse:collapse;margin:10px 0;font-size:13.5px}
.techbody td,.techbody th{border:1px solid var(--line);padding:5px 9px;text-align:left}
.techbody th{background:#f3f6f9}
/* Miko: "Make it a small light grey box: DISCLAIMER." */
.techdisclaimer{margin:26px 0 8px;padding:10px 13px;background:#f4f5f6;border:1px solid #e2e4e6;border-radius:2px;max-width:54em}
.techdisclaimer .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;color:#7a8087;margin-bottom:4px}
.techdisclaimer p{margin:0;font-size:11.5px;line-height:1.5;color:#7a8087}
.techback{margin-top:22px;font-size:13.5px}
.prodside .arow .at{font-size:12.5px;line-height:1.35;color:var(--blue)}

@media (max-width:900px){.techgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.techgrid{grid-template-columns:1fr 1fr}.techcar.sm{display:none}}
/* ---------- admin (black, internal only) ---------- */
.admin{background:#111;color:#ddd;min-height:60vh;padding:30px 0}
.admin .page{max-width:760px}
.admin h1{color:#fff;font-size:20px}
.admin p{font-size:14px;line-height:1.55;color:#bbb;max-width:44em}
.admin code{color:#8fc1f7}
.admin a{color:#8fc1f7}
/* ---------- phone: keep the cover trio inside the viewport ---------- */
@media(max-width:759px){
  .shelf{gap:12px}
  .shelf .s1 img,.shelf .s3 img{width:24vw}
  .shelf .s2 img{width:32vw}
  .hero-copy h1{font-size:25px}
}
/* ---------- left nav (full screens — standing requirement) ---------- */
.rail{display:none}
/* GPXS masterwork feature — legacy home port */
.gfeat{display:grid;grid-template-columns:1fr;gap:20px;padding:6px 0 10px}
.gthumbs{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.gthumbs a{width:31%}
.gthumbs{margin-top:14px}
.gthumbs img{width:100%;height:auto;display:block;border:1px solid #d9d9d9;cursor:pointer;transition:outline-color .12s}
/* Hover affordance for the gallery-swap thumbnails (2026-07-24). */
.gthumbs a:hover img{outline:2px solid #00529b;outline-offset:-1px;border-color:#00529b}
.gleft img[data-lg]{transition:opacity .12s}
.gleft > a > img{width:100%;height:auto;display:block}
.gcap{font-size:12.5px;padding:6px 0}
.gt{font-family:inherit;display:block;font-size:20px;font-weight:700;color:#000;line-height:1.2}
.ga{font-size:13.5px;color:var(--blue);margin:4px 0 10px}
.gbib{font-size:13px;line-height:1.55;color:#222;margin:0 0 12px}
.gcart{background:var(--blue);color:#fff;font-size:14px;font-weight:600;border:0;border-radius:3px;padding:9px 18px}
.gdesc{font-size:13.5px;line-height:1.55;color:#2c2f33;margin-top:14px}
.gdesc ul{margin:6px 0;padding-left:20px}
@media(min-width:760px){.gfeat{grid-template-columns:7fr 5fr}}
/* focus feature (home) + legacy-parallel bib block */
.focus{position:relative;display:grid;grid-template-columns:1fr;gap:22px;padding:26px 0 24px;align-items:center}
.focus .spread{width:100%;height:auto;display:block}
.focus-copy .ft{display:block;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.focus-copy .fs{font-size:16px;color:#3c4046;line-height:1.4;margin:8px 0 4px}
.focus-copy .fa{font-size:14px;color:var(--mut);margin:0 0 12px}
.fq{font-size:15.5px;line-height:1.5;color:#2c2f33;border-left:3px solid var(--blue);padding:2px 0 2px 12px;margin:12px 0}
.fq .who{display:block;font-size:12.5px;color:var(--mut);margin-top:5px}
.bib{font-size:14px;line-height:1.3;color:#2c2f33;margin:0 0 8px} /* Miko 2026-07-19: tighter bib block to match legacy density */
.bib div{padding:4px 0;border-bottom:1px solid var(--line)}
.pages3{display:flex;gap:12px;margin-top:20px}
.pages3 img{width:32%;height:auto;border:1px solid var(--line);box-shadow:0 4px 12px rgba(10,40,80,.14)}
/* ---------- desktop ---------- */
@media(min-width:760px){
  .hero-inner{grid-template-columns:5fr 6fr;align-items:center}
  .focus{grid-template-columns:7fr 5fr}
  .grid{grid-template-columns:1fr 1fr;gap:8px 30px}
  .prod{grid-template-columns:5fr 6fr;align-items:start}
  body{background:#dddddd}
  .frame{background:#fff;max-width:960px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh}
}
/* ⚠️ THE LEFT RAIL FROM 640px UP (client, 2026-09-18 20:35: "we want to be very iPad friendly in either
   orientation. 640px is probably a good idea"). It was 1000px, which hid the rail on every iPad held
   upright (768–834 CSS px) and showed the marque row instead. Below 640px the marque row stands in. */
@media(min-width:640px){
  .marques{display:none}
  .cols{display:grid;grid-template-columns:168px minmax(0,1fr)}
  .rail{display:block;border-right:1px solid var(--line);padding:22px 18px 22px 22px}
  .rail{font-family:Verdana,Geneva,Arial,sans-serif}
  .rail a{display:block;font-family:Verdana,Geneva,Arial,sans-serif;font-size:12px;color:#00529b;padding:3px 5px;border-bottom:none}
  .rbox{border:1px solid #c9cdd2;margin:0 0 12px;padding:4px 10px;background:#fff}
  .rsearch input{width:100%;font-size:14px;padding:8px 10px;border:1px solid #c6c6c6;border-radius:4px;margin:0 0 12px;background:#fff}
  .rquote{border:1px solid #c9cdd2;margin:0;padding:10px;font-size:12.5px;line-height:1.5;color:#333}
  .rquote span{display:block;text-align:right;font-weight:700;margin-top:6px}
  .rail a:hover{color:var(--blue)}
  
  .cols .page{max-width:812px;margin:0;padding:0 26px}
}
/* --- product-page gallery (r0 v026) --- */
.gal{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.gal a{width:23%}
.gal img{width:100%;border:1px solid #d9d9d9}
/* --- WP port shims (r1 v001): WooCommerce notice + admin bar --- */
.woocommerce-message,.woocommerce-info{border-top:3px solid #00529b;background:#f7f9fb;padding:12px 16px;margin:12px 0;font-size:14px}
/* No success-check icon on status messages — Miko finds the green check circle distracting and
   off-design (2026-07-15). Kill the WooCommerce ::before glyph and reclaim its space. */
.woocommerce-message::before,.woocommerce-info::before{content:none!important;display:none!important}
/* "Undo" in a status message is a gray-pill button matching Update Cart, on its OWN line and
   left-aligned at the message's content edge, so its left lines up with the Update Cart pill below
   (which is nudged right to meet it — see the update_cart rule). (Miko 2026-07-15) */
.woocommerce-message .restore-item,.woocommerce-info .restore-item{
  display:block;width:-moz-fit-content;width:fit-content;margin:8px 0 0;
  background:#e8e8e8;color:#222!important;border:1px solid #b8b8b8;
  border-radius:13px;font-size:12px;font-weight:700;padding:4px 14px;
  text-decoration:none!important;cursor:pointer}
.woocommerce-message .restore-item:hover,.woocommerce-info .restore-item:hover{background:#ddd}
/* --- STYLE-GUIDE-VISUAL 2026-07-12 (Miko P69): information hierarchy --- */
/* Author outranks price. Price is quiet: 14px regular, bib voice. Never bold. */
.prod .auth{font-size:14px;color:#1a1a1c}
.buy .pr{font-size:14px;color:#222;font-weight:400}
.buy .pr b{font-size:14px;font-weight:400}
/* Buttons are brand blue everywhere — WooCommerce purple is a defect. */
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.wc-proceed-to-checkout a.checkout-button, .woocommerce #respond input#submit{
  background:#00529b !important;color:#fff !important;border:0;border-radius:3px;font-weight:600}
.woocommerce button.button:hover, .woocommerce a.button:hover{background:#003f78 !important}
/* --- Legacy column shadow: the GENUINE bg-960-shadow.gif (1050x1, measured
   repeat-y 50% 0 on the live site 2026-07-12). Never recreate with box-shadow. --- */
@media(min-width:760px){
  body{background:#dddddd url(/wp-content/uploads/legacy/assets1.bentleypublishers.com/images/bg-960-shadow.gif) repeat-y 50% 0}
  .frame{border-left:0;border-right:0}
}
/* --- Handcrafted pages (Miko P70): main + sidebar, legacy gray-headed boxes --- */
.prodwrap{display:grid;grid-template-columns:1fr;gap:24px}
/* A grid child defaults to min-width:auto, so a wide table (the tech library has
   plenty) pushes the column open and blows the sidebar off the page. min-width:0
   is the fix. Found by the class-vs-rule sweep, not by looking — which is the
   point of having the sweep. */
.prodmain{min-width:0}
@media(min-width:900px){.prodwrap{grid-template-columns:minmax(0,1fr) 252px}}
.prodside .sbox{border:1px solid #c9cdd2;background:#fff;margin:20px 0}
.prodside .sbox h3{margin:0;background:#dddddd;color:#000;font-family:Verdana,Geneva,Arial,sans-serif;font-size:12px;font-weight:700;padding:5px 10px;border-bottom:1px solid #c9cdd2}
.prodside .sbody{padding:10px 12px;font-size:13px;line-height:1.5;color:#2c2f33}
.prodside .aphoto{float:left;width:64px;height:auto;margin:2px 10px 6px 0;border:1px solid #d9d9d9}
/* the tech panel rows — Miko: technical before marketing */
.prodside .trow{padding:8px 0;border-bottom:1px solid #f0f0f0}
.prodside .trow:last-child{border-bottom:0}
.prodside .trow > a{display:block;font-size:12.5px;line-height:1.35;color:var(--blue);margin-bottom:4px}
.prodside .trow .chassis{margin:2px 0}
.prodside .trow .tmeta{display:block;font-size:11.5px;color:var(--mut);margin-top:3px}
.prodside .arow{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #f0f0f0}
.prodside .arow:last-child{border-bottom:0}
.prodside .arow img{width:44px;height:auto;border:1px solid #d9d9d9;flex:none}
.prodside .arow a{font-size:13px;line-height:1.4}
/* --- Chrome dark-canvas guard: force light scheme so the surround is legacy gray --- */
html{color-scheme:light;background:#dddddd}
/* --- THE CART BUTTON (Miko P71): genuine in-house icon /images/cart.w.gif (28x18),
   measured legacy anatomy: 130x25 pill, icon at 9px 50%, text offset 37px,
   Verdana 11px bold white. Recreated as CSS pill + genuine gif. --- */
.cartbtn, .buy button, a.gcart{
  display:inline-block;background:#00529b url(/wp-content/uploads/legacy/assets1.bentleypublishers.com/images/cart.w.gif) no-repeat 9px 50%;
  color:#fff !important;font-family:Verdana,Geneva,Arial,sans-serif;font-size:11px;font-weight:700;
  border:0;border-radius:13px;height:26px;line-height:26px;padding:0 16px 0 44px;cursor:pointer}
.cartbtn:hover, .buy button:hover, a.gcart:hover{background-color:#003f78}
/* ⚠️ LEGACY CONTENT IS FIXED-WIDTH AND THE PHONE IS NOT (2026-08-05).
   Migrated product and article bodies carry hand-built tables and 250px images from the old
   site — .imgColumn / .imgBox250 and friends — which held a 485px floor and scrolled every
   product page sideways on a 320px handset. Images scale; a table that genuinely cannot shrink
   scrolls INSIDE its own box instead of taking the page with it. */
.techbody img,.entry-content img,.prodmain img,.woocommerce-product-details__short-description img{max-width:100%;height:auto}
.techbody table,.entry-content table,.prodmain table{max-width:100%}
.techbody .imgBox250,.prodmain .imgBox250{max-width:100%}
@media(max-width:640px){
  .techbody table,.entry-content table,.prodmain table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .techbody td.imgColumn,.prodmain td.imgColumn{max-width:100%}
}

/* masthead cart link carries the icon too */
.mast-right a.carticon{background:url(/wp-content/uploads/legacy/assets1.bentleypublishers.com/images/cart.w.gif) no-repeat 0 50%;padding-left:36px}
/* --- gray pill (legacy secondary: apply / Continue Shopping / update) --- */
.graybtn, .woocommerce button[name="apply_coupon"], .woocommerce button[name="update_cart"]{
  display:inline-block;background:#e8e8e8 !important;color:#222 !important;border:1px solid #b8b8b8 !important;
  border-radius:13px;font-size:12px;font-weight:700;padding:5px 18px;cursor:pointer}
.graybtn:hover{background:#ddd !important}
.bp-continue{margin:0 0 12px}
/* --- Woo cart page in the legacy panel language --- */
.woocommerce table.shop_table{border:1px solid #c9cdd2;border-radius:0;border-collapse:collapse;font-size:13px}
.woocommerce table.shop_table th{background:#dddddd;font-family:Verdana,Geneva,Arial,sans-serif;font-size:12px;font-weight:700;color:#000;padding:6px 10px}
.woocommerce table.shop_table td{border-top:1px solid #f0f0f0;padding:8px 10px}
.cart_totals h2{font-family:Verdana,Geneva,Arial,sans-serif;font-size:14px}
.bp-payments{max-width:320px}
.bp-payments ul{margin:6px 0;padding-left:18px}
/* --- featured-image hover-swap + gray tabs bar (Miko P72, legacy GPXS anatomy) --- */
#bpstage{max-width:96%;height:auto;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.fthumbs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 4px 4px;justify-content:flex-start}
.fthumbs img{width:72px;height:auto;border:1px solid #d9d9d9;cursor:pointer;background:#fff}
.fthumbs img:hover{border-color:#00529b}
/* ⚠️ SPECIFICITY: .prod .stage img (line 105) sets width:74%;max-width:225px and OUTRANKS
   .fthumbs img, so on an ordinary product page the thumbnails rendered at 184px — the same
   size as the picture they are meant to be thumbnails OF. The handcrafted pages never hit
   this because .prod.hc .fthumbs img already carries the extra class. Same escape, for the
   pages that are not handcrafted. */
.prod .stage .fthumbs img{width:72px;max-width:72px;box-shadow:none}
.prod .stage .fthumbs{justify-content:center}
.tabsbar{background:#eeeeee;border:1px solid #e0e0e0;padding:7px 12px;margin:18px 0 14px;font-size:14px}
.tabsbar a{padding-right:22px}
.desc-wide{max-width:38em} /* Miko 2026-07-19: readable measure for plain-text descriptions (reverses P83 full-width) */
.desc-wide:has(table){max-width:614px} /* Miko 2026-07-19: rich 2-column descriptions (text | inset photos) use legacy table width so the graphics keep their size */
.desc table img{max-width:250px;height:auto} /* Miko 2026-07-19: inset graphics keep legacy ~250px instead of being squeezed to the column width; works for both 2- and 3-cell legacy tables (P905, B315, etc.) */
.desc table td{vertical-align:top;padding-right:14px} /* legacy top-aligned columns with a small gutter */
/* --- Handcrafted page refinements (Miko P75 screenshots, deployed GPXS as spec) --- */
.prod.hc{grid-template-columns:1fr}
@media(min-width:700px){.prod.hc{grid-template-columns:54fr 46fr}}
.prod.hc h1{font-family:Verdana,Geneva,Arial,sans-serif;font-size:22px;font-weight:700;color:#000;line-height:1.25;margin:2px 0 2px} /* ONE title color site-wide (Miko P83): rust; black was unapproved */
.prod.hc .sub2{font-size:14px;font-weight:700;color:#1a1a1c;margin:0 0 10px}
.prod.hc .auth{font-size:14px;color:#1a1a1c;margin:0 0 16px}
.prod.hc .stage{text-align:left;padding:4px 0}
.prod.hc .stage #bpstage{max-width:100%;width:400px;height:auto;box-shadow:none;border:1px solid #eee}
.prod.hc .bib2{font-size:15px;line-height:1.5;color:#111;margin:0 0 16px}
.prod.hc .bib2 div{padding:1px 0;border-bottom:0}
/* ISBN stays bold per guide (Amazon bridge R1.4) even though deployed page shows plain — re-rule in guide if wanted */
.prod.hc .fthumbs{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 6px}
.prod.hc .fthumbs img{width:100px;height:auto;border:1px solid #d9d9d9;cursor:pointer;background:#fff}

/* ============================================================
   ALSO CONSIDER — the cover size bug (Miko 2026-07-13)
   ============================================================
   THE BUG: .arow is a flex row whose children are TWO <a> elements — the one
   wrapping the cover, and the one wrapping the title. The COVER IMAGE was never
   the flex item; the <a> AROUND it was. That <a> shrank to make room for the
   title beside it, and WooCommerce's own `.woocommerce img{max-width:100%}` then
   squeezed the image down inside its shrunken parent.

   RESULT: THE COVER SIZE WAS BEING SET BY THE LENGTH OF THE TITLE NEXT TO IT.
   Measured on B315: 32px / 59px / 59px / 29px — from four source images that are
   ALL 200px wide. Our declared width:64px never won.

   THE FIX: make the <a> WRAPPER the fixed-width, non-shrinking flex item, and
   free the image from max-width:100%. Now every cover is the same size, always.
   REFERENCE: the legacy deployed site renders these at a consistent 50px
   (attr width=50). Miko asked for consistent AND larger — so 72px.
   ============================================================ */
.prodside .arow > a:first-child{flex:0 0 auto;width:72px;line-height:0}
.prodside .arow img{width:72px;max-width:none;height:auto;display:block;border:1px solid #d9d9d9}
.prodside .arow{align-items:flex-start;gap:12px}
/* --- Bib block: plain lines, NO rules between rows (Miko 2026-07-12, imitate the
   deployed product page style). Applies to ALL product pages. --- */
.bib div{border-bottom:0 !important;padding:1px 0} /* Miko 2026-07-19: tighter bib lines to match legacy */
/* --- Cart: bigger thumbnails (especially GPXS-class art), coupon moved toward the
   money and widened (Miko 2026-07-12) --- */
.woocommerce table.shop_table img{width:72px;height:auto}
.woocommerce table.cart td.actions .coupon{float:right;margin-left:auto}
.woocommerce table.cart td.actions .coupon input[name="coupon_code"]{width:240px;padding:6px 10px}
.woocommerce table.cart td.actions button[name="update_cart"]{float:left;margin-left:6px}
/* Quantity STEPPERS (the up/down arrows) stay PERSISTENT — visible at rest, not only on hover — so
   shoppers can see the option exists. WebKit hides the spinner until hover by default. (Miko 2026-07-15) */
.woocommerce-cart-form input[type=number].qty::-webkit-inner-spin-button,
.woocommerce-cart-form input[type=number].qty::-webkit-outer-spin-button{opacity:1;height:auto}
.woocommerce-cart-form input[type=number].qty{padding-right:2px}
/* --- author pages (P78: author material lives on OUR site) --- */
.authorhead{margin:8px 0 22px;max-width:52em}
/* Portrait inset: float it into the bio's first paragraph so text flows around it (2026-07-24). */
/* Author portrait: render at the image's NATIVE size, capped at the 280px design boundary; never upscale (no stretching/squinching). 2026-07-24 */
.authorhead .aportrait{float:left;width:auto;max-width:280px;height:auto;margin:5px 24px 10px 0;border:1px solid #d9d9d9;box-shadow:0 2px 8px rgba(10,40,80,.14);background:#fff;padding:3px}
.authorhead .abio{min-width:0}
.authorhead .abio::after{content:"";display:table;clear:both}
.authorhead .abio p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#1a1a1c}
@media(max-width:560px){.authorhead .aportrait{max-width:150px;margin:3px 16px 8px 0}}
/* author page: main + right Interviews panel (Miko 2026-07-20) */
.authortop{display:block}
.authortop.has-iv{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:26px;align-items:start}
@media(max-width:820px){.authortop.has-iv{grid-template-columns:1fr}}
.ivpanel{border:1px solid #e0e0e0;background:#f7f9fb;border-radius:4px;padding:10px 11px}
.ivpanel-h{font-family:Verdana,Geneva,Arial,sans-serif;font-size:12px;font-weight:700;color:#00529b;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid #e3e7ea}
.ivmini{display:flex;gap:9px;align-items:center;margin:0 0 8px;text-decoration:none;color:#1a1a1c}
.ivmini-th{position:relative;flex:none;width:74px;height:44px;border:1px solid #d7d7d7;border-radius:2px;overflow:hidden;background:#000}
.ivmini-th img{width:100%;height:100%;object-fit:cover;display:block}
.ivmini-t{font-size:12px;line-height:1.35}
.ivmini:hover .ivmini-t{color:#8a3b1e;text-decoration:underline}
.ivplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ivchan{display:block;margin-top:4px;font-size:12px;font-weight:700;color:#8a3b1e;text-decoration:none}
.ivchan:hover{text-decoration:underline}
/* 2026-09-23 author page: the author's collection card (upper right, above Interviews) and the foot link row */
.asidecol{display:flex;flex-direction:column;gap:14px}
.shelfcard .shelfn{font-size:12px;line-height:1.4;margin:0 0 6px}
.shelfcard ul{list-style:none;margin:0;padding:0}
.shelfcard li{font-size:12px;line-height:1.55}
.shelfcard li a{color:#00529b;text-decoration:none}
.shelfcard li a:hover{color:#8a3b1e;text-decoration:underline}
.shelfcard .shelfc{color:#5c7288}
.shelfnote{font-size:13px;line-height:1.5;margin:8px 0 18px}

/* --- brand section links row (P83) --- */
.brandlinks{font-size:14px;margin:2px 0 10px}
.brandlinks a{padding-right:6px}
/* rail: British Cars box header link */
.rail .rhead{font-weight:400} /* same type as other rail links (Miko P86) */
/* --- Cart badge + bigger icon (Miko P85): quantity badge ABOVE the cart icon
   (sums copies: 2+1 = 3); icon half again as big (28x18 -> 42x27). --- */
.mast-right a.carticon{position:relative;background-size:42px 27px;padding-left:54px;padding-top:12px;padding-bottom:12px}
.cartbadge{position:absolute;top:-2px;left:30px;background:#fff;color:#00529b;font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:10px;min-width:8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cartbadge.empty{display:none}
/* current shelf in a link row: plain text, not a link */
/* ⚠️ ONE SELECTED-TAB TREATMENT FOR SHELF TABS — AND ONLY SHELF TABS: bold, blue, underlined.
   This covers the row on a brand or subject page and the Customer Service row, which is the
   same device selecting pages instead of shelves.

   ⚠️ IT DOES NOT COVER BOOK TABS. The grey .bx-tabs row on a product page keeps its own bold
   BLACK selected state — see bp-book-extra.php. I swept all three rows into one rule on
   2026-08-07 and the client pulled it back: "when we're talking about restyling tabs, we're
   only talking about shelf tabs. I'm quite happy with the book-level tabs." The two rows do
   different jobs — shelf tabs move you BETWEEN products, book tabs move you INSIDE one — and
   there is no reason they must look alike. */
.brandlinks .cur,.page .cs-nav a.on{
  font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* ⚠️ --blue, NOT --bp-blue. The theme's :root defines --blue; --bp-blue is defined by the
   checkout mu-plugin and only exists on the cart and checkout pages. The first version of
   this rule used --bp-blue, so on every brand page it resolved to nothing and the selected
   tab inherited --ink — near-black, which is the exact thing it was written to fix. It read
   correct in the stylesheet and was wrong on the page for a day. Reading a rule is not
   reading a computed style. */
/* --- Cart link refinement (Miko P90): regular weight, icon wheels on the text
   baseline, bigger badge number. Values set blind (extension down) — tune by eye. --- */
.mast-right a.carticon{font-weight:400 !important;background-position:0 calc(50% + 5px)}
.cartbadge{font-size:13px;padding:3px 7px;border-radius:11px;top:-4px}
/* color-wiring device on listing rows (P92): genuine icon, quiet corner */
.lrow{position:relative}

/* COLOUR-WIRING DEVICE (Miko 2026-07-12) — to the RIGHT of the pages line.
   The legacy PNG is 100x125: a "Color Wiring" caption band across the TOP (20% of
   the height), then the circle. Miko wants the circle only, bigger, with the words
   as type beneath. So we crop the band away and set the caption ourselves. */
.lm-pages{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.cwdev{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;flex:0 0 auto;line-height:1}
.cwcirc{display:block;width:48px;height:48px;overflow:hidden}      /* shows only the circle */
.cwcirc img{display:block;width:48px;height:60px;margin-top:-12px;border:0}  /* 125/100 tall; crop the top 20% caption band */
.cwlab{display:block;margin-top:3px;font-size:10.5px;font-weight:700;color:#00529b;white-space:nowrap;text-align:center}
.cwdev:hover .cwlab{text-decoration:underline}


/* Tiny social icons in the left rail (Miko 2026-07-13). The rail is 168px of
   Verdana links; the icon rides the text baseline and does not change the row
   height. Served from the theme, never from the host we are switching off. */
.rail .riconlink{display:flex;align-items:center;gap:6px}
.rail .riconlink img{width:16px;height:16px;flex:none;border:0}

/* ═══════════════════════════════════════════════════════════════════════
   THE VEHICLE PAGE
   ═══════════════════════════════════════════════════════════════════════
   ⚠️ EVERY CLASS BELOW IS EMITTED BY tech.php AND EVERY CLASS EMITTED BY tech.php IS
   BELOW. The Technical Videos section shipped broken because the markup declared six
   classes and five of them had no rule anywhere — the page was not "unstyled", it was
   styled by nothing. qc_rules sweeps for this now; so should the eye.

   The register: serious, because credibility is serious — this is a repair manual
   publisher and a wrong torque figure hurts somebody. But not austere. European, and
   allowed to enjoy itself: generous whitespace, a confident hairline, one warm accent.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the car's name, and its years, in the same breath ───────────────── */
.vhead        { margin: 18px 0 6px; }
.vtitle       { font: 400 30px/1.15 Georgia, 'Times New Roman', serif; color: #111;
                margin: 0 0 4px; letter-spacing: -.01em; }
.vtitle.sm    { font-size: 24px; }
/* ⚠️ SAME WEIGHT, SAME SIZE FAMILY. The years are not a subtitle and not a footnote —
   an owner reads "3 Series" and "2006-2011" as one fact. Setting them small and grey
   said they were an afterthought. They are half the identity of the car. */
.vyears       { font: 400 30px/1.15 Georgia, serif; color: #4a4a4a; letter-spacing: .01em; }
/* Chassis codes: LARGER, and NOT BOLD. They are a quiet technical fact, not a shout. */
.vcodes       { font: 400 15px/1.4 'Helvetica Neue', Arial, sans-serif; color: #5a5a5a;
                letter-spacing: .06em; text-transform: uppercase; }
/* ⚠️ When this line carries MODEL NAMES rather than codes (2026-07-26: "911 · Carrera 2,
   Carrera 4, Turbo 3.3") it must NOT be upper-cased — R5 forbids all-caps wayfinding, and
   "CARRERA" is a name, not a code. Set by the template when the node supplies model names. */
.vcodes.names { text-transform: none; letter-spacing: .02em; }
/* ── the second and third lines of the head (2026-09-18): the platform line stays quiet; the model
   names are the large line — Dasher; Jetta · GTI · Rabbit · Jetta SportWagen · R32 ─────────── */
.vmodels      { font: 500 22px/1.25 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1a1a1a;
                margin: 6px 0 0; letter-spacing: -.005em; }
/* ── Volkswagen and Audi: clean sans-serif, every year (client, 2026-09-18). The rest keep Georgia. */
/* ONE WEIGHT, medium, name and years alike (client, 2026-09-18 17:50: "all medium bold — don't do bold roman") */
.vhead.sans .vtitle, .vhead.sans .vyears { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; letter-spacing: -.015em; color: #111; }
/* ── the products inset at the top of the vehicle page (2026-09-18): one tight row of the manuals ── */
.vinset       { margin: 4px 0 8px; padding: 10px 12px 8px; border: 1px solid #dde3e9; border-radius: 3px; background: #fbfbfb; }
.vinset .vlbl { margin: 0 0 8px; }
.vinset-row   { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.vinset-i     { display: flex; gap: 9px; align-items: flex-start; flex: 0 1 calc(50% - 9px); min-width: 0; text-decoration: none; color: #00529b; }
@media (max-width: 640px) { .vinset-i { flex-basis: 100%; } }
.vinset-i img { width: 58px; height: auto; flex: 0 0 auto; border: 1px solid #d4d4d4; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.vinset-b     { display: block; min-width: 0; }
.vinset-y     { display: block; font: 700 10.5px/1.3 'Helvetica Neue', Arial, sans-serif; letter-spacing: .05em; color: #666; }
.vinset-t     { display: block; font: 400 12.5px/1.35 'Helvetica Neue', Arial, sans-serif; color: #00529b; margin-top: 2px; }
.vinset-i:hover .vinset-t { text-decoration: underline; }
.vrail .bp-dxcar[data-sku="DTC"] { margin-top: 0; }

/* ── section headings ───────────────────────────────────────────────── */
.vsec         { font: 600 17px/1.3 'Helvetica Neue', Arial, sans-serif; color: #1a1a1a;
                margin: 34px 0 14px; padding-bottom: 7px; border-bottom: 1px solid #dcdcdc;
                letter-spacing: .01em; }

/* ── ⚠️ THE SAFETY BRICK. Pink, top of the rail, every technical page. ──
   It was a sentence in the body and it disappeared. A sentence can be skimmed past; a
   brick cannot. It also makes a technical page instantly identifiable as one. */
.wcbrick      { display: block; margin: 0 0 20px; padding: 13px 15px;
                background: #fdeef0; border: 1px solid #e8b4bc; border-left: 4px solid #c8102e;
                border-radius: 2px; text-decoration: none; transition: background .15s; }
.wcbrick:hover{ background: #fbe2e6; }
.wcbrick-h    { display: block; font: 700 14px/1.3 'Helvetica Neue', Arial, sans-serif;
                color: #8c0d22; margin-bottom: 5px; }
.wcbrick-b    { display: block; font: 400 12.5px/1.45 'Helvetica Neue', Arial, sans-serif;
                color: #6d3b42; }

/* ── the right rail: the manual as a picture ────────────────────────── */
.vrail        { }
.vbook        { display: block; margin: 0 0 18px; text-decoration: none; text-align: center; }
.vbook img    { max-width: 118px; height: auto; border: 1px solid #d4d4d4;
                box-shadow: 0 2px 7px rgba(0,0,0,.13); transition: transform .18s, box-shadow .18s; }
.vbook:hover img { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.19); }
.vbook-t      { display: block; margin-top: 8px; font: 400 12px/1.4 'Helvetica Neue', Arial, sans-serif;
                color: #2b4a7d; }
.vbook:hover .vbook-t { text-decoration: underline; }
/* ⚠️ "Also for this car" — the HAND-MADE Associated Vehicles, 3,462 of them. The chassis
   code finds ONE book. This finds the fourteen a 3 Series owner might actually want. */
.vlbl         { font: 600 10.5px/1 'Helvetica Neue', Arial, sans-serif; color: #777;
                letter-spacing: .1em; text-transform: uppercase;
                margin: 20px 0 9px; padding-bottom: 6px; border-bottom: 1px solid #e4e4e4; }
/* ⚠️ TWO ACROSS, NEVER MORE — AND NEVER WITHOUT WORDS.
   2026-07-26 this went from four to three, on the same argument each time: smaller covers are
   less clickable. 2026-08-07 the client made the argument that finishes it, looking at nine
   Audi Service Forum DVDs that share one cover: "it's meaningless to a human ... it's three
   wide, which I'm going to ask you to avoid everywhere — go just two wide max, and then you
   need some kind of a short title underneath because otherwise the books all look the same."
   A cover is not an identifier. Two across, and every one captioned. The same two-wide rule
   the Vintage panel was held to on 2026-08-06 ("no more than two books wide"), now general. */
.valso        { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
.valso-i      { display: block; text-decoration: none; }
.valso-i img  { width: 100%; height: auto; border: 1px solid #d8d8d8; display: block;
                transition: transform .15s; }
.valso-i:hover img { transform: scale(1.07); border-color: #999; }
.valso-t      { display: block; margin: 5px 0 0; font-size: 11px; line-height: 1.25;
                color: #1b2733; }
.valso-i:hover .valso-t { text-decoration: underline; }

/* ── videos: half again as big, because people click them ───────────── */
.vvids        { display: flex; flex-wrap: wrap; gap: 20px; }
.vvid         { display: block; width: 246px; text-decoration: none; }
.vvid-i       { position: relative; display: block; }
.vvid-i img   { width: 246px; height: 138px; object-fit: cover; display: block;
                border-radius: 3px; background: #eee; transition: filter .15s; }
.vvid:hover .vvid-i img { filter: brightness(1.06); }
.vplay        { position: absolute; left: 50%; top: 50%; width: 46px; height: 32px;
                margin: -16px 0 0 -23px; border-radius: 6px; background: rgba(20,20,20,.72);
                transition: background .15s; }
.vplay:after  { content: ''; position: absolute; left: 18px; top: 9px;
                border: 7px solid transparent; border-left: 12px solid #fff; }
.vvid:hover .vplay { background: #c8102e; }          /* the one warm accent, earned */
.vvid-t       { display: block; margin-top: 9px; font: 400 14px/1.4 'Helvetica Neue', Arial, sans-serif;
                color: #2b4a7d; }
.vvid:hover .vvid-t { text-decoration: underline; }

/* ── articles: illustrated first, picture on the left, room to breathe ─ */
.varts        { }
.vart         { display: flex; align-items: center; gap: 15px; padding: 13px 0;
                border-bottom: 1px solid #ececec; text-decoration: none; }
.vart:last-child { border-bottom: 0; }
.vart:hover   { background: #fafafa; }
.vart-i       { flex: 0 0 108px; }
.vart-i img   { width: 108px; height: 76px; object-fit: cover; display: block;
                border: 1px solid #dcdcdc; border-radius: 2px; background: #f4f4f4; }
/* ⚠️ NO PLACEHOLDER BOX FOR THE UNILLUSTRATED ONES. An empty grey rectangle is a
   stand-in, and a stand-in is a small lie about what we have. If an article has no
   graphic, IT HAS NO GRAPHIC — and the row simply starts at the text. */
.vart-t       { font: 400 15px/1.45 'Helvetica Neue', Arial, sans-serif; color: #2b4a7d; }
.vart:hover .vart-t { text-decoration: underline; }
.vart:not(.has-i) .vart-t { padding-left: 2px; }

/* ── other generations of the same car ──────────────────────────────── */
.vsibs        { display: flex; flex-wrap: wrap; gap: 8px; }
.vsib         { display: flex; align-items: baseline; gap: 10px; padding: 8px 13px;
                border: 1px solid #e0e0e0; border-radius: 2px; text-decoration: none;
                background: #fcfcfc; transition: border-color .15s, background .15s; }
.vsib:hover   { border-color: #b6b6b6; background: #f6f6f6; }
.vsib-c       { font: 400 12.5px/1 'Helvetica Neue', Arial, sans-serif; color: #666;
                letter-spacing: .05em; }

/* ⚠️ THE YEAR RANGE, ON THE LEFT, FIRST — in the platform list and in the siblings.
   It is what an owner is actually choosing between. Tabular figures so the columns line
   up: a year range that wanders is a year range you have to read twice. */
.pcode        { flex: 0 0 auto; min-width: 86px;
                font: 600 15px/1 'Helvetica Neue', Arial, sans-serif; color: #1a1a1a;
                letter-spacing: .02em; }
.pyear        { flex: 0 0 auto; min-width: 86px;
                font: 500 13px/1.3 'Helvetica Neue', Arial, sans-serif; color: #333;
                font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ── platform list rows ─────────────────────────────────────────────── */
.techplat     { display: flex; align-items: center; gap: 14px; padding: 12px 4px;
                border-bottom: 1px solid #ededed; text-decoration: none; }
.techplat:hover { background: #fafafa; }
.techplat-b   { display: flex; flex-direction: column; gap: 3px; }
.techplat-t   { font: 400 16px/1.3 'Helvetica Neue', Arial, sans-serif; color: #2b4a7d; }
.techplat:hover .techplat-t { text-decoration: underline; }
/* ⚠️ THE SUBTITLE IS NOT GREY. Grey said "ignore me". It is a fact about the page. */
.techplat-m   { font: 400 12px/1.3 'Helvetica Neue', Arial, sans-serif; color: #555; }

/* ── measure: bring the line length in. Shorter lines read easier, and that matters
      most of all on the page whose job is to stop somebody being hurt. ───────────── */
.techbody.measure { max-width: 44em; }
.techbody.safety  { font-size: 15.5px; line-height: 1.62; }
.techbody.safety h1,
.techbody.safety h2 { font-weight: 700; font-size: 1.32em; }
.secbar-red   { background: #c8102e; }
/* a video with no poster frame is still a video — it just doesn't pretend to have a still */
.vvid-i.noposter { display:block; width:246px; height:138px; border-radius:3px;
                   background:linear-gradient(160deg,#33415a,#1e2636); }
/* Linnaean-in-cart message (Miko 2026-07-14) */
/* In the cart collaterals: a compact, squarer box floated LEFT, opposite the Proceed-to-checkout
   button in the totals column, aligned to the left edge (Miko 2026-07-15). */
.bp-linnaean-note{float:left;clear:left;width:300px;max-width:100%;box-sizing:border-box;border:1px solid #e3e6ea;border-top:3px solid #00529b;background:#f7f9fb;color:#111;padding:15px 18px 16px;margin:0 0 20px;font-size:13px;line-height:1.55}
/* shopper messages (WooCommerce notices) sit at the top-left of the collaterals, where the note
   used to be; the note itself is dropped (via JS) to line up with the checkout button. */
.cart-collaterals .bp-cart-messages{float:left;clear:left;width:300px;max-width:100%;box-sizing:border-box;margin:0 0 14px}
@media(max-width:640px){.bp-linnaean-note,.cart-collaterals .bp-cart-messages{float:none;width:auto;margin-top:0!important}}
/* accepted-payment card icons */
.bp-cards{list-style:none;margin:6px 0;padding:0}
.bp-cards li{display:flex;align-items:center;padding:3px 0;font-size:13px}
.bp-cardico{flex:0 0 auto;margin-right:8px;border-radius:2px}
.bp-linnaean-note .bp-ln-mark{font-weight:700;display:block;margin-bottom:5px;color:#00529b;text-decoration:none}
.bp-linnaean-note .bp-ln-mark:hover{text-decoration:underline}
.bp-linnaean-note .bp-ln-back{display:inline-block;margin-top:8px;font-size:12.5px}

/* Author "team" layout — Service Publications Team / About Us page (matches production author.htm?id=81). 2026-07-24 */
.ateam-sub{font-family:Verdana,Geneva,Arial,sans-serif;font-size:15px;font-weight:700;color:#1a1a1c;margin:10px 0 8px;max-width:640px}
.ateam-quote{font-size:15px;font-weight:700;font-style:italic;color:#1a1a1c;line-height:1.5;margin:0 0 18px;max-width:640px}
.ateam-cols{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:start;margin:0 0 22px;max-width:640px}
.ateam-text p{font-size:14.5px;line-height:1.6;color:#1a1a1c;margin:0 0 12px}
.ateam-text p:first-child{margin-top:0}
.ateam-photos{display:flex;flex-direction:column;gap:16px}
.ateam-photo{margin:0}
.ateam-photo img{display:block;width:100%;height:auto;border:1px solid #d4d4d4;background:#fff;box-shadow:0 1px 4px rgba(10,40,80,.10)}
.ateam-photo figcaption{font-size:12px;font-style:italic;color:#555;line-height:1.4;margin:5px 2px 0}
@media(max-width:720px){
  .ateam-cols{grid-template-columns:1fr;gap:18px}
  .ateam-photos{flex-direction:row;flex-wrap:wrap;gap:12px}
  .ateam-photo{flex:0 0 calc(50% - 6px)}
}
@media(max-width:430px){.ateam-photo{flex:0 0 100%}}

/* ══════════════════════════════════════════════════════════════════════════════
   COLOUR-WIRING STICKER AT THREE SIZES + THE MANUAL STACK
   Client, 2026-07-26: "for the manuals with color wiring, you're going to need to find a nice
   design way of adding that little hype sticker so that at every listing the color wiring
   feature is identified", and "pull the repair manuals, re-sequence them so the most recent
   year coverage is at the top".

   One piece of art — the company's own 100x125 PNG, a "Color Wiring" caption band across the top
   fifth and a circular vignette beneath it. Michael's 2026-07-12 direction was the circle only,
   bigger, with the words set as type. So every size crops the band away (margin-top of -20% of
   the rendered height) and sets the caption as real text. The 48px form in .cwdev above is
   unchanged; these are the two smaller forms the vehicle pages needed.
   ══════════════════════════════════════════════════════════════════════════════ */
.cwbadge      { text-decoration: none; line-height: 1; }
.cw-full      { display: inline-flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.cw-full .cwcirc     { width: 48px; height: 48px; border-radius: 50%; }
.cw-full .cwcirc img { width: 48px; height: 60px; margin-top: -12px; }

/* PILL — circle and caption on one line. Under a cover, or in a compact manual row. */
.cw-pill      { display: inline-flex; align-items: center; gap: 6px; }
/* ⚠️ CLIPPED TO A CIRCLE. The source PNG sets its black-outlined circle on a pale grey field, and
   at 48px the grey reads as a margin. At 24px it read as a grey SQUARE with a smudge in it —
   measured on /volkswagen/type-1/ before this rule existed. border-radius on the crop window
   throws the corners away and leaves a clean round token at any size. */
/* 34px, not 28: the client read the 28px form as too quiet next to the book it belongs to. */
.cw-pill .cwcirc     { display: block; width: 34px; height: 34px; overflow: hidden;
                       border-radius: 50%; }
.cw-pill .cwcirc img { display: block; width: 34px; height: 42.5px; margin-top: -8.5px; border: 0; }
.cw-pill .cwlab      { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .05em;
                       text-transform: uppercase; color: #00529b; white-space: nowrap; }
.cw-pill:hover .cwlab { text-decoration: underline; }
.vbook-cw     { display: block; margin: 9px 0 0; text-align: center; }

/* MARK — the corner sticker on a thumbnail. It sits on the COVER, not on the caption, so the
   badge is anchored to .valso-c rather than to the whole link. */
.valso-i      { position: relative; }
.valso-c      { position: relative; display: block; }
.cw-mark      { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px;
                border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cw-mark .cwcirc     { display: block; width: 26px; height: 26px; overflow: hidden;
                       border-radius: 50%; }
.cw-mark .cwcirc img { display: block; width: 26px; height: 32.5px; margin-top: -6.5px; border: 0; }

/* THE MANUAL STACK — first manual keeps the full-size cover (.vbook, above); every later manual
   is a compact row led by the years it covers, which is what makes newest-first legible. */
.vman         { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 15px;
                text-decoration: none; }
.vman img     { width: 54px; height: auto; flex: 0 0 auto; display: block;
                border: 1px solid #d4d4d4; }
.vman-b       { display: block; min-width: 0; }
.vman-y       { display: block; font: 700 10.5px/1.3 'Helvetica Neue', Arial, sans-serif;
                color: #8a949e; letter-spacing: .04em; }
.vman-t       { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                overflow: hidden; margin-top: 2px;
                font: 400 11.5px/1.35 'Helvetica Neue', Arial, sans-serif; color: #1f5c8b; }
.vman:hover .vman-t  { text-decoration: underline; }
.vman .cw-pill       { margin-top: 6px; }
.cwstack     { margin: 10px 0 4px; }
/* ⚠️ THE SIDEBAR "ALSO CONSIDER" ROW is a flex ROW of two children — cover, then title (see the
   2026-07-13 note above). Dropping the sticker in as a THIRD flex item stole the title's width
   and set it wrapping one word per line, measured on /product/v121/. The title and the sticker
   now share one column so the cover keeps its 72px and the title keeps the rest. */
.prodside .arow .arow-b { display: block; min-width: 0; }
.prodside .arow .arow-b > a { display: block; }
/* ⚠️ THE STICKER IS ALSO AN <a>. The rule above matched it and forced display:block, which broke
   the pill in half — circle on one line, caption on the next. Measured, not guessed: computed
   display came back "block" where the pill rule says flex. Same specificity trap, stated once. */
.prodside .arow .arow-b > a.cw-pill { display: flex; }
/* display:flex, not inline-flex: the sticker must START A LINE. Inline, it trailed the last word
   of the title — "…Service Manual: 1970– 1979 (sticker)" — which reads as part of the title. */
.arow .cw-pill { display: flex; margin-top: 6px; }
.arow .cw-pill .cwcirc     { width: 30px; height: 30px; }
.arow .cw-pill .cwcirc img { width: 30px; height: 37.5px; margin-top: -7.5px; }
/* the 2026-07-12 device on catalogue rows, clipped round to match the new sizes. Same art, same
   crop; the pale field around the circle is simply no longer shown as a square. */
.cwcirc { border-radius: 50%; }

/* 2026-09-11 (client, bmw/e60-e61): on a car page the right column ran to the very edge of
   the page — the "also consider" covers sat flush against it with no breathing room, while the
   left rail keeps its own gutter. The car page puts .vhead and .prodwrap straight into #app
   (no .page wrapper, so no page padding). Give that side the gutter the masthead has. */
#app > .vhead, #app > .prodwrap { padding-right: 22px; }
@media (max-width: 899px) { #app > .vhead, #app > .prodwrap { padding-right: 14px; } }
/* …and the video tiles were a fixed 246px, so the 22px gutter above pushed the second tile
   of each row onto the next line. Two per row by proportion instead, posters scaling with them. */
.vvids .vvid { width: calc(50% - 10px); }
.vvids .vvid-i img, .vvids .vvid-i.noposter { width: 100%; height: auto; aspect-ratio: 246 / 138; }
@media (max-width: 520px) { .vvids .vvid { width: 100%; } }
/* 2026-09-23 22:0x (QC of the copy): the three url() references to assets1.bentleypublishers.com (bg-960-shadow.gif, cart.w.gif) now point at the copies held under uploads/legacy — the old asset host is switched off at cutover. "Enlarge ›" link under a feature picture (bp-image-fallback v1.3). */
.imgCapLink{font-size:11px;line-height:1.4;margin-top:2px}
.imgCapLink a.bp-enlarge{color:#00529b;text-decoration:none}
.imgCapLink a.bp-enlarge:hover{color:#8a3b1e;text-decoration:underline}
a.bp-enlarge img{cursor:zoom-in}