/* xCruzo Library — shared stylesheet. Tokens = xcruzo.com hub.css: night-first (gold on navy); day resolves the accent to navy (gold is night-only, master 1.4). Theme key: localStorage xcruzo_theme = night|day. */
/* Version: v1.9.0 - 2026-11-07 15:31:36 EST (America/New_York).
   Current change: keep Library search and reader controls visible across themes and viewports.
   Library-only stylesheet. Maintenance workflow: Tooll&backup11032026/README.md. */
:root{--bg:#0e1a2e;--surface:#1a2950;--tint:#1f3159;--deep:#0f1c35;--line:#2a3a5a;--line-strong:#35497a;--fg:#e0e0e0;--fg-strong:#e2e8f0;--muted:#8a9cc5;--soft:#c9d4e6;--faint:#7f92b8;--accent:#d4af37;--accent-bright:#e4c35a;--on-accent:#0A1628;--ok-bg:#12352a;--ok-fg:#8fe0b0;--warn-bg:#3a2d10;--warn-fg:#f2d17a;--bad-bg:#44201f;--bad-fg:#ffb3b3;--shadow:0 10px 30px rgba(0,0,0,.4);color-scheme:dark}
:root[data-theme="day"]{--bg:#F4F8FC;--surface:#ffffff;--tint:#EEF5FA;--deep:#E3ECF5;--line:#d9e2ec;--line-strong:#b9c6d8;--fg:#172B47;--fg-strong:#10233F;--muted:#51647D;--soft:#3a4d66;--faint:#6F8298;--accent:#1a2950;--accent-bright:#1a2950;--on-accent:#ffffff;--ok-bg:#e4f3ea;--ok-fg:#17522f;--warn-bg:#fff3d6;--warn-fg:#6b4a08;--bad-bg:#fbe7e7;--bad-fg:#7a1f1f;--shadow:0 10px 30px rgba(14,26,46,.08);color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{font-size:16px}html[data-font="large"]{font-size:19px}html[data-font="xlarge"]{font-size:22px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;font-size:1.0625rem;line-height:1.6}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.display{font-family:"Playfair Display",Georgia,serif;font-weight:700;letter-spacing:-.01em;color:var(--fg-strong);text-wrap:balance}
.muted{color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--tint);color:var(--soft);font-size:0.8125rem;font-weight:500;white-space:nowrap}
.chip.on{background:var(--accent);color:var(--on-accent);font-weight:700}
.tag{display:inline-block;font-size:0.7188rem;font-weight:700;letter-spacing:.05em;text-transform:none;padding:3px 9px;border-radius:6px}
.tag.ok{background:var(--ok-bg);color:var(--ok-fg)}.tag.warn{background:var(--warn-bg);color:var(--warn-fg)}.tag.bad{background:var(--bad-bg);color:var(--bad-fg)}.tag.gold{background:var(--accent);color:var(--on-accent)}
/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--bg);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.375rem;color:var(--fg-strong);text-decoration:none}
.brand:hover{text-decoration:none}
.brand b{color:var(--accent-bright)}
.brand span{color:var(--faint);font-weight:600}
.top nav{display:flex;gap:18px;font-size:0.875rem;font-weight:500;flex-wrap:wrap}
.top nav a{color:var(--soft)}.top nav a.on{color:var(--accent-bright);border-bottom:2px solid var(--accent);padding-bottom:2px}
.tools{display:flex;align-items:center;gap:8px}
.btn-ghost{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--soft);font:inherit;font-size:0.8125rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-ghost:hover{border-color:var(--accent)}
.btn-ghost select{border:0;background:transparent;color:inherit;font:inherit;font-weight:600;padding:0 2px;max-width:150px}
.btn-ghost:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* article */
.wrap{max-width:1160px;margin:0 auto;width:100%}
.article{max-width:48rem;margin:0 auto;padding-block:28px 64px}
.eyebrow{font-size:0.7812rem;font-weight:700;letter-spacing:.08em;text-transform:none;color:var(--accent-bright)}
h1.title{font-size:clamp(2.0rem,5vw,2.875rem);line-height:1.08;margin:8px 0 10px}
.dek{font-size:1.25rem;line-height:1.45;color:var(--muted);margin:0 0 18px;max-width:62ch}
.meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:0.8438rem;color:var(--muted);margin-bottom:22px}
.meta b{color:var(--soft);font-weight:600}
figure.hero{margin:0 0 28px}
figure.hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;box-shadow:var(--shadow)}
figcaption{font-size:0.7812rem;color:var(--faint);margin-top:8px}
.article h2{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.6875rem;letter-spacing:0;margin:36px 0 10px;color:var(--fg-strong);text-wrap:balance}
.article h3{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:1.1875rem;margin:24px 0 6px;color:var(--fg-strong)}
.article p{margin:12px 0;max-width:68ch}
.article ul,.article ol{padding-left:24px;max-width:68ch}.article li{margin:6px 0}
.article table{width:100%;border-collapse:collapse;font-size:0.9375rem;min-width:520px}
.tbl{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:10px}
.article th{text-align:left;background:var(--accent);color:var(--on-accent);padding:9px 12px;font-weight:600}
.article td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.article tr:nth-child(even) td{background:var(--tint)}
.callout{background:var(--tint);border-left:4px solid var(--accent);padding:14px 18px;margin:20px 0;border-radius:0}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-fg);color:var(--fg)}
.callout b.k{display:block;font-size:0.75rem;letter-spacing:.06em;text-transform:none;color:var(--accent-bright);margin-bottom:4px}
.check{list-style:none;padding:0;max-width:68ch}
.check li{display:block;position:relative;padding:10px 0 10px 36px;border-bottom:1px solid var(--line)}
.check li::before{content:"";position:absolute;left:0;top:12px;width:22px;height:22px;box-sizing:border-box;border:2px solid var(--accent);border-radius:6px}
.figure-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.figure-row figure{margin:0}.figure-row img{aspect-ratio:4/3;object-fit:cover;border-radius:12px;width:100%}
.sources{margin-top:40px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.sources h2{margin:0 0 8px;font-size:0.9375rem;letter-spacing:.06em;text-transform:none;color:var(--accent-bright)}
.sources ul{margin:0;padding-left:20px;font-size:0.9062rem}
.notice{font-size:0.8125rem;color:var(--faint);margin-top:14px;max-width:68ch}

/* Public source context stays in the reading flow, outside sticky navigation. */
.reading-context{padding-block:12px 0}
.reading-notice-row{display:flex;align-items:flex-start;gap:8px 16px;flex-wrap:wrap}
.reading-notice{flex:1 1 32rem;min-width:0;font-size:.8125rem;line-height:1.5;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere}
.reading-correction{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;line-height:1.5;color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.reading-notice summary{cursor:pointer;min-height:44px;padding:10px 14px}
.reading-notice summary::marker{color:var(--muted)}
.reading-notice summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.reading-notice .reading-more{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px;margin-inline-start:8px;white-space:nowrap}
.reading-notice p{margin:0;padding:0 14px 12px 30px;max-width:100ch}

.review{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--warn-bg);color:var(--warn-fg);font-size:0.875rem;margin:0 0 18px}
.cta{margin-top:36px;padding:26px;border:1px solid var(--accent);border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cta .t{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.375rem;color:var(--fg-strong);line-height:1.2;max-width:34ch}
.cta .s{font-size:0.875rem;color:var(--muted);margin-top:4px}
.btn{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:0.9375rem;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--accent-bright);color:var(--on-accent);text-decoration:none}
.more{margin-top:34px}
.more h2{font-family:"IBM Plex Sans",sans-serif;font-size:1.125rem;margin:0 0 10px;color:var(--fg-strong)}
.more .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.more a{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);text-decoration:none;min-width:0}
.more a:hover{border-color:var(--accent)}
.more a b{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:0.9375rem;line-height:1.25;color:var(--fg-strong)}
.more a small{color:var(--muted);font-size:0.7812rem}
footer.bot{padding-block:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:0.8125rem;color:var(--faint)}
/* index */
.hero-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tile{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);color:var(--fg);text-decoration:none;min-width:0;box-shadow:var(--shadow)}
.tile:hover{border-color:var(--accent);text-decoration:none;color:var(--fg)}
.tile .im{height:220px;background:var(--deep);position:relative}
.tile .im img{width:100%;height:100%;object-fit:cover}
.tile .im .tag{position:absolute;left:14px;top:14px}
.tile .tx{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.tile .tx b{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.25rem;line-height:1.15;color:var(--fg-strong)}
.tile .tx small{color:var(--muted);font-size:0.8438rem}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.door{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:20px;background:var(--surface);border:1px solid var(--line);color:var(--fg);text-decoration:none;min-height:200px;min-width:0}
.door:hover{border-color:var(--accent);text-decoration:none;color:var(--fg)}
.door b{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.5625rem;line-height:1.1;color:var(--fg-strong)}
.door small{font-size:0.9375rem;color:var(--muted);line-height:1.45}
.door .n{margin-top:auto;font-size:0.875rem;color:var(--accent-bright);font-weight:600}
.door svg{color:var(--accent)}
.shelf{display:flex;flex-direction:column;gap:16px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.shelf-head h2{margin:0;font-family:"IBM Plex Sans",sans-serif;font-weight:800;font-size:1.75rem;letter-spacing:-.01em;color:var(--fg-strong)}
.shelf-head h2 i{color:var(--accent);font-style:normal}
.shelf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--fg);text-decoration:none;min-width:0}
.card:hover{border-color:var(--accent);text-decoration:none;color:var(--fg)}
.card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;flex:none}
.card b{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:1.0312rem;line-height:1.25;color:var(--fg-strong)}
.card small{color:var(--muted);font-size:0.7812rem}
.shelf2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.panel{padding:24px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{margin:0;font-family:"IBM Plex Sans",sans-serif;font-weight:800;font-size:1.4375rem;color:var(--fg-strong)}.panel h2 i{color:var(--accent);font-style:normal}
.panel p{margin:0;color:var(--muted);font-size:0.9375rem}
.link-row{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:10px;background:var(--tint);color:var(--fg);text-decoration:none}
.link-row:hover{color:var(--fg);text-decoration:none;outline:1px solid var(--accent)}
.link-row small{color:var(--muted);font-size:0.8125rem;white-space:nowrap}
.covers{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.cover{flex:0 0 150px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--fg)}
.cover .c{height:200px;border-radius:8px;border:1px solid var(--accent);background:var(--tint);display:flex;flex-direction:column;justify-content:flex-end;padding:12px;font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:0.875rem;line-height:1.2;color:var(--fg-strong)}
.cover small{color:var(--muted);font-size:0.7812rem}
@media (max-width:980px){.hero-tiles,.doors{grid-template-columns:repeat(2,minmax(0,1fr))}.shelf-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.hero-tiles,.doors,.shelf-row,.shelf2{grid-template-columns:1fr}.tile .im{height:180px}body{font-size:1.0rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== v1.2: sub-nav, depth (day mode), cars ===== */
:root{--shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 8px 24px rgba(0,0,0,.38);--shadow-lg:0 18px 44px rgba(0,0,0,.5);--edge:inset 0 1px 0 rgba(255,255,255,.05);--surface-grad:linear-gradient(180deg,#1c2d55 0%,#172648 100%)}
:root[data-theme="day"]{--shadow-sm:0 1px 2px rgba(14,26,46,.06),0 2px 6px rgba(14,26,46,.06);--shadow:0 6px 18px rgba(14,26,46,.10),0 1px 3px rgba(14,26,46,.08);--shadow-lg:0 18px 40px rgba(14,26,46,.14),0 4px 10px rgba(14,26,46,.08);--edge:inset 0 1px 0 rgba(255,255,255,.9);--surface-grad:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%)}

.top{box-shadow:0 1px 0 var(--line),0 4px 14px rgba(14,26,46,.05)}
.subnav{background:var(--surface);border-bottom:1px solid var(--line);font-size:0.8438rem;position:sticky;top:var(--top-h,0px);z-index:4;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.subnav .wrap{display:flex;align-items:center;gap:6px;min-height:42px;max-width:none}
.subnav .nb{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--surface-grad);color:var(--soft);font:inherit;font-size:1.125rem;line-height:1;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm),var(--edge)}
.subnav .nb:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.subnav .crumbs{margin-left:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.subnav .crumbs a{color:var(--soft)}.subnav .sep{margin:0 6px;color:var(--faint)}.subnav .cur{color:var(--fg-strong);font-weight:600}
.tile,.door,.card,.panel,.cta,.sources,.more a,.ocard,.gen{background:var(--surface-grad);box-shadow:var(--shadow),var(--edge);transition:transform .18s ease,box-shadow .18s ease}
.tile:hover,.door:hover,.card:hover,.more a:hover,.carcover:hover .c{transform:translateY(-3px);box-shadow:var(--shadow-lg),var(--edge)}
.cover .c{box-shadow:var(--shadow),var(--edge);transition:transform .18s ease,box-shadow .18s ease}
.chip{box-shadow:var(--edge)}.chip.on{box-shadow:0 2px 6px rgba(14,26,46,.18)}
.btn{box-shadow:0 4px 12px rgba(23,50,77,.22),inset 0 1px 0 rgba(255,255,255,.25)}
:root:not([data-theme="day"]) .btn{box-shadow:0 4px 14px rgba(212,175,55,.25)}
.btn-ghost{background:var(--surface-grad);box-shadow:var(--shadow-sm),var(--edge)}
.tbl{box-shadow:var(--shadow-sm)}
figure.hero img{box-shadow:var(--shadow-lg)}
.callout{box-shadow:var(--shadow-sm)}
.callout.gold{background:var(--surface-grad);border-left-color:var(--accent-bright)}
.review{box-shadow:var(--shadow-sm)}
/* cars */
.yourcar{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--accent);border-radius:12px;background:var(--surface-grad);box-shadow:var(--shadow)}
.yourcar a{font-size:1.0rem;color:var(--fg-strong)}
.covers.cars .cover{flex:0 0 220px}
.carcover .c{height:150px;padding:0;overflow:hidden;position:relative;justify-content:flex-end;border:1px solid var(--line)}
.carcover .c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carcover .c span{position:relative;padding:10px 12px;background:linear-gradient(180deg,transparent,rgba(14,26,46,.85));color:#fff;font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:0.9375rem;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.car-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tile.car .im{height:200px}
.article.wide{max-width:54rem}
.origin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 8px}
.ocard{padding:14px 16px;border-radius:12px;border:1px solid var(--line)}
.ocard b{display:block;font-size:0.75rem;letter-spacing:.06em;text-transform:none;color:var(--accent-bright);margin-bottom:4px}
.ocard p{margin:0;font-size:0.9688rem}
.ocard:last-child{grid-column:1/-1}
.gens{list-style:none;padding:0;margin:14px 0;position:relative}
.gens::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:var(--line)}
.gen{position:relative;margin:0 0 18px 36px;padding:16px 18px;border-radius:14px;border:1px solid var(--line)}
.gen::before{content:"";position:absolute;left:-28px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.gen-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:0.8125rem;color:var(--muted)}
.gen-n{font-family:var(--mono,"IBM Plex Mono",monospace);font-weight:600;color:var(--accent-bright);letter-spacing:.04em}
.gen-y{font-weight:600;color:var(--soft)}.gen-c{color:var(--faint)}
.gen h3{margin:4px 0 8px;font-size:1.25rem}
.gen figure{margin:10px 0 12px}.gen img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.gen p{margin:8px 0;font-size:0.9688rem}
.more a img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:6px}
@media (max-width:980px){.car-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.car-grid,.origin-grid{grid-template-columns:1fr}.covers.cars .cover{flex:0 0 180px}.subnav .crumbs{display:none}}
@media (prefers-reduced-motion:reduce){.tile,.door,.card,.more a,.cover .c{transition:none}}
.pickcar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface-grad);box-shadow:var(--shadow),var(--edge);margin:4px 0 12px}
.pickcar b{font-family:"IBM Plex Sans",sans-serif;font-size:1.0625rem;color:var(--fg-strong)}.pickcar p{margin:2px 0 0;font-size:0.875rem;color:var(--muted);max-width:48ch}
[hidden]{display:none!important}
.carcover .c span{font-size:0.875rem;line-height:1.2}

