/* Journal and Offers and new models. Uses the shared theme tokens, so light and dark follow the site. */
.jr{gap:32px}
.jr .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jr-head{display:grid;gap:10px;padding-bottom:4px}
.jr-head h1{font-size:clamp(2.3rem,6vw,3.8rem)}
.jr-lede{max-width:62ch;font-size:1rem;line-height:1.6}

/* topic tabs and filters */
.jr-controls{display:grid;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0 12px;background:var(--asphalt)}
@media (min-width:641px){.jr-controls{position:sticky;top:var(--hdr-h,72px);z-index:5}}
.jtabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
.jtabs::-webkit-scrollbar{display:none}
.jtab{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--smoke);font-size:.88rem;font-weight:600;cursor:pointer;white-space:nowrap}
.jtab:hover{color:var(--chalk);background:var(--pit2)}
.jtab.on{background:var(--chalk);color:var(--asphalt)}
.jtab-n{font-size:.7rem;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums}
.jr-filter{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jsel select{appearance:none;-webkit-appearance:none;min-height:40px;border:1px solid var(--line);border-radius:999px;background:var(--pit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23889089' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding:8px 38px 8px 16px;font-size:.88rem;font-weight:600;color:var(--chalk);cursor:pointer;max-width:100%}
.jsel select:hover{border-color:var(--smoke)}
.jr-filter .muted.small{margin-right:auto}

/* the cover: drawn when there is no real image, sits under the image when there is one */
.jcover{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:14px 16px;color:#F4F1EA;--c:#2C3833;
 background:radial-gradient(130% 110% at 100% 0%,color-mix(in srgb,var(--c) 78%,#fff 22%) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 70%,#000 30%) 100%)}
.jcover::after{content:"";position:absolute;right:-18%;bottom:-38%;width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;
 background:repeating-conic-gradient(from 200deg,rgba(255,255,255,.22) 0 1.2deg,transparent 1.2deg 9deg);
 -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 83%,#000 96%,transparent 97%);mask:radial-gradient(closest-side,transparent 82%,#000 83%,#000 96%,transparent 97%);opacity:.55}
.jcover[data-hue="green"]{--c:#2F5A44}.jcover[data-hue="blue"]{--c:#334C78}.jcover[data-hue="red"]{--c:#82302A}.jcover[data-hue="teal"]{--c:#25615A}
.jcover[data-hue="tan"]{--c:#76582F}.jcover[data-hue="slate"]{--c:#434B54}.jcover[data-hue="ink"]{--c:#28322E}
.jcover .nv-kind{font-family:var(--body);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.8;align-self:start;position:relative;z-index:1}
.jcover .nv-brand{align-self:end;font-family:var(--display);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.05;max-width:88%;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;position:relative;z-index:1}
.jcover .nv-brand.long{font-size:clamp(1.15rem,2.4vw,1.5rem)}
.jcover .nv-fig{position:absolute;right:16px;top:12px;font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.1rem);z-index:1}
.jcover .nv-fig small{font-family:var(--body);font-weight:700}
.jc-rule{display:block;width:28px;height:3px;border-radius:2px;background:#E25B4A;margin-top:10px;position:relative;z-index:1}
.nv>img{z-index:2}
.nv .nv-credit{z-index:3}

/* lead story and top stories */
.jtop{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:36px;align-items:start}
.jlead{display:grid;gap:18px;min-width:0}
.jlead-v{display:block;border-radius:6px;overflow:hidden}
.jlead-v .nv{aspect-ratio:16/9}
.jlead-v .jcover .nv-brand{font-size:clamp(2rem,5vw,3.4rem)}
.jlead-b{display:grid;gap:10px;min-width:0}
.jlead-t{font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.12}
.jlead-t a{text-decoration:none}
.jlead-t a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.jlead-s{color:var(--smoke);font-size:1rem;line-height:1.6;max-width:68ch;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.jlead-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.jc-also{font-size:.8rem;color:var(--dim)}
.jtop-list{display:grid;align-content:start;min-width:0}
.jmini-h{font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);padding-bottom:12px;border-bottom:1px solid var(--chalk)}
.jrow{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
.jrow .nv{order:2;aspect-ratio:4/3;border-radius:4px}
.jrow .jcover{padding:8px 10px}
.jrow .jcover .nv-kind,.jrow .jcover .nv-fig{display:none}
.jrow .jcover .nv-brand{font-size:1rem;-webkit-line-clamp:2}
.jrow .jc-rule{width:18px;height:2px;margin-top:6px}
.jrow-b{display:grid;gap:6px;min-width:0}
.jrow-t{font-weight:600;font-size:.98rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jrow:hover .jrow-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* card grid */
.jsec{display:grid;gap:18px}
.jsec-h{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--chalk);padding-bottom:10px}
.jsec-h h2{font-size:clamp(1.5rem,3vw,2rem)}
.jsec-link{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--brass)}
.jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:32px 24px}
.jc{display:grid;grid-template-rows:auto 1fr;gap:12px;text-decoration:none;color:inherit;min-width:0}
.jc .nv{aspect-ratio:3/2;border-radius:4px}
.jc .nv img{transition:transform .5s ease}
.jc:hover .nv img{transform:scale(1.03)}
.jc-b{display:grid;gap:7px;align-content:start;min-width:0}
.jc-k{display:flex;gap:8px;align-items:center;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.jc-loc{color:var(--dim);font-weight:600}
.jc-loc::before{content:"·";margin-right:8px;color:var(--line)}
.jc-t{font-weight:600;font-size:1.02rem;line-height:1.35;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jc:hover .jc-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.jc-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem;color:var(--dim)}
.jc-src{font-weight:600;color:var(--smoke)}
.jc-dot{color:var(--line)}
.jmore{justify-self:center;margin-top:6px}
.jempty{display:grid;gap:8px}

/* newsstand */
.jpubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 24px}
.jpub{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.jpub b{font-weight:600}
.jpub .muted{grid-column:1}
.jpub-r{grid-row:1;grid-column:2;font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--dim)}
.jpub:hover b{text-decoration:underline;text-underline-offset:3px}

/* home strips use the same cover */
.ncard2 .nv .jcover .nv-brand{font-size:clamp(1.3rem,2.6vw,1.6rem)}

@media (max-width:980px){
 .jtop{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
 .jr{gap:24px}
 .jr-head h1{font-size:2.3rem}
 .jr-lede{font-size:.95rem}
 .jr-controls{margin:0 -16px;padding:8px 16px 10px}
 .jtabs{margin:0 -16px;padding:0 16px}
 .jtab{min-height:38px;padding:7px 12px;font-size:.85rem}
 .jsel select{min-height:38px;font-size:.85rem}
 .jlead-v{margin:0 -16px;border-radius:0}
 .jlead-t{font-size:1.6rem}
 .jlead-s{font-size:.95rem;-webkit-line-clamp:3}
 .jrow{grid-template-columns:minmax(0,1fr) 96px;padding:14px 0}
 .jgrid{grid-template-columns:1fr;gap:0}
 .jgrid .jc{grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:none;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
 .jgrid .jc .nv{order:2;aspect-ratio:4/3}
 .jgrid .jc .jcover{padding:8px 10px}
 .jgrid .jc .jcover .nv-kind,.jgrid .jc .jcover .nv-fig{display:none}
 .jgrid .jc .jcover .nv-brand{font-size:1rem}
 .jgrid .jc .jc-rule{width:18px;height:2px;margin-top:6px}
 .jgrid .jc-t{font-size:.98rem}
 .jpubs{grid-template-columns:1fr}
}
:root[data-theme="dark"] .jcover{color:#EFEBE2}
:root[data-theme="dark"] .jc-rule{background:#F07A69}
@media (prefers-reduced-motion:reduce){.jc .nv img{transition:none}}

/* ---------- Offers and new models ---------- */
.opage{gap:28px}
.oc-controls{gap:10px}
.obrands{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px 2px}
.obrands::-webkit-scrollbar{display:none}
.ob{flex:none;min-height:34px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--smoke);font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap}
.ob:hover{border-color:var(--smoke);color:var(--chalk)}
.ob.on{border-color:var(--brass);color:var(--brass);background:color-mix(in srgb,var(--brass) 9%,transparent)}
.oclear{justify-self:start}
.osec{gap:16px}

/* typographic card: brand, model and figure, drawn when the official page has no share image */
.ov{background:var(--pit2)}
.ot{--t:var(--brass);position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:6px;padding:14px 16px;overflow:hidden;color:var(--chalk);
 background:linear-gradient(155deg,color-mix(in srgb,var(--t) 13%,var(--pit)) 0%,color-mix(in srgb,var(--t) 5%,var(--pit2)) 100%);border-bottom:3px solid var(--t)}
.ot[data-tone="launch"]{--t:var(--sky)}
.ot[data-tone="event"]{--t:var(--amber)}
.ot-mono{position:absolute;right:-.06em;bottom:-.3em;font-family:var(--display);font-size:11rem;line-height:1;color:var(--t);opacity:.09;pointer-events:none;user-select:none}
.ot-k{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t)}
.ot-fig{align-self:center;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;position:relative}
.ot-fig small{flex-basis:100%;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.ot-fig b{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.2vw,2.7rem);line-height:1;letter-spacing:-.03em}
.ot-fig em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--smoke)}
.ot-b{display:grid;gap:1px;position:relative;min-width:0}
.ot-b b{font-family:var(--display);font-weight:500;font-size:1.35rem;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-b b.long{font-size:1.1rem}
.ot-b span{font-size:.8rem;font-weight:600;color:var(--smoke);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* cards */
.ogrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.oc{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--pit);text-decoration:none;color:inherit;min-width:0;transition:border-color .2s ease}
.oc:hover{border-color:var(--smoke)}
.oc:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.oc .nv{aspect-ratio:16/9}
.oc .nv img{transition:transform .5s ease}
.oc:hover .nv img{transform:scale(1.03)}
.oc-b{display:grid;gap:7px;align-content:start;padding:14px 16px 14px;min-width:0}
.oc-k{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.oc-brand{color:var(--brass)}
.oc-type{color:var(--dim);font-weight:600}
.oc-type::before{content:"·";margin-right:8px;color:var(--line)}
.oc-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;line-height:1.1}
.oc-fig small{font-size:.74rem;font-weight:700;color:var(--smoke)}
.oc-fig b{font-family:var(--display);font-weight:500;font-size:1.7rem;letter-spacing:-.03em}
.oc-fig em{font-style:normal;font-size:.84rem;font-weight:700;color:var(--smoke)}
.oc:not(.has-img) .oc-fig{display:none}
.oc-t{font-weight:600;font-size:.98rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oc:hover .oc-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.oc-s{font-size:.84rem;color:var(--smoke);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oc-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;padding-top:10px;border-top:1px solid var(--line);font-size:.78rem}
.oc-end{font-weight:600;color:var(--smoke)}
.oc-end.soon{color:var(--amber)}
.oc-end.open{font-weight:500;color:var(--dim)}
.oc-src{margin-left:auto;display:inline-flex;align-items:center;gap:3px;color:var(--dim);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-src svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.oc:hover .oc-src{color:var(--brass)}

/* the strongest offers: one large card and two beside it */
.ofeat{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (min-width:900px){
 .ofeat.n3{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto}
 .ofeat.n3 .oc:first-child{grid-row:span 2}
 .ofeat.n3 .oc:first-child .nv{aspect-ratio:auto;min-height:280px}
 .ofeat.n3 .oc:not(:first-child){grid-template-rows:none;grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
 .ofeat.n3 .oc:not(:first-child) .nv{aspect-ratio:auto;min-height:100%}
 .ofeat.n3 .oc:not(:first-child) .oc-s{display:none}
 .ofeat.n2{grid-template-columns:1fr 1fr}
}
.oc-feat .oc-fig b{font-size:2.2rem}
.oc-feat .ot-fig b{font-size:clamp(2.4rem,5vw,3.6rem)}
.oc-feat .ot-b b{font-size:clamp(1.4rem,2.6vw,2rem);white-space:normal}
.oc-feat .ot-b span{font-size:.92rem}
.ofeat .oc:first-child .oc-t{font-size:1.15rem}

/* ending soon */
.oends{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 24px}
.oend{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.oend-d{display:grid;justify-items:center;align-content:center;min-height:56px;border-radius:8px;border:1px solid var(--line);background:var(--pit2)}
.oend-d b{font-family:var(--display);font-weight:500;font-size:1.45rem;line-height:1}
.oend-d small{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.oend-d.soon{border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
.oend-d.soon b{color:var(--amber)}
.oend-b{display:grid;gap:3px;min-width:0}
.oend-f{color:var(--chalk);letter-spacing:.04em}
.oend-t{font-size:.9rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oend:hover .oend-t{text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
 .opage{gap:22px}
 .obrands{margin:0 -16px;padding:0 16px 2px}
 .ob{min-height:38px}
 .ogrid2,.ofeat{grid-template-columns:1fr;gap:14px}
 .ogrid2 .oc{grid-template-rows:none;grid-template-columns:minmax(0,1fr) 116px;border-radius:8px}
 .ogrid2 .oc .nv{order:2;aspect-ratio:auto;min-height:100%;border-left:1px solid var(--line)}
 .ogrid2 .oc .oc-b{padding:12px 14px}
 .ogrid2 .ot{padding:10px;grid-template-rows:1fr auto}
 .ogrid2 .ot-k,.ogrid2 .ot-mono{display:none}
 .ogrid2 .ot-fig b{font-size:1.45rem}
 .ogrid2 .ot-fig small{font-size:.56rem}
 .ogrid2 .ot-fig em{font-size:.7rem}
 .ogrid2 .ot-b b{font-size:1rem}
 .ogrid2 .ot-b span{font-size:.7rem}
 .ogrid2 .oc-s{-webkit-line-clamp:2;font-size:.8rem}
 .ogrid2 .oc-src{display:none}
 .oc-fig b{font-size:1.4rem}
 .oc-feat .oc-fig b{font-size:1.9rem}
 .oends{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.oc .nv img{transition:none}}
@media (min-width:900px){.ofeat.n3 .oc:not(:first-child) .ot-fig b{font-size:2.1rem}.ofeat.n3 .oc:not(:first-child) .oc-t{-webkit-line-clamp:3}}
