/* V3 homepage. Dark, image-led, rails. Mobile-first; no horizontal page
   scroll — only .rail-track scrolls sideways. */
@font-face{font-family:"Campione Serif";src:url("/fonts/CampioneNeueSerif-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Campione Serif";src:url("/fonts/CampioneNeueSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Campione Sans";src:url("/fonts/CampioneNeueSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Campione Sans";src:url("/fonts/CampioneNeueSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Campione Sans";src:url("/fonts/CampioneNeueSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Choplin";src:url("/fonts/Choplin-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Choplin";src:url("/fonts/Choplin-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Choplin";src:url("/fonts/Choplin-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Choplin";src:url("/fonts/Choplin-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#0b0b0d; --panel:#141417; --ink:#f2efe9; --dim:#9a958c;
  --line:#26262b; --acc:#e0592a;
  --display:"Campione Serif",georgia,serif;
  --sans:"Campione Sans",-apple-system,system-ui,sans-serif;
  --text:"Choplin",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body.v3{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* header */
/* flex-wrap keeps the six-item nav inside a 390px viewport (it min-content
   clamped the whole document to 443px otherwise); desktop fits one line and
   never wraps. */
.v3top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;position:sticky;top:0;z-index:5;background:linear-gradient(#0b0b0dee,#0b0b0dcc);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.v3-wordmark{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.04em}
.v3nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:13px;color:var(--dim)}
.v3nav a[aria-disabled="true"]{opacity:.45;cursor:default}
.v3nav a:not([aria-disabled]):hover{color:var(--ink)}

/* hero */
.hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.9)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b0b0d55 0%,#0b0b0d99 55%,var(--bg) 96%)}
.hero-body{padding:32px 16px 40px;max-width:720px}
.hero-kicker{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.hero-title{font-family:var(--display);font-weight:800;font-size:clamp(34px,9vw,64px);line-height:1.02;margin:0 0 8px}
.hero-sub{font-family:var(--sans);font-size:14px;color:var(--dim);margin:0 0 14px}
.hero-desc{max-width:56ch;margin:0 0 12px;color:#d8d4cc}
.hero-meta{font-family:var(--sans);font-size:13px;color:var(--dim);margin:0 0 20px}
.hero-play{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#111;font-family:var(--sans);font-weight:700;font-size:15px;padding:12px 22px;border-radius:6px}
.hero-play:hover{background:#fff}

/* rails */
.rails{padding:8px 0 24px}
.rail{margin:26px 0}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 16px;margin-bottom:10px}
.rail-head h2{font-family:var(--display);font-weight:800;font-size:22px;margin:0}
.rail-n{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--dim);margin-left:6px}
.rail-all{font-family:var(--sans);font-size:13px;color:var(--dim)}
.rail-all:hover{color:var(--ink)}
.rail-track{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.card{flex:0 0 168px;width:168px;min-width:0;scroll-snap-align:start}
.card-art{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.card-art img{width:100%;height:100%;object-fit:cover}
.card-idx{position:absolute;left:8px;bottom:8px;background:#0b0b0dd0;border:1px solid var(--line);border-radius:4px;font-family:var(--sans);font-weight:700;font-size:12px;padding:2px 7px}
.card:hover .card-art{border-color:var(--dim)}
/* typographic tile — used when the episode carries the generic show-logo art */
.card-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(160deg,#17171b,#101013);border-top:2px solid var(--ta,var(--acc))}
.tile-num{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;letter-spacing:.01em}
.tile-num b{font-weight:800;font-size:.6em;color:var(--ta,var(--acc));vertical-align:.12em;margin-right:1px}
.tile-word{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.1;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:0 10px;color:var(--ink)}
.card-tile .tile-word::after{content:"";display:block;width:26px;height:2px;background:var(--ta,var(--acc));margin:8px auto 0}
.card-name{display:block;margin-top:8px;font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{display:block;font-family:var(--sans);font-size:12px;color:var(--dim);margin-top:2px}

/* guests grid */
.guests{padding:24px 16px}
.guests-head h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,6vw,44px);margin:6px 0 4px}
.guests-sub{font-family:var(--sans);font-size:14px;color:var(--dim);margin:0 0 20px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px 12px}
.gcard{display:block;min-width:0}
.gtile{position:relative}
.tile-ini{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:.02em}
.gtile-n{position:absolute;left:8px;bottom:8px;background:#0b0b0dd0;border:1px solid var(--line);border-radius:4px;font-family:var(--sans);font-weight:700;font-size:12px;padding:2px 7px;color:var(--dim)}

.gphoto{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.gphoto img{width:100%;height:100%;object-fit:cover}
.gcard:hover .gphoto{border-color:var(--dim)}

/* guest page */
.guest-head.has-portrait{display:flex;gap:18px;align-items:center;margin-bottom:6px}
.guest-portrait{flex:0 0 108px;width:108px;height:108px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.guest-head-text{min-width:0}

.guest{padding:24px 16px;max-width:860px}
.guest-kicker{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:6px 0 6px}
.guest-head h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,7vw,52px);line-height:1.04;margin:0 0 4px}
.guest-sub{font-family:var(--sans);font-size:14px;color:var(--dim);margin:0 0 18px}
.grows{border-top:1px solid var(--line)}
.grow{display:flex;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line);min-width:0}
.grow-idx{flex:0 0 74px;font-family:var(--display);font-weight:800;font-size:20px;color:var(--ta,var(--acc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow-thumb{flex:0 0 74px}
.grow-thumb img{width:74px;height:74px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.grow-main{min-width:0;flex:1}
.grow-title{display:block;font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.grow-meta{display:block;font-family:var(--sans);font-size:12px;color:var(--dim);margin-top:3px}
.grow-play{flex:0 0 auto;color:var(--dim);font-size:12px}
.grow:hover .grow-play{color:var(--ink)}
.guest-back{padding:18px 0;font-family:var(--sans);font-size:14px}
.guest-back a{color:var(--dim)}
.guest-back a:hover{color:var(--ink)}

/* about */
.about{padding:24px 16px;max-width:860px}
.about-kicker,.partners-kicker{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:6px 0 6px}
.about-head h1,.partners-head h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,7vw,48px);line-height:1.05;margin:0 0 14px}
.about-story p{max-width:62ch;color:#d8d4cc;margin:0 0 14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:26px 0 8px}
.stat-n{display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,5vw,40px);line-height:1}
.stat-l{display:block;font-family:var(--sans);font-size:12px;color:var(--dim);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.stats-note{font-family:var(--sans);font-size:12px;color:var(--dim);margin:0 0 8px}

/* partners */
.partners{padding:24px 16px;max-width:860px}
.pwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:8px 0 26px}
.pwall-item{display:flex;align-items:center;justify-content:center;min-height:84px;background:var(--panel);border:1px solid var(--line);border-radius:8px;font-family:var(--sans);font-weight:700;font-size:15px;text-align:center;padding:12px}
.pwall-item:hover{border-color:var(--dim)}
.partners-cta{border-top:1px solid var(--line);margin-top:10px;padding:24px 0}
.partners-cta p{font-family:var(--sans);font-size:16px;margin:0 0 14px}
.cta-btn{display:inline-block;background:var(--ink);color:#111;font-family:var(--sans);font-weight:700;font-size:15px;padding:12px 22px;border-radius:6px}
.cta-btn:hover{background:#fff}

/* builds + projects */
.builds,.projects{padding:24px 16px;max-width:980px}
.sec-kicker{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:6px 0 6px}
.sec-head h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,7vw,48px);line-height:1.05;margin:0 0 6px}
.sec-sub{font-family:var(--sans);font-size:14px;color:var(--dim);margin:0 0 8px}
.feat{border-top:1px solid var(--line);padding:24px 0;display:flex;flex-direction:column;gap:16px}
.feat-art{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.feat-art img{width:100%;aspect-ratio:16/9;object-fit:cover}
.feat-art:hover{border-color:var(--dim)}
.feat-kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--acc);margin:0 0 4px}
.feat-body h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,5vw,34px);line-height:1.08;margin:0 0 4px}
.feat-bike{font-family:var(--sans);font-size:14px;color:var(--dim);margin:0 0 8px}
.feat-blurb{max-width:60ch;color:#d8d4cc;margin:0 0 12px}
.feat-vids{list-style:none;margin:0;padding:0}
.feat-vids li{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:14px}
.feat-vids a:hover{color:var(--acc)}
.fv-date{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap}
.psec{border-top:1px solid var(--line);padding:22px 0}
.psec h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,5vw,30px);margin:0 0 4px}
.psec-blurb{font-family:var(--sans);font-size:14px;color:var(--dim);margin:0 0 14px}
.pflag{display:block;margin:0 0 16px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.pflag img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pflag-body{display:flex;align-items:baseline;gap:12px;padding:12px 14px}
.pflag-title{font-family:var(--sans);font-weight:700;font-size:16px}
.pflag-date{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--dim);white-space:nowrap}
.pflag:hover{border-color:var(--dim)}
.prow{display:flex;align-items:baseline;gap:12px;padding:10px 2px;border-top:1px solid var(--line);font-family:var(--sans);font-size:15px}
.prow:hover .prow-title{color:var(--acc)}
.prow-date{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap}
.pseries .pparts{list-style:none;margin:0 0 6px;padding:0 0 0 22px}
.pparts li{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:14px;color:#d8d4cc}
.pparts a:hover{color:var(--acc)}
.pcoming{border:1px solid var(--ta,var(--acc));border-left-width:3px;border-radius:8px;background:var(--panel);padding:16px 18px;margin:14px 0}
.pcoming h3{font-family:var(--display);font-weight:800;font-size:20px;margin:0 0 4px}
.pcoming p{font-family:var(--sans);font-size:14px;color:var(--dim);margin:0}

/* jo project page */
.jopage{padding:24px 16px;max-width:980px}
.jop-h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,5vw,30px);margin:28px 0 12px}
.gallery{display:grid;grid-template-columns:1fr;gap:10px}
.gallery img{width:100%;border-radius:8px;border:1px solid var(--line)}

/* review strip */
.revs{border-top:1px solid var(--line);padding:30px 16px 34px}
.revs-head h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,5vw,32px);margin:0 0 16px}
.revs-grid{display:grid;grid-template-columns:1fr;gap:12px}
.rev{margin:0;background:linear-gradient(160deg,#17171b,#101013);border:1px solid var(--line);border-top:2px solid #d9a441;border-radius:10px;padding:20px 22px 18px}
.rev-stars{color:#d9a441;font-size:14px;letter-spacing:4px}
.rev blockquote{margin:10px 0 12px;font-family:var(--text);font-size:19px;line-height:1.5;color:var(--ink)}
.rev figcaption{font-family:var(--sans);font-size:13px;color:var(--dim)}

/* episode player — the V2 custom player, V3 palette */
.player{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:16px;align-items:center;padding:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:18px 0 4px}
.player.on{border-color:var(--dim)}
.player audio{grid-column:1/-1;width:100%}
.pl-play{width:52px;height:52px;border-radius:50%;border:0;background:var(--acc);color:#141208;cursor:pointer;display:grid;place-items:center;padding:0}
.pl-play:hover{filter:brightness(1.1)}
.pl-ico{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #141208;margin-left:3px}
.player.on .pl-ico{width:13px;height:15px;border:0;margin-left:0;background:#141208;-webkit-mask:linear-gradient(#000 0 0) 0 0/4px 100% no-repeat,linear-gradient(#000 0 0) 100% 0/4px 100% no-repeat;mask:linear-gradient(#000 0 0) 0 0/4px 100% no-repeat,linear-gradient(#000 0 0) 100% 0/4px 100% no-repeat}
.pl-back{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--dim);cursor:pointer;font-family:var(--sans);font-size:10px;line-height:1;letter-spacing:.02em}
.pl-back::before{content:'\21BA';display:block;font-size:13px;line-height:1;margin-bottom:1px}
.pl-back:hover{color:var(--acc);border-color:var(--acc)}
.pl-bar{min-width:0}
.pl-seek{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;margin:0;background:linear-gradient(var(--acc),var(--acc)) 0/var(--pct,0%) 100% no-repeat #2b2b33;cursor:pointer}
.pl-seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--acc);border:0;cursor:pointer}
.pl-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--acc);border:0;cursor:pointer}
.pl-seek:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.pl-times{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--sans);font-size:11px;line-height:1;letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums}

/* episode pages + archive */
.ep3,.archive3{padding:24px 16px;max-width:860px}
.ep3-meta{font-family:var(--sans);font-size:14px;color:var(--dim);margin:0 0 6px}
.ep3-guests{font-family:var(--sans);font-size:15px;margin:0 0 4px}
.ep3-guests a{color:var(--acc)}
.ep3-guests a:hover{text-decoration:underline;text-underline-offset:3px}
.ep3-listen{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 20px}
.ep3-listen a{font-family:var(--sans);font-weight:500;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--panel)}
.ep3-listen a:hover{border-color:var(--dim)}
.ep3-body p{max-width:64ch;color:#d8d4cc;margin:0 0 14px}
.ep3-sec{border-top:1px solid var(--line);padding:18px 0 6px;margin-top:8px}
.ep3-sec h2{font-family:var(--display);font-weight:800;font-size:22px;margin:0 0 10px}
.ep3-n{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--dim)}
.ep3-chaps{list-style:none;margin:0;padding:0}
.ep3-chaps li{display:flex;gap:14px;padding:6px 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:14px}
.ep3-t{color:var(--acc);font-weight:700;flex:0 0 64px;white-space:nowrap}
.ep3-l{color:#d8d4cc;min-width:0}
.ep3-links{list-style:none;margin:0;padding:0}
.ep3-links li{padding:7px 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:14px}
.ep3-links a{color:var(--ink)}
.ep3-links a:hover{color:var(--acc)}
.ep3-note{color:var(--dim);margin-left:8px;font-size:12px}
.ep3-nav{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:18px;padding:16px 0 0}
.ep3-nav a{min-width:0}
.ep3-later{text-align:right}
.ep3-nav-dir{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ep3-nav-name{display:block;font-family:var(--sans);font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep3-nav a:hover .ep3-nav-name{color:var(--acc)}
.ajump{display:flex;flex-wrap:wrap;gap:8px 14px;font-family:var(--sans);font-size:13px;color:var(--dim);padding:4px 0 14px}
.ajump a:hover{color:var(--ink)}
.agroup{border-top:1px solid var(--line);padding:18px 0 8px;scroll-margin-top:96px}
.agroup h2{font-family:var(--display);font-weight:800;font-size:24px;margin:0 0 8px}
.arow{display:flex;align-items:baseline;gap:14px;padding:9px 2px;border-top:1px solid var(--line);min-width:0}
.arow-idx{flex:0 0 64px;font-family:var(--display);font-weight:800;font-size:17px;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow-main{min-width:0;flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.arow-name{font-family:var(--sans);font-weight:500;font-size:15px;min-width:0}
.arow-meta{font-family:var(--sans);font-size:12px;color:var(--dim);white-space:nowrap}
.arow:hover .arow-name{color:var(--acc)}

/* platform strip */
.plat{border-top:1px solid var(--line);padding:28px 16px}
.plat h2{font-family:var(--display);font-weight:800;font-size:20px;margin:0 0 14px}
.plat-row{display:flex;flex-wrap:wrap;gap:10px}
.plat-row a{font-family:var(--sans);font-weight:500;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:9px 18px;background:var(--panel)}
.plat-row a:hover{border-color:var(--dim)}

/* footer */
.v3foot{border-top:1px solid var(--line);padding:26px 16px 40px;color:var(--dim);font-family:var(--sans);font-size:14px}
.v3foot p{margin:0 0 6px}
.v3foot a{text-decoration:underline;text-underline-offset:3px}

/* wider screens */
@media (min-width:760px){
  .v3nav{gap:18px;font-size:14px}
  .revs{padding-left:32px;padding-right:32px}
  .revs-grid{grid-template-columns:repeat(2,1fr);gap:16px;max-width:1216px}
  .rev blockquote{font-size:20px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .feat{flex-direction:row;align-items:flex-start}
  .feat-art{flex:0 0 46%}
  .feat-body{flex:1;min-width:0}
  .v3top{padding:16px 32px}
  .hero-body{padding:48px 32px 56px}
  .rail-head{padding:0 32px}
  .rail-track{padding:2px 32px 12px;gap:14px}
  .card{flex-basis:200px;width:200px}
  .plat,.v3foot{padding-left:32px;padding-right:32px}
  .guests,.guest,.about,.partners,.builds,.projects,.jopage,.ep3,.archive3{padding-left:32px;padding-right:32px}
  .about,.partners,.guest,.builds,.projects,.jopage,.ep3,.archive3{margin-inline:auto}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* ------------------------------------------------------------------
   build feature — the magazine spread. Mobile-first like the rest of
   this file; appended as its own block so no existing rule moves.
   Pierce's rhythm: full-width bike, narrow photo left, narrow photo
   right, full-width closer, article flowing through the gaps.
   ------------------------------------------------------------------ */
/* --measure is the reading column, and the three things aligned to it below all
   read it rather than repeating a number. The figure breakouts are derived from
   it too (see the min-width:1000px block), so widening the column cannot leave a
   float hanging off the page — which is what a hand-tuned pair would do. */
.mag{padding:20px 16px 10px;max-width:1180px;margin-inline:auto;--measure:680px}
.mag-head{padding:6px 0 20px;border-bottom:1px solid var(--line);margin-bottom:24px}
.mag-kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 12px}
.mag-title{font-family:var(--display);font-weight:800;font-size:clamp(40px,12.5vw,104px);line-height:.94;letter-spacing:-.01em;margin:0 0 16px}
.mag-stand{font-family:var(--sans);font-size:clamp(16px,4.2vw,21px);line-height:1.45;color:#d8d4cc;max-width:42ch;margin:0}

.mag-body{max-width:var(--measure);margin-inline:auto}
.mag-body>p{color:#d8d4cc;font-size:17px;line-height:1.66;margin:0 0 17px}
/* Drop cap on the opening paragraph only — the one print tell that costs
   nothing and reads as a feature rather than a blog post. */
.mag-body:first-of-type>p:first-of-type::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:62px;line-height:.8;padding:6px 11px 0 0;color:var(--acc)}
.mag-h2{clear:both;font-family:var(--display);font-weight:800;font-size:clamp(23px,6.2vw,34px);letter-spacing:.02em;margin:36px 0 15px;padding-top:20px;border-top:1px solid var(--line)}
/* clear:both for the same reason .mag-h2 above has it: a rule down the left is a
   promise that the block starts at the column edge, and a pull quote that wraps
   beside a float breaks that promise — the bar stays at the edge while the first
   line is pushed 179px right, and it reads as a broken element rather than as
   text flowing round a photo. It went unnoticed at a 680 column only because the
   copy ran long enough to push every quote clear of its float by accident; the
   wider column is fewer lines, so quote 2 rides up into the #VOTEFORGYPSY float.
   Costs 9px above quote 2 and 39px above quote 3 at 1440, and nothing anywhere
   else — measured at 1000, 1280 and 1440 on all four. */
.mag-quote{clear:both;margin:28px 0;padding:2px 0 2px 18px;border-left:3px solid var(--acc)}
.mag-quote p{font-family:var(--display);font-weight:800;font-size:clamp(23px,6.4vw,33px);line-height:1.18;color:var(--ink);margin:0}

/* photos — angle and black frame come from the file; the tilt is eased off
   on a phone, where a full-width rotation only costs height. */
.mag-fig{margin:30px 0}
.mag-fig img{width:100%;height:auto;transform:rotate(calc(var(--rot) * .4))}
.mag-fig figcaption{font-family:var(--sans);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-top:12px}

/* the shoppable bike */
.mag-shop{margin:0 0 6px}
.mag-shot{margin:0}
.mag-shot-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.mag-shot-in{position:relative;width:220%}
.mag-shot-in>img{width:100%;height:auto}
.mag-swipe{font-family:var(--sans);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin:9px 0 0}
.mag-pin{position:absolute;transform:translate(-50%,-50%)}
.mag-dot{position:relative;width:26px;height:26px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--acc);color:#fff;font-family:var(--sans);font-weight:700;font-size:12px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 9px #000a}
/* the visible dot is 26px; the thumb target is 48px */
.mag-dot::after{content:"";position:absolute;inset:-11px;border-radius:50%}
.mag-dot:hover,.mag-pin.lit .mag-dot,.mag-pin.on .mag-dot{background:#fff;color:#141208}
.mag-dot:focus-visible{outline:2px solid #fff;outline-offset:4px}
.mag-tip{display:none}

/* The listing card. One rule set for both places it appears: the hover popover
   at >=760px and the clone in the caption bar below it on a phone — the script
   clones the built card rather than rebuilding a summary, so there is one card
   to style and one to get right. NO price line: it is not in the data.
   The photo is MotoSport's own CDN, declared 900x900 (all eleven measured), so
   the lazily-loaded image reserves its box instead of reflowing the card. */
.mag-card{display:flex;gap:13px;align-items:flex-start;font-family:var(--sans);text-align:left}
.mag-card-img{flex:0 0 78px;width:78px;height:78px;object-fit:contain;background:#fff;border-radius:6px}
.mag-card-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.mag-card-brand{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
/* The price is the thing being scanned for, so it outranks the name it sits
   under. Frozen at build time, never fetched -- see the note in the renderer. */
.mag-card-price{font-size:16px;font-weight:800;color:var(--ink);line-height:1.1}
.mag-card-rate{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* Fractional stars with no image and no dependency: one grey row of five, one
   accent row clipped to the rating, both from the same glyphs so they align. */
.mag-stars{position:relative;display:inline-block;font-size:12px;line-height:1;letter-spacing:1.5px;color:#4a463c}
.mag-stars::before{content:"\2605\2605\2605\2605\2605"}
.mag-stars::after{content:"\2605\2605\2605\2605\2605";position:absolute;left:0;top:0;width:var(--pct);overflow:hidden;white-space:nowrap;color:var(--acc)}
.mag-card-score{font-size:12px;font-weight:700}
.mag-card-revs{font-size:11px;color:var(--dim)}
.mag-card-stock{font-size:11px;font-weight:600;color:#7fc98a}
.mag-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.mag-caption{display:none}
.mag-caption.has{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:13px 0 0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px}
/* The card brings its own layout, so the bar stops being a flex row of scraps. */
.mag-caption.has.is-card{display:block}
.mag-caption.is-card .mag-card-img{flex-basis:84px;width:84px;height:84px}
.mag-caption.is-card .mag-tip-name{display:block;font-weight:700;font-size:15px;line-height:1.3}
.mag-caption.is-card .mag-tip-go{display:inline-block;margin-top:3px;font-size:14px;color:var(--acc)}
.mag-cap-name{font-family:var(--sans);font-weight:700;font-size:15px}
.mag-cap-go{font-family:var(--sans);font-size:14px;color:var(--acc);margin-left:auto;white-space:nowrap}

.mag-shop-h{font-family:var(--display);font-weight:800;font-size:clamp(22px,5.6vw,30px);margin:28px 0 5px}
.mag-shop-n{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--dim)}
.mag-shop-sub{font-family:var(--sans);font-size:14px;color:var(--dim);max-width:54ch;margin:0 0 14px}
.mag-parts{list-style:none;margin:0;padding:0}
.mag-part{display:flex;align-items:center;gap:13px;min-height:52px;padding:8px 4px;border-top:1px solid var(--line);font-family:var(--sans)}
.mag-parts li:last-child .mag-part{border-bottom:1px solid var(--line)}
.mag-num{flex:0 0 26px;height:26px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--dim);font-weight:700;font-size:12px;display:grid;place-items:center}
.mag-pname{font-weight:500;font-size:15px;min-width:0}
.mag-pwhere{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap}
.mag-part:hover .mag-pname,.mag-part.on .mag-pname{color:var(--acc)}
.mag-part:hover .mag-num,.mag-part.on .mag-num{background:var(--acc);border-color:var(--acc);color:#141208}

.mag-watch{clear:both;max-width:var(--measure);margin:40px auto 0}
.mag-watch .mag-h2{margin-top:0}
.mag .guest-back{clear:both;max-width:var(--measure);margin-inline:auto}

@media (min-width:760px){
  .mag{padding-left:32px;padding-right:32px}
  .mag-shot-scroll{overflow:visible}
  .mag-shot-in{width:100%}
  .mag-swipe{display:none}
  .mag-caption.has{display:none}
  .mag-pin.on .mag-tip{display:block;position:absolute;left:50%;top:calc(100% + 13px);transform:translateX(-50%);z-index:3;width:232px;padding:12px 14px;background:var(--panel);border:1px solid var(--dim);border-radius:8px;box-shadow:0 12px 34px #000b}
  .mag-tip-name{display:block;font-family:var(--sans);font-weight:700;font-size:14px;line-height:1.3;margin-bottom:8px}
  .mag-tip-go{font-family:var(--sans);font-size:13px;color:var(--acc)}
  .mag-tip-go:hover{text-decoration:underline;text-underline-offset:3px}
  /* A card needs more room than the old two-line tip. The renderer marks which
     kind of tip it built, so the width is a class rather than a guess at the
     content. The name drops its bottom margin — .mag-card-body owns the spacing. */
  .mag-tip-card{width:266px}
  .mag-card .mag-tip-name{margin-bottom:0;font-size:13px}

  /* HOVER BRIDGE. The card sits 13px clear of the dot, and that clearance is
     dead surface: crossing it drops .mag-pin:hover, which display:none's the
     card — and because the thing you were walking towards stops existing, the
     hover cannot come back by arriving on it. Measured at 1440 before the fix:
     every approach angle failed, straight down included, and none recovered.

     The bridge is a child box of .mag-tip, so hovering it keeps the ancestor
     hovered. No JS, no timer, nothing that can leave a card stuck open.

     IT STARTS AT THE DOT'S CENTRE, not at the card's edge, and that is the whole
     trick. A bridge filling only the 13px gap fixes the straight-down path and
     nothing else, because a pointer moving diagonally leaves the dot's ROUND
     48px hit area well above the gap — measured, 13px of bridge rescued 3 of 15
     approach paths and 26px rescued 15 of 15.

     IT IS CLIPPED TO A TRAPEZOID, from the width of the dot's hit area out to
     the card's width, and the clip is load-bearing rather than tidiness: the
     same 26px bridge left square is 266px of invisible surface lying across the
     neighbouring pins, and measured, it blocks hovering 1, 2 and 5 from each
     other. Trapezoid: none blocked. The width arrives lower than the
     neighbouring dots reach, which is why it clears them.

     THE DOT IS LIFTED ABOVE IT. The bridge covers the dot's lower half, and
     without this the bottom of the dot stops taking clicks and stops lighting on
     hover — measured both. */
  .mag-tip::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px;
    clip-path:polygon(calc(50% - 24px) 0,calc(50% + 24px) 0,100% 100%,0 100%)}
  .mag-dot{z-index:5}
}

/* Jase asked for hover and the pins were click-only. Hover opens the card on a
   pointer device, and :focus-within does the same for the keyboard so tabbing to
   a dot shows what hovering it would. Gated on (hover:hover) so a touch device
   cannot get a card stuck open by a tap that also registers as a hover — there
   the click handler and the caption bar stay the whole interaction. The open
   pin is lifted so its card sits over the neighbouring dots. */
@media (min-width:760px) and (hover:hover){
  .mag-pin:hover,.mag-pin:focus-within{z-index:4}
  .mag-pin:hover .mag-tip,.mag-pin:focus-within .mag-tip{display:block;position:absolute;left:50%;top:calc(100% + 13px);transform:translateX(-50%);z-index:4;width:232px;padding:12px 14px;background:var(--panel);border:1px solid var(--dim);border-radius:8px;box-shadow:0 12px 34px #000b}
  .mag-pin:hover .mag-tip-card,.mag-pin:focus-within .mag-tip-card{width:266px}
}

@media (min-width:1000px){
  .mag-body>p{font-size:18px}
  .mag-fig img{transform:rotate(var(--rot))}
  /* The wider column Jase asked for, and the breakouts derived from it so the
     two cannot drift apart. --slack is what is actually free beside the column:
     .mag is min(100vw,1180px) wide, the column takes --measure out of the
     middle, and half of what is left — less a 16px gutter — is how far a figure
     can hang before it is off the screen. The caps keep the original 180/140
     look wherever there is room for it.

     This is not tidiness. At 680 the floats ALREADY hung 20px off the left of a
     1000px-wide window, scrolling the page sideways by 27px, and at 820 with the
     literals left alone that becomes 97px. Derived, the measured overflow is
     zero at every width from 390 to 1600. */
  .mag{--measure:820px;
       --slack:calc((min(100vw,1180px) - var(--measure)) / 2 - 16px);
       --breakout:min(180px,var(--slack));
       --breakout-full:min(140px,var(--slack))}
  .mag-fig-left{float:left;width:322px;margin:12px 42px 30px calc(-1 * var(--breakout))}
  .mag-fig-right{float:right;width:322px;margin:12px calc(-1 * var(--breakout)) 30px 42px}
  .mag-fig-full{clear:both;margin-inline:calc(-1 * var(--breakout-full))}
  .mag-parts{columns:2;column-gap:44px}
  .mag-parts li{break-inside:avoid}
}