/* v1.4 — like (♥ me sirvió): hidden until /api/library-like answers */
.like{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--soft);font:inherit;font-size:0.875rem;font-weight:600;cursor:pointer;margin:0 0 18px;box-shadow:var(--shadow-sm)}
.like:hover{border-color:var(--accent);color:var(--accent-bright)}
.like.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.like small{font-weight:500;font-size:0.7812rem}

/* v1.5 — car page: full-width hero, 3 zones (gen index | story | facts) */
.carpage{padding-block:28px 72px;max-width:none;padding-inline:clamp(8px,2vw,40px)}
.carpage ~ *,.has-car .subnav .wrap{max-width:none}
.car-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.car-head h1.title{font-size:clamp(2.125rem,5.2vw,3.375rem);margin:6px 0 8px}
.car-head .dek{margin-bottom:10px}
.car-hero{margin:0 0 14px}.car-hero img{aspect-ratio:3/2;max-height:640px;object-fit:cover;border-radius:18px}
.fact{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline;background:var(--surface-grad);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:14px 18px;margin:0 0 28px;box-shadow:var(--shadow-sm)}
.fact .k{font-size:0.75rem;letter-spacing:.08em;text-transform:none;color:var(--accent-bright);white-space:nowrap}.fact p{margin:0;font-size:1.0rem;max-width:none}
.car-grid{display:grid;grid-template-columns:clamp(200px,15vw,280px) minmax(0,1fr) clamp(300px,22vw,400px);gap:clamp(24px,2.5vw,48px);align-items:start}
.car-main h2{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.6875rem;margin:8px 0 12px;color:var(--fg-strong)}
.car-main h3{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:1.1875rem;margin:10px 0 6px;color:var(--fg-strong)}
.car-main p{margin:10px 0}.car-main .gens{margin-top:4px}
.rail{position:sticky;top:calc(var(--top-h,0px) + 56px);display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - var(--top-h,0px) - 72px);overflow:auto;scrollbar-width:thin}
.rail-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.rail-t{display:block;font-size:0.7188rem;letter-spacing:.08em;text-transform:none;color:var(--accent-bright);margin-bottom:8px}
.gen-idx{list-style:none;margin:0;padding:0}.gen-idx li{margin:0}
.gen-idx a{display:grid;grid-template-columns:26px 1fr;gap:0 8px;padding:7px 4px;border-radius:8px;color:var(--soft);text-decoration:none;font-size:0.8125rem;line-height:1.3;border-bottom:1px solid var(--line)}
.gen-idx li:last-child a{border-bottom:0}.gen-idx a:hover{background:var(--tint);color:var(--fg-strong)}
.gen-idx .n{grid-row:span 2;font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--accent-bright);font-size:0.9375rem;align-self:start}
.gen-idx .y{font-weight:600;color:var(--fg-strong)}.gen-idx .tt{color:var(--muted);font-size:0.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.facts dl{margin:0;display:grid;gap:6px}.facts dl div{display:flex;justify-content:space-between;gap:10px;font-size:0.875rem;border-bottom:1px solid var(--line);padding-bottom:6px}.facts dl div:last-child{border:0}
.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:600;color:var(--fg-strong);text-align:right}
.miles{list-style:none;margin:0;padding:0;font-size:0.8438rem}.miles li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}.miles li:last-child{border:0}
.miles .yr{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--accent-bright)}
.rail-box p{font-size:0.875rem;margin:0;line-height:1.5}
.rail-box.sources{margin-top:0;padding:14px 16px}.rail-box.sources ul{padding-left:18px;font-size:0.8125rem;margin:0}.rail-box.sources li{margin:3px 0}.rail-box .notice{font-size:0.75rem;color:var(--faint);margin-top:8px}
.cta-mini{background:var(--surface-grad);border-color:var(--line-strong)}.cta-mini b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.125rem;color:var(--fg-strong);margin-bottom:6px}.cta-mini p{margin:0 0 10px;color:var(--muted)}
.cta-mini .btn{display:inline-flex}
.gen-link{margin-top:28px;font-weight:600}
.carpage .more{margin-top:48px}
@media(max-width:1180px){.car-grid{grid-template-columns:minmax(0,1fr) 280px}.rail-l{position:static;grid-column:1/-1;max-height:none;overflow:visible}
 .rail-l .gen-idx{display:flex;flex-wrap:wrap;gap:6px}.rail-l .gen-idx a{display:inline-flex;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 10px;align-items:center}.rail-l .gen-idx .tt{display:none}.rail-l .gen-idx .n{font-size:0.8125rem}}
@media(max-width:820px){.car-grid{grid-template-columns:1fr;gap:20px}.rail{position:static;max-height:none;overflow:visible}.car-hero img{aspect-ratio:16/10;border-radius:14px}.fact{grid-template-columns:1fr;gap:4px}}

/* wide screens: use them */
@media(min-width:1500px){.car-main{font-size:1.0938rem}.car-head h1.title{font-size:clamp(2.75rem,3.6vw,4.0rem)}}

/* zone 1 layout (v1.6): left = title, photo, fact ; right = how it began. Below: gen index | generations (−15%) | facts rail */
.car-top{display:grid;grid-template-columns:1fr;gap:28px 40px;margin-bottom:32px;align-items:start}
.car-intro{display:flex;flex-direction:column;gap:18px}.car-head{margin:0}.car-hero{margin:0}.fact{margin:0}
.car-origin h2{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.6875rem;margin:0 0 12px;color:var(--fg-strong)}
.car-origin .origin-grid{margin:0}
@media(min-width:1200px){.car-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.car-hero img{aspect-ratio:3/2;max-height:none}
 .car-grid{grid-template-columns:clamp(220px,17vw,320px) minmax(0,1fr) clamp(340px,26vw,460px)}}
@media(min-width:1500px){.car-origin .origin-grid{grid-template-columns:repeat(2,1fr)}.car-origin .ocard:last-child{grid-column:1/-1}}

/* v1.6 — pro pass */
.car-hero figcaption{display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;font-size:.8125rem;color:var(--muted);margin-top:8px}
.car-hero figcaption b{color:var(--fg-strong);font-weight:600}
.car-head .meta{margin-bottom:10px}.car-head .tag.warn{font-size:.65rem;padding:2px 7px}
.fontbtn{font-family:"Playfair Display",Georgia,serif;font-weight:700;letter-spacing:0}.fontbtn sup{font-size:.6em;margin-left:1px;color:var(--accent-bright)}
.car-origin .ocard p{font-size:.95rem;line-height:1.55}
.ocard p{max-width:none}
/* text may grow: never clip, always wrap */
.rail-box,.ocard,.gen,.card,.tile .tx,.door{overflow-wrap:anywhere}
.cover .c{height:auto;min-height:12.5rem}.carcover .c{min-height:9.4rem}
.subnav .crumbs{font-size:.84rem}
@media(min-width:1200px){.car-top{align-items:start;grid-template-rows:auto auto auto auto 1fr;row-gap:0}.car-intro{display:contents}
 .car-head{grid-column:1;grid-row:1}.car-meta{grid-column:1;grid-row:2;padding-bottom:18px}.car-hero{grid-column:1;grid-row:3}.fact{grid-column:1;grid-row:4;margin-top:18px}
 .car-origin{grid-column:2;grid-row:2/span 4;padding-top:0}.car-origin h2{margin-top:0}
 .car-origin h2{margin-top:0;line-height:1.1}
 .car-origin .ocard p{font-size:1rem;line-height:1.6}}
@media(max-width:520px){.tools{flex-wrap:wrap;row-gap:6px}.btn-ghost select{max-width:7.5rem}.top{row-gap:8px}}
/* v1.6.1 — photos support the text, never the other way round */
@media(min-width:1200px){
 .car-top{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
 .car-hero img{aspect-ratio:3/2;max-height:30rem;width:100%}
 .car-main .gen{display:grid;grid-template-columns:clamp(260px,34%,440px) minmax(0,1fr);gap:4px 28px;align-items:start}
 .car-main .gen .gen-head,.car-main .gen h3{grid-column:1/-1}
 .car-main .gen figure{grid-column:1;grid-row:3/span 6;margin:6px 0 0}
 .car-main .gen figure img{aspect-ratio:4/3;max-height:22rem}
 .car-main .gen p,.car-main .gen .callout{grid-column:2}
 .car-main .gen p:first-of-type{margin-top:6px}
}
@media(min-width:1800px){.car-top{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.car-hero img{max-height:28rem}}
.car-intro .car-hero,.car-intro .fact,.car-intro .car-head{margin:0}.car-intro .car-hero figcaption{margin-top:6px}

/* elegant rule under titles — like the News "xCruzo Brief" divider: gold fading to the sides */
.rule{display:flex;align-items:center;gap:14px;margin:14px 0 16px;color:var(--accent-bright)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent 0%,var(--accent-bright) 100%);opacity:.85}
.rule::after{background:linear-gradient(90deg,var(--accent-bright) 0%,transparent 100%)}
.rule span{font-family:"IBM Plex Sans",sans-serif;font-size:.9rem;font-weight:400;letter-spacing:.28em;white-space:nowrap;padding:0 4px;color:var(--accent-bright)}
:root[data-theme="day"] .rule::before{background:linear-gradient(90deg,transparent,var(--accent))}:root[data-theme="day"] .rule::after{background:linear-gradient(90deg,var(--accent),transparent)}
.car-head .rule{max-width:40rem}

.car-meta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media(max-width:1199px){.car-meta{margin:0 0 6px}}

/* Aa scales the reading column too: width in rem, so photos and text grow together (48rem = 768px normal, 912px large, 1056px xlarge) */
.article figure img,.article .figure-row img{width:100%}
@media(min-width:1600px){.article{max-width:52rem}}

/* v1.7 — home: sections start at today's Aa++ size and grow from there (zoom scales text, photos and widths together) */
main.home{zoom:1.375}html[data-font="large"] main.home{zoom:1.55}html[data-font="xlarge"] main.home{zoom:1.75}
@media(max-width:1199px){main.home{zoom:1.15}html[data-font="large"] main.home{zoom:1.28}html[data-font="xlarge"] main.home{zoom:1.42}}
@media(max-width:600px){main.home{zoom:1}html[data-font="large"] main.home{zoom:1.08}html[data-font="xlarge"] main.home{zoom:1.16}}
/* book & magazine covers: real images, title on a gradient foot */
.bookcover .c{padding:0;overflow:hidden;position:relative;justify-content:flex-end;min-height:0;aspect-ratio:2/3;background:var(--deep)}
.bookcover .c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bookcover .c span{position:relative;z-index:1;padding:28px 10px 10px;font-size:.85rem;font-weight:700;color:#fff;background:linear-gradient(180deg,transparent,rgba(10,22,40,.9));line-height:1.2}
main.home .wrap{max-width:1320px}
.covers.kiosk .cover .c{aspect-ratio:2/3;min-height:0;height:auto}
/* v1.20 line selects: no pill, no emoji; one accent line + chevron */
.lsel{position:relative;display:inline-flex;align-items:baseline;gap:.55em;padding:3px 22px 6px 0;border-bottom:1.5px solid var(--accent);color:var(--text);font:inherit;font-size:1rem;line-height:1.25;cursor:pointer;white-space:nowrap}
.lsel .k{font-size:.72em;font-weight:600;letter-spacing:.08em;text-transform:none;color:var(--muted)}
.lsel select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:0;border-radius:0;background:transparent;padding:0;margin:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;outline:none;position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:2}
.lsel select::-ms-expand{display:none}
.lsel option{color:var(--text);background:var(--bg)}
.lsel::after{content:"";position:absolute;right:3px;top:calc(50% - 8px);width:8px;height:8px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);pointer-events:none}
.lsel:hover,.lsel:focus-within{border-bottom-color:var(--text)}
.lsel:focus-within::after{border-color:var(--text)}
.lsel.big{font-size:1.25rem;padding-right:28px;gap:.7em}
.lsel.big::after{width:10px;height:10px;top:calc(50% - 9px);right:4px}
.car-meta .lsel.big{margin:2px 0 4px}
.lsel .lsel-val{font-weight:600;max-width:13rem;min-width:2.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:520px){.lsel .lsel-val{max-width:7.5rem}.top .lsel .k{display:none}}
/* Link between a national guide and the state version of it */
.xrule{margin:-2px 0 14px;font-size:.92rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.xrule a{color:var(--accent);font-weight:650;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.xrule a:hover{border-bottom-color:var(--accent)}
/* The state's own name inside a title: gold at night, deep navy on a soft
   highlight by day (gold stays night-only). */
.stname{color:var(--accent);font-weight:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Day: gold is night-only, so the state name is emphasised with a solid navy
   rule under it rather than a highlight band, which read as a text selection. */
:root[data-theme=day] .stname{color:#0B1A30;box-shadow:inset 0 -0.14em 0 rgba(26,41,80,.9)}

/* "Changes by state" on the US home: a quiet line under the card's meta,
   never a shouting badge. Design A (default) and design B (bottom rail). */
.chg{display:block;margin-top:7px;font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent)}
:root[data-theme=day] .chg{color:#1a2950}
.chg.b{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);color:var(--muted);font-weight:650;display:flex;justify-content:space-between;gap:8px}
.card .chg{opacity:.95}
.card:hover .chg{opacity:1}
.lsel:focus-within{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
/* The state / brand selector sits in the page, at the end of the sub-nav row,
   because the bar above it belongs to xcruzo.com. */
.subnav-sel{margin-left:auto;display:inline-flex;align-items:center;padding-left:14px}
.subnav-sel .lsel{font-size:.9375rem;padding-bottom:4px}
.subnav-sel .lsel .k{display:inline}
@media(max-width:700px){.subnav .wrap{flex-wrap:wrap;row-gap:6px}.subnav-sel{margin-left:0;padding-left:0;width:100%}}

/* ============ xcruzo.com top and bottom menus ============
   Markup mirrors the site's header/footer; the Library keeps its own
   no-inline-handler rule, so language is a link pair and the theme segment
   carries data attributes the page script wires up. */
.header{background:#1a2950;padding:12px 32px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:0;z-index:40;flex-wrap:wrap}
.header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent 0%,rgba(212,175,55,.7) 30%,rgba(212,175,55,.7) 70%,transparent 100%)}
.header-left{display:flex;align-items:center;gap:12px;min-width:0}
.header-left img{height:52px;width:52px;object-fit:contain}
.header-brand{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;font-weight:500;color:#b89a30;letter-spacing:2px}
.header-tagline{color:rgba(255,255,255,.55);font-size:.8rem;margin-left:8px}
.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.header-links{display:flex;gap:18px}
.header-links a{color:rgba(255,255,255,.75);font-size:.85rem;font-weight:500;text-decoration:none}
.header-links a:hover{color:rgba(212,175,55,.9)}
.header-links a.nav-active{color:#b89a30}
.lang-toggle{display:flex;align-items:center;gap:4px;border:1px solid rgba(212,175,55,.35);border-radius:20px;padding:2px 4px;background:rgba(255,255,255,.05)}
.lang-divider{color:rgba(255,255,255,.25);font-size:.7rem;line-height:1;user-select:none}
.lang-btn{display:flex;align-items:center;gap:4px;padding:3px 7px;background:transparent;border:0;border-radius:14px;color:rgba(255,255,255,.5);font-size:.62rem;font-weight:700;letter-spacing:.5px;text-decoration:none;cursor:pointer}
.lang-btn svg{width:16px;height:12px;border-radius:2px;flex-shrink:0;opacity:.6}
.lang-btn.active{background:rgba(255,255,255,.13);color:#fff}
.lang-btn.active svg{opacity:1}
.lang-btn:hover:not(.active){color:rgba(255,255,255,.85)}
.theme-segment{display:flex;align-items:center;gap:2px;border:1px solid rgba(212,175,55,.35);border-radius:20px;padding:2px;background:rgba(255,255,255,.05)}
.theme-seg{display:inline-flex;align-items:center;gap:4px;min-width:54px;justify-content:center;padding:4px 8px;border:0;border-radius:16px;background:transparent;color:rgba(255,255,255,.58);font-size:.62rem;font-weight:700;letter-spacing:.5px;cursor:pointer}
.theme-seg svg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
.theme-seg:hover{color:#fff}
.theme-seg[aria-pressed=true]{background:rgba(255,255,255,.13);color:#fff}
/* ERR-2026-230 · Aa contrast v1.0.0 · 2026-11-03 16:36:41 EST (America/New_York) */
.header .fontbtn{color:#e2e8f0;background:#23365b;border-color:#b89a30;box-shadow:none}
.header .fontbtn sup{color:#e4c35a;font-size:.75em;line-height:1}
.header .fontbtn:hover{color:#fff;background:#2d426d;border-color:#e4c35a}
.header .fontbtn:hover sup{color:#f1d37a}
.header .fontbtn:focus-visible{outline:3px solid #e4c35a;outline-offset:3px}
:root[data-theme="day"] .header .fontbtn{color:#1a2950;background:#fff;border-color:#b9c6d8}
:root[data-theme="day"] .header .fontbtn sup{color:#1a2950}
:root[data-theme="day"] .header .fontbtn:hover{color:#10233f;background:#eef5fa;border-color:#9eacbf}
:root[data-theme="day"] .header .fontbtn:hover sup{color:#10233f}
.site-footer{background:#1a2950;border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:14px 16px;font-size:.72rem;color:rgba(255,255,255,.5);display:flex;flex-direction:column;gap:5px;align-items:center}
.site-footer a{color:rgba(255,255,255,.65);text-decoration:none}
.site-footer a:hover{color:rgba(255,255,255,.95)}
.site-footer .foot-note{max-width:62ch}
@media(max-width:900px){.header{padding:10px 16px;gap:10px}.header-brand{font-size:1.2rem}.header-tagline{display:none}.header-links{display:none}}

/* Controls and content reflow independently of the reading-size setting. */
.lsel{color:var(--fg)}.lsel option{color:var(--fg)}
.lsel:hover,.lsel:focus-within{border-bottom-color:var(--fg)}
.state-selector{min-height:44px;align-items:center;max-width:100%}
.state-label{font-weight:500;color:var(--muted);flex-shrink:0}
.state-selector .lsel-val{max-width:none;min-width:0;white-space:normal;overflow:visible}
.subnav .nb{min-width:44px;width:44px;height:44px;flex-shrink:0}
.subnav-sel{min-width:0;max-width:100%}
.lang-btn,.theme-seg,.header .fontbtn{min-height:44px}
.lang-btn{min-width:44px;justify-content:center;font-size:.75rem}
.theme-seg{font-size:.75rem;letter-spacing:0}
.header-actions,.header-links{min-width:0}
.header-links{flex-wrap:wrap;align-items:center;row-gap:0}
.header-links a{display:inline-flex;align-items:center;min-height:44px}
.header .fontbtn{min-width:44px;justify-content:center}
.hero-tiles,.doors{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.shelf-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.shelf2{grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr))}
.home .cta{margin-top:0}
.cta>div{min-width:0;flex:1 1 22rem}
.btn{min-height:46px;height:auto;padding-block:10px;white-space:normal;text-align:center;justify-content:center}
.yourcar{flex-wrap:wrap}
.car-top>*,.car-grid>*,.car-intro,.car-origin,.car-main{min-width:0}
.carpage,.article,.panel,.cta{overflow-wrap:anywhere}
.facts dl div{flex-wrap:wrap}.facts dd{margin-left:auto}
.car-grid.car-shelf-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
[data-reading-anchor],[id^="gen-"]{scroll-margin-top:calc(var(--top-h,0px) + 100px)}
@media(min-width:1200px) and (max-width:1599px){.car-grid{grid-template-columns:200px minmax(0,1fr) 300px;gap:24px}.car-main .gen{display:block}}
@media(max-width:700px){.subnav .wrap{column-gap:6px;row-gap:0}.subnav-sel{width:auto;margin-left:auto}.subnav .crumbs{display:none}.header-actions{gap:6px}.header{gap:6px}.header-left{flex-shrink:0}.lsel.big{max-width:100%}.lsel .k{letter-spacing:0;white-space:normal}.lsel.big .lsel-val{min-width:0}.cta{padding:20px}.gen{margin-left:24px;padding:14px}.gens::before{left:8px}.gen::before{left:-23px}.rail-l .gen-idx a{min-height:44px}}
@media(max-width:400px){.header{padding-inline:12px}.header-actions{width:100%;justify-content:space-between}.theme-seg{min-width:50px;padding-inline:5px}.lang-btn{padding-inline:4px}.subnav-sel .lsel{font-size:.875rem}.state-selector{gap:6px}.subnav .nb{width:40px;min-width:40px}.reading-notice .reading-more{white-space:normal}}
@media(max-height:500px){.header,.subnav{position:static}.rail{position:static;max-height:none}}

/* Long selected brands must fit the subnavigation at enlarged text sizes. */
.subnav-sel{flex-shrink:0}
.subnav-sel .lsel{min-width:0;max-width:100%}
.subnav-sel .lsel .lsel-val{min-width:0;flex:0 1 auto}
.subnav-sel .lsel .k{white-space:normal}

/* Visible Library search entry in both reading themes. */
.header .library-search-entry{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;background:#f7f9fc;color:#1a2950;border-color:#d8bd71;font-weight:700}