/* GENERATED from config/tokens.yaml by af/tokens.py - do not edit */
:root{
  --c-bg:#f6f5f4;
  --c-paper:#ffffff;
  --c-ink:#171514;
  --c-ink2:#272423;
  --c-slate:#625d5b;
  --c-muted:#6c6663;
  --c-line:#e1dedd;
  --c-line2:#c8c3c1;
  --c-chip:#ebe9e8;
  --c-onink:#bbb6b4;
  --c-eyebrow-dark:#e2e0de;
  --c-band-text:#f2f1f0;
  --c-brand:#c02017;
  --c-brand-dk:#9d1a13;
  --c-brand-fill:#ff4d3d;
  --c-brand-fill-ink:#171514;
  --c-brand-fill-hover:#e84739;
  --c-brand-on-dark:#ff8d80;
  --c-brand-tint:#ffe6e4;
  --c-logo:#c02017;
  --c-logo-mark:transparent;
  --c-focus:#c02017;
  --c-focus-ring:rgba(255,77,61,.55);
  --c-link-line:#c02017;
  --c-glow:rgba(255,141,128,.11);
  --c-note:#1c1a17;
  --c-note-dark:#f3efe9;
  --c-hl:#ffe14a;
  --c-hl-a:rgba(255,225,74,.6);
  --c-ramp-lo:#e4e3e2;
  --c-acc:#0f8a5c;
  --c-acc-dark:#5fe0a9;
  --c-ink-rgb:23,21,20;
  --c-thr:#625d5b;
  --c-thr-ink:#ffffff;
  --c-fam:#2f7d52;
  --c-neutral-h:20;
  --c-neutral-s-hi:0.1;
  --c-neutral-s-mid:0.04;
  --c-neutral-s-lo:0.06;
  --t-font-display:"Mona Sans",system-ui,sans-serif;
  --t-font-body:"Onest",system-ui,sans-serif;
  --t-font-note:"Caveat",cursive;
  --t-wide:122%;
  --r-card:12px;
  --r-inner:8px;
  --r-control:999px;
  --s-xs:4px;
  --s-sm:8px;
  --s-md:16px;
  --s-lg:32px;
  --score-high:#4b4745;
  --score-mid:#8f8a88;
  --score-low:#cfcdcc;
  --score-red-hue-max:12;
  --score-red-hue-min:340;
  --score-red-sat-cap:0.4;
  --score-red-light-cap:0.38;
  --score-mid-sat:0.55;
  --score-mid-light:0.6;
  --score-low-sat:0.26;
  --score-low-light:0.7;
  --tsh-photo:0 0 2px rgba(10,9,8,.9),0 1px 4px rgba(10,9,8,.75),0 2px 18px rgba(10,9,8,.6);
  --tsh-photo-sm:0 0 2px rgba(10,9,8,.9),0 1px 6px rgba(10,9,8,.85),0 1px 12px rgba(10,9,8,.6);
}

/* GENERATED once by tools/make_css.py from the r18 hand CSS; edit by hand from here on. Ride paint arrives
   as --pN per page (af/paint.py), the site palette as --c-* (config/tokens.yaml). */

/* ---- template CSS (GEN-10302 v15) ---- */

:root{
  --ink:var(--c-ink); --plum:rgb(var(--p0)); --plum-lt:rgb(var(--p1));
  --ember:rgb(var(--p2)); --ember-lt:rgb(var(--p3));
  --cream:var(--c-bg); --paper:#ffffff; --line:var(--c-line);
  --muted:var(--c-slate); --muted-2:var(--c-muted);
  --shadow:0 1px 2px rgba(23,21,20,.04),0 8px 24px -12px rgba(23,21,20,.18);
  --shadow-lg:0 2px 4px rgba(23,21,20,.05),0 24px 60px -24px rgba(23,21,20,.35);
  --heroh:calc(100svh + 52px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{margin:0;background:var(--cream);color:var(--ink);overflow-x:hidden;
  font:400 16px/1.55 Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;letter-spacing:-.025em;margin:0}
p{margin:0}
ul{padding:0;margin:0}
img{max-width:100%}
a{color:inherit}
button{font:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- site chrome ---------- */
.brand{font-family:"Mona Sans",sans-serif;font-weight:700;font-size:17px;letter-spacing:-.03em;text-decoration:none}
.brand b{color:var(--ember-lt)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);isolation:isolate;
  display:flex;flex-direction:column;min-height:var(--heroh)}
.hero .bg{position:absolute;inset:0;z-index:0;
  background:none center 42%/cover no-repeat}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(17,16,15,.72) 0%,rgba(19,17,16,.40) 24%,rgba(17,16,15,.46) 52%,rgba(14,13,12,.58) 76%,rgba(13,12,11,.66) 100%)}
.hero .inner{position:relative;z-index:2;flex:none;width:100%;max-width:1120px;margin:0 auto;padding:22px 18px 0;color:#ffffff}
.heroq{position:relative;z-index:2;flex:none;width:100%;max-width:1120px;margin:auto auto 0;padding:0 18px}
.eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--p4));font-weight:700}
.hero h1{font-size:clamp(44px,13vw,92px);line-height:.9;margin:8px 0 0;letter-spacing:-.05em}
.say{margin:12px 0 0;max-width:42ch;font-family:"Mona Sans",Onest,sans-serif;font-weight:500;
  font-size:clamp(15.5px,4.2vw,21px);line-height:1.3;letter-spacing:-.015em;color:#ffffff}
.say b{color:var(--ember-lt);font-weight:700}
.credit{margin:12px 0 0;font-size:10.5px;color:rgba(255,255,255,.82);text-shadow:var(--tsh-photo-sm)}
.credit a{color:rgba(255,255,255,.88)}

/* ---------- the fit questions: they begin on the image and run past the fold ---------- */
.fitband{background:var(--cream);border-bottom:1px solid var(--line)}
.fitband .in{max-width:1120px;margin:0 auto;padding:0 18px 18px}
.fitlist{list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden}
.fq{display:grid;grid-template-columns:1fr auto 10px;gap:7px;align-items:center;width:100%;
  border-top:1px solid var(--line);padding:11px;text-decoration:none;color:inherit;transition:background .15s}
.fq:after{content:"\203A";font-size:18px;line-height:1;font-weight:700;color:var(--muted-2);justify-self:end;
  transform:translateY(-1px);transition:.15s}
.fitlist li:first-child .fq{border-top:0}
@media (hover:hover){.fq:hover{background:var(--c-paper)}}
.fq:hover:after{color:var(--ember-ink);transform:translate(2px,-1px)}
.fq:focus-visible{outline:3px solid var(--ember);outline-offset:-3px}
.fqq{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:14px;line-height:1.24}
.fqa{display:grid;grid-template-columns:37px 1fr;align-items:center;gap:7px;justify-self:end;width:141px}
.fqa .ans{font-size:12.5px;text-align:left}

/* the rows that sit on the photograph */
.heroq .fitlist{background:rgba(11,10,9,.52);border-color:rgba(255,255,255,.2);border-bottom:0;
  border-radius:12px 14px 0 0;box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.heroq .fq{border-top-color:rgba(255,255,255,.17);color:#ffffff}
.heroq .fqq{color:#ffffff;text-shadow:var(--tsh-photo)}
@media (hover:hover){.heroq .fq:hover{background:rgba(255,255,255,.09)}}
.heroq .fq:after{color:rgba(255,255,255,.6)}
.heroq .fq:hover:after{color:rgb(var(--p5))}
.heroq .fq:focus-visible{outline-color:rgb(var(--p5))}
.heroq .gauge i{background:rgba(255,255,255,.26)}
.heroq .gauge.v5 i:nth-child(-n+5),.heroq .gauge.v4 i:nth-child(-n+4){background:rgb(var(--p5))}
.heroq .gauge.v3 i:nth-child(-n+3){background:#ffffff}
.heroq .gauge.v2 i:nth-child(-n+2),.heroq .gauge.v1 i:nth-child(-n+1){background:rgb(var(--p6))}
.heroq .ans{text-shadow:var(--tsh-photo)}
.heroq .ans.v5,.heroq .ans.v4{color:rgb(var(--p5))}
.heroq .ans.v3{color:#ffffff}
.heroq .ans.v2,.heroq .ans.v1{color:rgb(var(--p6))}
/* the list carries on below the image, on the page background */
.fitband .fitlist{border-top:0;border-radius:0 0 14px 14px}

/* ---------- the gauge, one pattern at two sizes ---------- */
.gauge{display:inline-flex;align-items:center;gap:3px;flex:none}
.gauge i{display:block;width:6px;height:14px;border-radius:2px;background:var(--c-line)}
.gauge.lg{gap:4px}
.gauge.lg i{width:10px;height:22px;border-radius:3px}
.gauge.v5 i:nth-child(-n+5),.gauge.v4 i:nth-child(-n+4){background:var(--ember)}
.gauge.v3 i:nth-child(-n+3){background:var(--plum-lt)}
.gauge.v2 i:nth-child(-n+2),.gauge.v1 i:nth-child(-n+1){background:var(--plum)}
.ans{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:17px;line-height:1.08;text-align:right}
.ans.v5,.ans.v4{color:var(--ember-ink)}
.ans.v3{color:var(--plum-lt)}
.ans.v2,.ans.v1{color:var(--plum)}

/* ---------- jump nav ---------- */
.jump{position:sticky;top:0;z-index:55;background:rgba(246,245,244,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.jump .in{max-width:1120px;margin:0 auto;padding:0 12px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.jump .in::-webkit-scrollbar{display:none}
.jump a.jn{position:sticky;left:0;z-index:1;flex:none;color:var(--ink);font-weight:700;background:rgb(246,245,244);box-shadow:8px 0 8px -6px rgba(0,0,0,.12);border-bottom-color:transparent}
.jump a{white-space:nowrap;text-decoration:none;font-size:13px;font-weight:600;color:var(--muted);
  padding:11px 10px;border-bottom:2px solid transparent}
.jump a:focus-visible{color:var(--ember-ink);border-bottom-color:var(--ember)}
@media (hover:hover){.jump a:hover{color:var(--ember-ink);border-bottom-color:var(--ember)}}

/* ---------- sideways-scrolling strips: fade the edge that has more ---------- */
.hs[data-edge="right"]{-webkit-mask-image:linear-gradient(90deg,#000000 calc(100% - 38px),transparent);mask-image:linear-gradient(90deg,#000000 calc(100% - 38px),transparent)}
.hs[data-edge="left"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000000 38px);mask-image:linear-gradient(90deg,transparent,#000000 38px)}
.hs[data-edge="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000000 38px,#000000 calc(100% - 38px),transparent);mask-image:linear-gradient(90deg,transparent,#000000 38px,#000000 calc(100% - 38px),transparent)}

/* ---------- sections ---------- */
section{padding:40px 0 4px;scroll-margin-top:56px}
.fig,.g,.more li,tbody tr{scroll-margin-top:78px}
h2{font-size:clamp(25px,6.6vw,36px);line-height:1.06}
h3{letter-spacing:-.02em}
.sub{color:var(--muted);font-size:14.5px;margin-top:7px;max-width:62ch}
.head{margin:0 0 18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}

/* ---------- performance scores ---------- */
.feelgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 11px 13px;
  box-shadow:var(--shadow);text-align:center}
.g.hi{border-color:rgba(var(--p2),.45);box-shadow:0 0 0 2px rgba(var(--p2),.14),var(--shadow)}
.g h3{font-size:13.5px}
.g svg{display:block;width:100%;height:auto;max-width:150px;margin:2px auto 0}
.g p{font-size:12.2px;line-height:1.35;color:var(--muted);margin-top:2px}
.more{margin:10px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden}
.more li{list-style:none;display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:baseline;
  padding:12px 15px;border-top:1px solid var(--line)}
.more li:first-child{border-top:0}
.more .ml{font-family:"Mona Sans",sans-serif;font-weight:700;font-size:14.5px}
.more .mv{font-family:"Mona Sans",sans-serif;font-weight:700;font-size:16px;
  font-variant-numeric:tabular-nums;color:var(--ember-ink)}
.more .mb{grid-column:1/-1;height:6px;border-radius:99px;background:#e9e8e8;overflow:hidden;margin:4px 0 1px}
.more .mb i{display:block;height:100%;border-radius:99px;background:var(--ember-mark,var(--ember))}
.more li.low .mv{color:var(--plum-lt)}
.more li.low .mb i{background:var(--plum-lt)}
.more .mn{grid-column:1/-1;font-size:12.8px;color:var(--muted);line-height:1.4}
.scalenote{font-size:12px;color:var(--muted-2);margin:10px 2px 0}

/* ---------- media wall ---------- */
.filters{display:flex;gap:7px;align-items:center;margin:0 0 16px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.filters button{cursor:pointer;white-space:nowrap;font-size:13px;font-weight:600;color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:99px;padding:8px 14px;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.filters button u{text-decoration:none;font-size:11px;font-weight:700;color:var(--muted-2);
  background:#ecebea;border-radius:99px;padding:1px 7px}
@media (hover:hover){.filters button:hover{border-color:var(--ember);color:var(--ember-ink)}}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#ffffff}
.filters button[aria-pressed="true"] u{background:rgba(255,255,255,.18);color:rgb(var(--p7))}
.filters button:focus-visible{outline:3px solid var(--ember-lt);outline-offset:2px}
.results{display:grid;grid-template-columns:1fr;gap:12px}
.pairnote{grid-column:1/-1;order:-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(105deg,var(--ink),var(--plum) 140%);color:rgb(var(--p8));border-radius:12px;
  padding:12px 17px;font-size:14px;line-height:1.45}
.pairnote b{flex:none;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-lt)}
.feat,.res{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);transition:.18s;margin:0}
@media (hover:hover){.feat:hover,.res:hover{box-shadow:var(--shadow-lg);border-color:#d0cdcc}}
.feat{display:flex;flex-direction:column}
.res{grid-column:1/-1;display:grid;grid-template-columns:1fr}
.thumbbtn{display:block;position:relative;width:100%;padding:0;border:0;background:#252220;cursor:pointer;
  overflow:hidden;text-decoration:none;aspect-ratio:16/9}
.thumbbtn img{display:block;width:100%;height:100%;object-fit:cover;transition:.3s}
.thumbbtn:hover img{transform:scale(1.035)}
.thumbbtn:focus-visible{outline:3px solid var(--ember);outline-offset:-3px}
.thumbbtn:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,15,14,.36) 0%,transparent 34%,transparent 56%,rgba(16,15,14,.5))}
.kind{position:absolute;left:11px;top:11px;z-index:3;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#ffffff;background:rgba(var(--p2),.95);padding:5px 10px;border-radius:99px}
.kind.pl{background:rgba(var(--p0),.95)}
.kind.rd{background:rgba(24,22,21,.9)}
.play{position:absolute;left:12px;bottom:12px;z-index:3;width:40px;height:40px;border-radius:99px;
  background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.32);transition:.18s}
.play:before{content:"";border-left:12px solid var(--ink);border-top:8px solid transparent;
  border-bottom:8px solid transparent;margin-left:4px}
@media (hover:hover){.thumbbtn:hover .play{background:var(--ember)}}
@media (hover:hover){.thumbbtn:hover .play:before{border-left-color:#ffffff}}
.mbody{padding:14px 16px 15px;display:flex;flex-direction:column;flex:1}
.mbody h3{font-size:16.5px;line-height:1.25}
.dest{font-size:12px;color:var(--muted-2);margin-top:7px}
.dest s{text-decoration:none;color:var(--ember-ink);font-weight:700}
.acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.watch{cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#ffffff;
  background:var(--ember);border:0;border-radius:99px;padding:9px 18px;text-decoration:none;transition:.15s}
.watch:before{content:"";border-left:9px solid #ffffff;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (hover:hover){.watch:hover{background:rgb(var(--p9))}}
.watch:focus-visible{outline:3px solid var(--ember-lt);outline-offset:2px}
.watch.read{background:var(--ink)}
.watch.read:before{display:none}
@media (hover:hover){.watch.read:hover{background:var(--plum)}}
.out{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
@media (hover:hover){.out:hover{color:var(--ember-ink);border-bottom-color:var(--ember)}}
.shotcred{font-size:11px;color:var(--muted-2);margin-top:9px}
.noresults{grid-column:1/-1;padding:24px;text-align:center;color:var(--muted);background:#f2f0ee;
  border:1px dashed var(--line);border-radius:12px}
.hidden{display:none !important}
.walltail{margin:13px 0 0;font-size:12px;color:var(--muted-2)}

/* ---------- should you ride it: the answer blocks ---------- */
.fans{display:grid;gap:10px}
.fa{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:15px 16px 15px;scroll-margin-top:72px}
.fa h3{font-size:17.5px;line-height:1.22}
.fav{display:flex;align-items:center;gap:11px;margin:10px 0 0;flex-wrap:wrap}
.fav .ans{font-size:24px;text-align:left}
.fa p{font-size:14px;line-height:1.46;color:var(--muted);margin-top:9px}
.snips{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.snip{position:relative;display:block;flex:1 1 150px;min-width:132px;background:#f6f5f5;
  border:1px solid var(--line);border-radius:11px;padding:10px 11px 9px;text-align:center;
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s,background .15s}
.snip:after{content:"\2193";position:absolute;right:7px;top:5px;font-size:11px;font-weight:700;line-height:1;
  color:var(--muted-2);transition:.15s}
@media (hover:hover){.snip:hover{background:var(--paper);border-color:var(--ember);box-shadow:var(--shadow);transform:translateY(-1px)}}
.snip:hover:after{color:var(--ember-ink)}
.snip:active{transform:translateY(0)}
.snip:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.snip b{display:block;font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:26px;
  line-height:1;letter-spacing:-.045em;color:var(--ember-ink)}
.snip b.pl{color:var(--plum)}
.snip span{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--muted-2);margin-top:6px;line-height:1.3}
.snip svg{display:block;width:100%;height:auto;max-width:150px;margin:0 auto 2px}

/* ---------- landing highlight, shared by every jump target ---------- */
@keyframes flashring{from{box-shadow:0 0 0 3px rgba(var(--p2),.9),var(--shadow)}
  to{box-shadow:0 0 0 3px rgba(var(--p2),0),var(--shadow)}}
@keyframes flashcell{from{background:rgb(var(--p10))}to{background:#ffffff}}
.flash{animation:flashring 1.7s ease-out 1}
li.flash{animation:flashcell 1.7s ease-out 1}

/* ---------- seating ---------- */
.train{display:flex;gap:5px;align-items:flex-end}
.car{flex:1 1 0;border-radius:8px;background:#e9e8e8;padding:6px 3px 5px;text-align:center;min-width:0}
.car .seats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:0 0 5px}
.car .seats i{height:11px;border-radius:2px;background:#d2d0cf;display:block}
.car em{font-style:normal;font-size:10.5px;color:var(--muted-2);font-weight:700}
.car.best{background:var(--ember-mark,var(--ember))} .car.best .seats i{background:rgba(255,255,255,.88)} .car.best em{color:#ffffff}
.car.good{background:rgb(var(--p11))} .car.good .seats i{background:#ffffff} .car.good em{color:rgb(var(--p12))}
.trainends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted-2);letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;margin:0 0 7px}
.seatkey{margin:11px 0 0;font-size:12.2px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;background:#dbdad9;margin-right:5px;vertical-align:-2px}
.sw.best{background:var(--ember-mark,var(--ember))} .sw.good{background:rgb(var(--p11))}
.two{display:grid;gap:10px}
.two>div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 15px;box-shadow:var(--shadow)}
.two h3{font-size:16.5px} .two p{font-size:13.8px;color:var(--muted);margin-top:4px;line-height:1.45}

/* ---------- dark band: the whole ride, drawn ---------- */
.band{background:var(--ink);color:#f2f1f0;margin-top:44px;padding:6px 0 40px;
  background-image:radial-gradient(900px 360px at 14% 0%,rgba(var(--p0),.6),transparent 70%)}
.band h2{color:#ffffff} .band .sub{color:#b3afad}
.tabs{display:flex;gap:2px;margin:0 0 16px;border-bottom:1px solid rgba(255,255,255,.18);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap;cursor:pointer;background:none;border:0;border-bottom:3px solid transparent;
  color:#b3afad;font:700 14.5px/1 Onest,sans-serif;padding:12px 14px;margin-bottom:-1px;transition:.15s}
.tabs button[aria-selected="true"]{color:#ffffff;border-bottom-color:var(--ember)}
.tabs button:hover{color:#ffffff}
.tabs button:focus-visible{outline:3px solid var(--ember-lt);outline-offset:2px}
[role="tabpanel"][hidden]{display:none}
[role="tabpanel"]:focus-visible{outline:3px solid var(--ember-lt);outline-offset:4px}
.obs{display:flex;gap:7px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.obs::-webkit-scrollbar{display:none}
.ob{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font:600 12.5px/1 Onest,sans-serif;
  color:#e3e2e1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:99px;padding:8px 13px;cursor:pointer}
.ob i{display:block;width:14px;height:3px;border-radius:2px;background:var(--c-brand-on-dark);flex:none;opacity:.35}
.ob[aria-pressed="true"]{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.5);color:#ffffff}
.ob[aria-pressed="true"] i{opacity:1}
.ob:focus-visible{outline:3px solid var(--ember-lt);outline-offset:2px}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroller svg{display:block;width:820px;height:auto}
.swipehint{font-size:11.5px;color:#a29d9b;margin:7px 0 0}
.profcap{font-size:12.5px;color:#b3afad;margin:9px 0 0;line-height:1.45}
.ghostkey{display:none!important}
#ghostKey[hidden]{display:none}

/* ---------- figures ---------- */
.figs{display:grid;gap:12px}
.fig{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 16px 14px;
  box-shadow:var(--shadow);margin:0}
.fig .no{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.fig .big{font-family:"Mona Sans",sans-serif;font-weight:700;font-size:40px;line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.fig .what{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.fig svg{display:block;width:100%;height:auto;margin:10px 0 0}
.fig svg.inv{max-width:330px}
.fig figcaption{font-size:13.2px;line-height:1.4;color:var(--muted);margin-top:8px}
.tiny{font-size:11px;color:var(--muted-2);margin-top:6px}
.subhead{margin:30px 0 14px;font-size:20px}

/* ---------- specifications: the entries without a comparison drawing ---------- */
.specrows{list-style:none;margin:12px 0 0;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.specrows li{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:baseline;
  padding:13px 16px;border-top:1px solid var(--line);scroll-margin-top:78px}
.specrows li:first-child{border-top:0}
.specrows .sv{font-family:"Mona Sans",sans-serif;font-weight:700;font-size:21px;line-height:1.1;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.specrows .sl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.specrows .sn{grid-column:1/-1;font-size:13.2px;line-height:1.42;color:var(--muted);margin-top:4px}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 13px;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);background:#f6f5f5}
tbody th{font-weight:600;white-space:nowrap}
@media (max-width:759px){
  .tablewrap{overflow-x:visible}
  table,table tbody,table tr,table th,table td{display:block;width:auto}
  table thead{position:absolute;left:-9999px}
  table tr{border-top:1px solid var(--line);padding:12px 13px}
  table tr:first-child{border-top:0}
  table th,table td{border-top:0;padding:0;white-space:normal}
  tbody th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
  tbody td{margin-top:3px}
}

/* ---------- v9: a playing short always fits the screen ---------- */
.short.playing{max-width:min(420px,calc((100svh - 150px) * 9 / 16))}
.short.playing .vplay{max-height:calc(100svh - 150px)}
/* GEN-11055 r5 (Nate: "pull the expanded video out of the list and keep the rest of them together above it"): the playing card goes after
   every other card and after the shorts row, so the list stays whole above it and no card is left alone beside an empty cell */
.feat.playing:not(.short){order:99}
@media (min-width:760px){
  .feat.playing:not(.short){grid-column:1/-1;width:100%;max-width:calc((100svh - 170px) * 16 / 9);justify-self:center}
}
@media (min-width:760px){ .short.playing{max-width:min(420px,calc((100svh - 170px) * 9 / 16))} .short.playing .vplay{max-height:calc(100svh - 170px)} }
/* ---------- v7: video plays in place ---------- */
.rideit{text-decoration:none}
.vplay{position:relative;width:100%;aspect-ratio:16/9;background:#000000}
.vplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.res.playing{grid-template-columns:1fr}
.playing .acts .watch{display:none}
.short .thumbbtn,.short .vplay{aspect-ratio:9/16;max-height:78vh}
.shorts-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.short.playing{grid-column:1/-1;max-width:420px;width:100%;justify-self:center}
.short .thumbbtn img{object-position:center}
.kind.sh{background:rgba(24,22,21,.9)}
#results{position:relative}
#results.clipped{overflow:hidden}
#results.clipped:after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,246,246,0),var(--cream,#f7f6f6) 92%)}
.wallmore{display:flex;align-items:center;gap:10px;margin:-18px auto 0;position:relative;z-index:2;cursor:pointer;
  border:0;border-radius:999px;background:var(--ink);color:#ffffff;padding:11px 20px;font:700 15px/1 "Mona Sans",Onest,sans-serif}
.wallmore[hidden]{display:none}
@media (hover:hover){.wallmore:hover{background:var(--ember)}}
.wallmore:after{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px)}
@media (min-width:760px){
  .res.playing{grid-column:1/-1;grid-template-columns:1fr}
  .res.playing .vplay{aspect-ratio:16/9;height:auto}
  .shorts-row{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
}

/* ---------- says, plan, history, related ---------- */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tags span{font-size:12.5px;padding:5px 11px;border-radius:99px;background:#f3f2f1;color:#1d6b3e}
.tags.bad span{background:#f2f1f0;color:rgb(var(--p13))}
.quote{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--plum-lt);border-radius:12px;
  padding:14px 15px;box-shadow:var(--shadow)}
.quote p{font-size:14.8px;line-height:1.5}
.quote cite{display:block;font-style:normal;font-size:12.2px;color:var(--muted-2);margin-top:7px}
.shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);margin:14px 0 0}
.shot img{display:block;width:100%;height:auto;max-height:470px;object-fit:cover}
.shot figcaption{font-size:11px;color:var(--muted-2);padding:7px 12px;background:var(--paper)}
.awards{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.aw{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 11px;
  box-shadow:var(--shadow);flex:1 1 92px}
.aw b{display:block;font-family:"Mona Sans",sans-serif;font-size:24px;letter-spacing:-.03em;
  color:var(--plum);white-space:nowrap}
.aw span{font-size:12px;color:var(--muted-2)}
.note{background:#f0eeed;border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-top:22px}
.note h3{font-size:16.5px;line-height:1.25}
.note p{font-size:13.8px;color:var(--muted);margin-top:6px;line-height:1.5}
.rel{display:grid;gap:10px}
.rc{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  text-decoration:none;display:block;padding:14px 15px;border-top:3px solid var(--plum-lt)}

.rc .cta{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ember-ink)}
.rc b{display:block;font-family:"Mona Sans",sans-serif;font-size:18px;margin:3px 0 4px}
.rc p{font-size:13px;color:var(--muted);line-height:1.42}
.src{font-size:13px;color:var(--muted);line-height:1.6}
.src a{color:var(--plum-lt)}
footer{background:var(--ink);color:#c8c5c4;margin-top:44px;padding:30px 0 36px;font-size:13px}
footer .brand{color:#ffffff;font-size:18px}
footer p{margin-top:8px;max-width:52ch;line-height:1.5}
footer nav{margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
footer a{color:#c8c5c4}

/* ---------- desktop ---------- */
@media (min-width:760px){
  :root{--heroh:min(calc(100svh - 34px),780px)}
  html{scroll-padding-top:74px}
  body{font-size:16.5px}
  .wrap{padding:0 22px}
  .hero .scrim{background:linear-gradient(112deg,rgba(19,17,16,.9) 0%,rgba(23,21,20,.68) 44%,rgba(28,26,25,.34) 74%,rgba(var(--p2),.12) 100%),
    linear-gradient(180deg,transparent 42%,rgba(15,14,13,.55) 78%,rgba(13,12,11,.66) 100%)}
  .hero .inner{padding:0 22px 0;margin-top:auto}
  .hero h1{font-size:clamp(56px,7.4vw,118px)}
  .heroq{padding:0 22px;margin-top:20px}
  .say{max-width:24ch}
  .fitband .in{padding:0 22px 22px}
  .fitlist{display:grid;grid-template-columns:1fr 1fr}
  .fitlist li:nth-child(2) .fq{border-top:0}
  .fitlist li:nth-child(even) .fq{border-left:1px solid var(--line)}
  .heroq .fitlist li:nth-child(even) .fq{border-left-color:rgba(255,255,255,.17)}
  .fqq{font-size:15px}
  .fqa{width:160px}
  .fqa .ans{font-size:14px}
  .specrows{display:grid;grid-template-columns:repeat(2,1fr)}
  .specrows li:nth-child(2){border-top:0}
  .specrows li:nth-child(even){border-left:1px solid var(--line)}
  .fans{grid-template-columns:1fr 1fr;align-items:start}
  section{padding:58px 0 6px}
  .feelgrid{grid-template-columns:repeat(4,1fr);gap:14px}
  .g{padding:16px 14px}
  .more{display:grid;grid-template-columns:repeat(2,1fr)}
  .more li:nth-child(2){border-top:0}
  .more li:nth-child(even){border-left:1px solid var(--line)}
  .beats{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr 1fr}
  .results{grid-template-columns:1fr 1fr}
  .res{grid-column:auto;grid-template-columns:212px 1fr}
  .res .thumbbtn{aspect-ratio:auto;height:100%;min-height:158px}
  .res .mbody{justify-content:center}
  .res .acts{margin-top:0}
  .figs{grid-template-columns:repeat(2,1fr)}
  .fig.w{grid-column:1/-1;display:grid;grid-template-columns:auto 300px 1fr;align-items:center;gap:26px}
  .fig.w svg{margin:0}
  .fig.w figcaption{margin:0}
  .rel{grid-template-columns:repeat(3,1fr)}
  .scroller svg{width:100%;min-width:0}
  .swipehint{display:none}
  .car .seats i{height:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .flash,li.flash{animation:none}}

/* ===== v3.4 ===== */

:root{--heroh:auto}
/* the photograph owns the top of the page and dissolves into it */
.hero{min-height:min(52svh,420px)}
.hero .bg{background-position:center 44%}
/* darken the side the words live on, leave the rest of the photograph bright */
.hero .scrim{background:
  linear-gradient(102deg,rgba(12,11,10,.62) 0%,rgba(12,11,10,.34) 34%,rgba(12,11,10,0) 64%),
  linear-gradient(180deg,rgba(17,16,15,.66) 0%,rgba(19,17,16,.20) 26%,
  rgba(17,16,15,.26) 58%,rgba(17,16,15,.20) 100%)}
/* the fade only covers the strip the boxes sit on, so the title stays on photograph */
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,rgba(246,245,244,0) 0%,
  rgba(246,245,244,.34) 44%,rgba(246,245,244,.84) 74%,var(--cream) 100%)}
.hero .inner{margin-top:auto;padding:0 18px 128px}
.hero h1{text-shadow:var(--tsh-photo)}
.say{text-shadow:var(--tsh-photo);font-size:clamp(17px,4.4vw,21px)}
.hero .eyebrow{color:rgb(var(--p14));text-shadow:var(--tsh-photo-sm)}
/* on a phone the words run the full width, so darken the band they sit in */
@media (max-width:759px){
  .hero .scrim{background:linear-gradient(180deg,rgba(17,16,15,.58) 0%,rgba(19,17,16,.14) 18%,
    rgba(17,16,15,.30) 40%,rgba(14,13,12,.64) 62%,rgba(14,13,12,.74) 100%)}
}
@media (min-width:760px){
  .hero{min-height:min(60svh,560px)}
  .hero .inner{padding:0 22px 196px;max-width:1120px}
  .hero h1{font-size:clamp(52px,6vw,92px)}
  .hero:after{height:216px}
}

/* --- the brief --- */
.briefband{position:relative;z-index:3;margin-top:-112px;background:none;border-bottom:0}
.briefband .in{max-width:1120px;margin:0 auto;padding:0 18px 20px}
.riders{display:flex;flex-direction:column;gap:8px}
.rb{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;transition:border-color .14s}
@media (hover:hover){.rb:hover{border-color:#d5d2d1}}
.rb.open{border-color:rgb(var(--p15))}
.rbh{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;padding:13px 15px;font:inherit}
.rbh:focus-visible{outline:3px solid var(--ember);outline-offset:-3px}
.rbq{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:15px;
  color:var(--muted);line-height:1.25;flex:1 1 auto;min-width:0}
.rbq i{font-style:normal}
.rbq .long{display:none}
.rb.open .rbq .short{display:none}
.rb.open .rbq .long{display:inline}
.rbp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.rb.open .rbp{display:none}
.qc.pv{pointer-events:none;max-width:100%}
.qc.pv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb:not(.open) .rbh{flex-wrap:wrap;row-gap:8px}
.rb:not(.open) .rbq{flex:1 1 100%}
.rb:not(.open) .rbp{flex:1 1 100%}
.rbp .qc.pv.all{flex:0 0 auto;align-items:center;gap:7px;margin-left:2px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:0 12px;
  font:700 12px/1 "Mona Sans",Onest,sans-serif}   /* GEN-11055 r7 (Nate: "Show all four is a little too heavy-handed. Maybe just make it say more"): a light outline pill the size of the question pills, label plus a down chevron */
.rbp .qc.pv.all span{font:inherit;color:inherit}
.rbp .qc.pv.all:after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.rbb{display:none;padding:0 15px 15px}
.rb.open .rbb{display:block}
.rb.open .rbh{flex-direction:column;align-items:flex-start;gap:9px;padding-bottom:9px}
.rb.open .rbq{font-size:17px;color:var(--ink)}
.bwhy{font-size:15px;line-height:1.45;color:var(--muted);margin:0}

/* --- the primary answers, two to five of them, then More --- */
.reasons{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.rb.open .reasons{gap:10px}   /* no two opened lozenges touch, on any width */
.qc{display:inline-flex;align-items:baseline;gap:5px;background:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 9px;text-decoration:none;
  transition:border-color .13s,background .13s}
@media (hover:hover){.qc:hover{border-color:var(--ember);background:#faf9f9}}
.qc span{font-size:12px;color:var(--ink);font-weight:600}
.qc b{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:12.5px}
.qc.v5 b,.qc.v4 b{color:var(--ember-ink)} .qc.v3 b{color:var(--plum-lt)} .qc.v2 b,.qc.v1 b{color:var(--plum)}
.morejump{display:inline-flex;align-items:center;gap:6px;font-family:"Mona Sans",Onest,sans-serif;
  font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--ember-ink);background:#f6f5f5;
  border:1.5px solid rgb(var(--p16));border-radius:999px;padding:8px 17px;margin:0;cursor:pointer;
  box-shadow:none;overflow:visible;transition:.13s}
.morejump:after{content:"↓";font-size:13px;opacity:.75}
@media (hover:hover){.morejump:hover{border-color:var(--ember);background:var(--ember);color:#ffffff}}
.morejump:hover:after{opacity:1}
.morejump:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.snip:after{content:none}
.qc:after{content:none}

@media (min-width:760px){
  .briefband{margin-top:-176px}
  .briefband .in{padding:0 22px 24px}
  .rbh{padding:15px 20px}
  /* open: the statement, then the lozenges across the full row (no 1-5 scale to make room for) */
  .rb.open{padding:20px 22px 20px}
  .rb.open .rbh{padding:0;width:auto}
  .rb.open .rbq{font-size:21px}
  .rb.open .rbb{padding:0}
  .rb.open .reasons{margin-top:14px;gap:10px}
  /* collapsed: one column for the label, the first lozenges beside it */
  .rb:not(.open) .rbh{display:grid;grid-template-columns:300px minmax(0,1fr);justify-content:start;
    column-gap:30px;align-items:center}
}

/* --- pickers --- */
.picker{margin:0 0 15px}
.picker .pl{display:block;margin:0 0 8px 2px;font-family:"Mona Sans",Onest,sans-serif;
  font-weight:700;font-size:13px;color:var(--muted-2)}
.pbtns{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:1px}
.pbtns::-webkit-scrollbar{display:none}
.picker button{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:13px;
  color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;cursor:pointer;transition:background .12s,border-color .12s,color .12s;
  line-height:1.1;white-space:nowrap}
@media (hover:hover){.picker button:hover{border-color:var(--ember);color:var(--ember-ink)}}
.picker button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#ffffff}
.picker button:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.picker.org button{font-size:12.5px;padding:6px 12px;background:transparent}
.picker.org button[aria-pressed="true"]{background:var(--paper);border-color:var(--ember);
  color:var(--ember-ink);box-shadow:var(--shadow)}
.fitctl{margin:0 0 20px}
.fitctl .picker{margin-bottom:12px}
.fitctl .picker.org{margin-bottom:0}
@media (min-width:760px){
  .picker{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .picker .pl{display:inline;margin:0;white-space:nowrap}
  .pbtns{flex-wrap:wrap;overflow:visible}
}

/* --- the section --- */
.fitflow{display:flex;flex-direction:column;gap:26px;transition:opacity .12s ease}
.qstore[hidden]{display:none}
.fitflow .fg{padding:0}
.fg[hidden]{display:none}
.fitflow.swap{opacity:.3}
.gh{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted-2);margin:0 0 11px 2px}
.gh:after{content:"";flex:1;height:1px;background:var(--line);order:2}
.gh b{order:1;font-family:"Mona Sans",Onest,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:2px 8px;line-height:1.5}
.fg.g-no .gh,.fg.g-no .gh b{color:var(--plum)}
.fg.g-mid .gh,.fg.g-mid .gh b{color:var(--plum-lt)}
.fg.g-yes .gh,.fg.g-yes .gh b{color:var(--ember-ink)}
.fa{transition:box-shadow .15s,border-color .15s}
.fa.pick{border-color:rgb(var(--p15));box-shadow:0 2px 0 0 var(--ember),var(--shadow)}

/* the jump highlight drops away fast, then lingers on a long tail */
@keyframes flashring{
  0%{box-shadow:0 0 0 3px rgba(var(--p2),.95),var(--shadow)}
  7%{box-shadow:0 0 0 3px rgba(var(--p2),.40),var(--shadow)}
  18%{box-shadow:0 0 0 3px rgba(var(--p2),.31),var(--shadow)}
  40%{box-shadow:0 0 0 3px rgba(var(--p2),.24),var(--shadow)}
  70%{box-shadow:0 0 0 3px rgba(var(--p2),.15),var(--shadow)}
  100%{box-shadow:0 0 0 3px rgba(var(--p2),0),var(--shadow)}
}
@keyframes flashcell{
  0%{background:rgb(var(--p17))} 7%{background:rgb(var(--p18))} 18%{background:#f3f1f0}
  40%{background:#f6f4f3} 70%{background:#faf9f8} 100%{background:#ffffff}
}
.flash{animation:flashring 5.2s linear 1}
li.flash{animation:flashcell 5.2s linear 1}

/* one comparison control for all three charts, not just the height one */
.cmpbar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 9px}
.cmpbar .cmpl{flex:none;font-family:"Mona Sans",Onest,sans-serif;font-weight:700;
  font-size:13px;color:rgba(255,255,255,.66)}
.cmpbar .obs{margin:0}
.cmpnote{margin:0 0 14px;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.45}

/* six review snippets, not two */
.quotes{display:grid;gap:10px;margin-top:12px}
@media (min-width:760px){.quotes{grid-template-columns:repeat(3,1fr)}}

/* --- the eight scores, one shape, all of them open --- */
/* one stacked column, like the boxes at the top: an open row never leaves a hole */
.psgrid{display:flex;flex-direction:column;gap:8px}
.ps{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;transition:border-color .14s}
@media (hover:hover){.ps:hover{border-color:#d5d2d1}}
.ps.open{border-color:rgb(var(--p15))}
.psh{display:grid;grid-template-columns:1fr auto;gap:5px 12px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;padding:12px 14px;font:inherit}
.psh:focus-visible{outline:3px solid var(--ember);outline-offset:-3px}
.psn{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:14.5px;
  color:var(--ink);align-self:baseline}
.pslow{display:block;font-style:normal;font-weight:600;font-size:11px;color:var(--muted-2);
  letter-spacing:.01em;margin-top:2px}
.psv{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:19px;
  color:var(--ember-ink);letter-spacing:-.02em;align-self:baseline}
.ps.low .psv{color:var(--plum-lt)}
.psbar{grid-column:1/-1;height:6px;border-radius:99px;background:#e9e8e8;overflow:hidden;margin-top:3px}
.psbar i{display:block;height:100%;border-radius:99px;background:var(--ember-mark,var(--ember))}
.ps.low .psbar i{background:var(--plum-lt)}
.psb{display:none;padding:0 14px 14px}
.ps.open .psb{display:block}
.pswhy{font-size:13.6px;line-height:1.45;color:var(--muted);margin:0}
.psq{margin:11px 0 0;padding:9px 12px;background:var(--cream);border-left:3px solid var(--plum-lt);
  border-radius:0 10px 10px 0}
.psq p{font-size:13.4px;line-height:1.48;color:var(--ink);margin:0}
.psq cite{display:block;font-style:normal;font-size:11.6px;color:var(--muted-2);margin-top:6px}
@media (min-width:760px){
  /* name, score and bar sit next to each other rather than at opposite ends */
  .psh{grid-template-columns:270px auto minmax(0,1fr);column-gap:28px;align-items:center;
    padding:14px 20px}
  .psn{grid-column:1} .psv{grid-column:2;justify-self:start;font-size:21px}
  .psbar{grid-column:3;margin-top:0;max-width:380px}
  .psb{padding:0 20px 18px}
  .pswhy{max-width:76ch}
  .psq{max-width:76ch}
}

/* --- lozenges stack on a phone instead of scrolling out of sight --- */
.pbtns,.obs{flex-wrap:wrap;overflow:visible}
.cmpbar{align-items:flex-start}

/* the media filters stack too, same reason as the other lozenges */
.filters{flex-wrap:wrap;overflow:visible}

/* the train seen from above: four across, nine cars deep */
.car .seats{grid-template-columns:1fr;gap:3px}
.train{align-items:stretch}

/* history in four short paragraphs */
.histprose{max-width:70ch}
.histprose p{color:#3e3b39;font-size:15px;line-height:1.55;margin:0 0 10px}
.histprose p:last-child{margin-bottom:0}

/* where to sit */
.seatcard{overflow:hidden}
#trains3{padding-top:2px}
.t3r{display:flex;align-items:center;gap:12px;margin-top:9px}
.t3n{flex:0 0 118px;font-size:12.4px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.mt{display:flex;gap:4px;flex:1;min-width:0}
.mt i{flex:1;height:26px;background:#2c2a29;border-radius:4px;display:flex;align-items:flex-end;padding:3px}
.mt b{display:block;width:100%;height:6px;border-radius:2px}
[data-sp][hidden]{display:none}
.sa{margin-top:13px}
.sa>p{font-size:14.6px;line-height:1.55;color:#3e3b39;margin:0;max-width:72ch}
.sa .psq{max-width:72ch}
@media(max-width:560px){
  .t3n{flex-basis:84px;font-size:11.4px}
  .mt i{height:20px}
}

/* photographs read sideways so the page does not grow taller */
.galwrap{margin-top:16px}
.galhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 9px}
.galhead h3{margin:0;font-size:18px}
.galnav{display:flex;gap:7px}
.galnav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:15px;line-height:1;cursor:pointer}
@media (hover:hover){.galnav button:hover{background:var(--cream);border-color:var(--plum-lt)}}
.gal{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gs{flex:0 0 330px;margin:0;scroll-snap-align:start}
.gs img{width:100%;height:220px;object-fit:cover;border-radius:10px;display:block;background:var(--cream)}
.gs figcaption{font-size:11.8px;color:var(--muted-2);margin-top:6px}
.gs figcaption a{color:var(--muted-2)}
.galhint{font-size:11.8px;color:var(--muted-2);margin:7px 0 0}
@media(max-width:560px){
  .gs{flex-basis:82%}
  .gs img{height:200px}
  .galnav{display:none}
  .galhint{display:none}
}

/* related rides carry the reason, and the other half of the question */
.rc .rcp{display:block;font-size:11.6px;color:var(--muted-2);margin:0 0 6px;letter-spacing:.01em}
.rc p{font-size:13.2px;line-height:1.46}
.relh{font-size:19px;margin:26px 0 2px}

/* every specification row carries its own comparison */
.specrows .sviz{grid-column:1/-1;display:block;margin-top:9px}
.mb{display:grid;grid-template-columns:auto 1fr auto;gap:5px 9px;align-items:center}
.mb .n{font-size:11.4px;color:var(--muted-2);white-space:nowrap;line-height:1.2}
.mb .n.me{color:var(--ink);font-weight:700}
.mb .t{display:block;height:8px;background:#eae9e9;border-radius:5px;overflow:hidden}
.mb .t i{display:block;height:8px;border-radius:5px;background:#cdcac9}
.mb .n.me+.t i{background:var(--ember-mark,var(--ember))}   /* GEN-11055 r5: this ride's bar guarded to >= 3:1 on its track */
.mb .v{font-size:11.4px;color:var(--muted-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.svizcap{display:block;font-size:11.5px;line-height:1.4;color:var(--muted-2);margin-top:7px}
.yl{display:block;position:relative;height:18px;margin-top:4px}
.yl b{position:absolute;left:0;right:0;top:8px;height:2px;background:var(--c-line);display:block}
.yl i{position:absolute;top:4px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:#cdcac9;display:block}
.yl i.on{background:var(--ember-mark,var(--ember));width:14px;height:14px;top:2px;margin-left:-7px;
  box-shadow:0 0 0 3px rgba(var(--p2),.16)}
.ylx{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted-2);margin-top:1px}
.ylx em{font-style:normal}
@media(max-width:560px){
  .mb .n{font-size:10.8px;white-space:normal}
  .mb{grid-template-columns:96px 1fr auto}
}

/* the plan view sits in the same scroller as the profile charts */
/* the map is fluid at every width (the profile charts keep their 820px scroll); on a phone its labels and strokes scale up so they read at ~358px */
#panel-plan .plansvg{display:block;width:100%;min-width:0;height:auto}
.plansvg .pl circle{fill:#ffffff;stroke:var(--c-ink);stroke-width:2}
.plansvg .pl text{font-family:Onest,sans-serif;font-size:17px;font-weight:600;fill:rgba(255,255,255,.88)}
.plansvg .dir path{fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 0 1.5px var(--c-ink)) drop-shadow(0 0 1.5px var(--c-ink))}
.plansvg .st line{stroke:#ffffff;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 1.5px var(--c-ink)) drop-shadow(0 0 1.5px var(--c-ink))}
.plansvg .st text{font-family:Onest,sans-serif;font-size:17px;font-weight:700;fill:#ffffff}
@media(max-width:759px){
  .plansvg .pl circle{transform-box:fill-box;transform-origin:center;transform:scale(2.2)}
  .plansvg .pl text{font-size:38px}
  .plansvg .st text{font-size:38px}
  .plansvg .dir path{stroke-width:7}
  .plansvg .st line{stroke-width:9}
}

/* ---- v3.7: an informative answer (the height limit) has no bar and reads in ink ---- */
.ans.v0,.qc.v0 b{color:var(--ink)}
/* ---- v3.6: every lozenge one height with its text centred, More the same size ---- */
.reasons{align-items:center}
.qc{align-items:center;height:32px;box-sizing:border-box;padding:0 12px;line-height:1}
/* GEN-11055 r5 (Nate: "the lozenges could get a little bigger ... the text might be a little small"): one step up in the opened box */
.rb.open .qc{height:38px;padding:0 15px;gap:7px}
.rb.open .qc span{font-size:14px}
.rb.open .qc b{font-size:14.5px}
.rb.open .morejump{height:38px;font-size:14px;padding:0 16px}
.qc span,.qc b{line-height:1;display:block}
.morejump{height:32px;box-sizing:border-box;padding:0 13px;font-size:12.5px;border-width:1px;line-height:1;gap:5px}
.morejump:after{font-size:12px}


/* v3.8 */
.snip svg{max-width:150px}
.snip{display:flex;flex-direction:column;justify-content:center}
.snip.wide{flex-basis:100%}
.snip.wide svg{max-width:300px}
.psqn{font-size:12px;font-weight:600;color:var(--muted-2);margin:10px 0 0;line-height:1.4}
.snip em.lo{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted-2);margin-top:2px}
.psv small{font-size:.58em;font-weight:700;color:var(--muted-2);margin-left:1px;letter-spacing:0}
.psh{grid-template-columns:1fr auto 28px;align-items:center}
.psc{grid-column:3;grid-row:1;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--cream);display:grid;place-items:center;align-self:start;margin-top:-3px;transition:transform .18s,border-color .14s,background .14s}
.psc:before{content:"";width:7px;height:7px;border-right:2px solid var(--ember);border-bottom:2px solid var(--ember);
  transform:translateY(-2px) rotate(45deg)}
@media (hover:hover){.psh:hover .psc{border-color:var(--ember);background:#f6f5f5}}
.ps.open .psc{transform:rotate(180deg)}
@media (min-width:760px){
  .psh{grid-template-columns:270px auto minmax(0,1fr) 28px}
  .psc{grid-column:4;align-self:center;margin-top:0}
}

.psq p b,.quote p b{font-weight:700;background:linear-gradient(transparent 60%,rgba(var(--p25),.30) 0)}
.fa .warn{margin-top:10px;padding:8px 10px 8px 30px;position:relative;font-size:12.6px;line-height:1.42;color:var(--ink);background:#f5f3f2;border:1px solid rgb(var(--p19));border-radius:9px}
.fa .warn:before{content:"!";position:absolute;left:9px;top:8px;width:14px;height:14px;border-radius:50%;background:rgb(var(--p2));color:#ffffff;font-size:10px;font-weight:700;line-height:14px;text-align:center}
.specart{display:block;max-width:220px;margin:0 0 10px}#spec-heartline .specart{max-width:220px}.specart svg{display:block;width:100%;height:auto}
#inside section.planon .cmpbar,#inside section.planon #ghostKey{display:none}
.cmpair text{paint-order:stroke;stroke:#1d1a19;stroke-width:4px}
.snip svg[viewBox="0 0 220 124"]{max-width:190px}
.snip.wide{flex:1 1 180px}
.snip.wide svg{max-width:260px}
.snip.zero{flex:0 0 104px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.snip.zero b{font-size:64px;letter-spacing:-.04em}
.snip svg.tall{max-width:180px}
.snip.big b{font-size:52px;letter-spacing:-.04em}

.psev{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px;margin:7px 0 4px}
.psev a{display:block;background:#f2f0ef;border-radius:10px;padding:9px 11px;text-decoration:none;color:var(--ink)}
.psev b{display:block;font-family:"Mona Sans",Onest,sans-serif;font-size:20px;line-height:1.1}
.psev span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.car.even{background:rgb(var(--p20))}.car.even .seats i{background:#ffffff}.car.even em{color:rgb(var(--p21))}.sw.even{background:rgb(var(--p20))}

/* ===== opening v3: the ride, in the picture ===== */
.hero.poster{min-height:0;height:calc(100svh - 42px);max-height:900px;display:block;background:#2b2827}
.hero.poster:after{content:none}
.hero.poster .ph{position:absolute;z-index:0;max-width:none;display:block;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero.poster .scrim{background:linear-gradient(180deg,rgba(15,14,14,.10) 0%,rgba(15,14,14,0) 50%,rgba(14,13,12,.55) 68%,rgba(13,12,11,.9) 100%)}
.hero.poster .inner{position:absolute;left:0;right:0;bottom:0;margin:0 auto;padding:0 18px 22px;z-index:3}
.hero.poster .inner{pointer-events:none}
.hero.poster .inner>*{pointer-events:auto}
.rideit{display:inline-flex;align-items:center;gap:10px;margin-top:16px;border:0;cursor:pointer;
  background:var(--ember);color:#ffffff;border-radius:999px;padding:8px 18px 8px 8px;
  font:700 15px/1 "Mona Sans",Onest,sans-serif;letter-spacing:-.01em;box-shadow:0 8px 28px -8px rgba(var(--p2),.8)}
.rideit .pl{width:30px;height:30px;border-radius:50%;background:#ffffff;display:grid;place-items:center}
.rideit .pl:before{content:"";border-left:10px solid var(--ember);border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;margin-left:3px}
@media (hover:hover){.rideit:hover{background:rgb(var(--p22))}}
.rideit:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
.pins{position:absolute;inset:0;z-index:2;pointer-events:none}
.pin{position:absolute;left:0;top:0;width:0;height:0;text-decoration:none;color:#ffffff;pointer-events:auto;visibility:hidden}
.pin.on{visibility:visible}
.pin .dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 3px #ffffff,0 2px 10px rgba(0,0,0,.5)}
.pin .dot:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #ffffff;animation:pinring 2.4s ease-out infinite}
@keyframes pinring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.pin .cap{position:absolute;white-space:nowrap;background:rgba(19,17,16,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:10px;padding:7px 11px 8px;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:background .14s}
.pin .cap:before{content:"";position:absolute;background:#ffffff}
.pin .cap b{display:block;font:700 22px/1 "Mona Sans",Onest,sans-serif;letter-spacing:-.03em;color:rgb(var(--p5))}
.pin .cap span{display:block;font-size:12px;font-weight:600;line-height:1.2;margin-top:3px;color:#edecec}
.pin:focus-visible .cap{background:var(--ember)}
@media (hover:hover){.pin:hover .cap{background:var(--ember)}}
.pin:hover .cap b,.pin:focus-visible .cap b{color:#ffffff}
.pin:focus-visible{outline:none}
.pin:focus-visible .cap{outline:3px solid #ffffff;outline-offset:2px}
/* caption to the right */
.pin.r .cap{left:26px;top:0;transform:translateY(-50%)}
.pin.r .cap:before{left:-19px;top:50%;width:19px;height:2px;margin-top:-1px}
/* caption above */
.pin.u .cap{bottom:26px;left:0;transform:translateX(calc(-50% + var(--nx,0px)))}
.pin.u .cap:before{bottom:-19px;left:calc(50% - var(--nx,0px));width:2px;height:19px;margin-left:-1px}
/* ===== open-6: quote + pins + height figure ===== */
.hero.poster .inner{display:flex;flex-direction:column;align-items:flex-start}
.hero.poster h1{font-size:clamp(40px,11.5vw,64px)}
.rq{margin:10px 0 0}
.rqbig{margin:0}
.rqbig p{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(38px,11.2vw,96px);color:#ffffff;text-shadow:var(--tsh-photo);margin-left:-.06em}
.rqbig b{color:var(--ember-lt)}
.rq figcaption{margin-top:7px;font-size:12px;color:rgba(255,255,255,.86);text-shadow:var(--tsh-photo-sm)}
.rq figcaption a{color:#ffffff;text-underline-offset:2px}
.h6fig{align-self:stretch;margin-top:14px}
@media (max-width:759px){
  .hero.poster{background:#141312}
  .hero.poster .ph{height:58%}
  .hero.poster .scrim{background:linear-gradient(180deg,rgba(15,14,14,.10) 0%,rgba(15,14,14,0) 30%,rgba(20,19,18,.62) 44%,#141312 58%,#141312 100%)}
}
.bigfig{display:block;width:100%;height:auto;max-width:420px;margin:0 auto;overflow:visible}
/* GEN-11055 r5 (Nate: "that feature graph on web on desktop is super tiny"): the hero figure's desktop width. It rendered at 420px, so
   its 10-14 unit labels came out at 10-15 CSS px; at 480px and up they are 12px and up. Phone unchanged. */
:root{--figcol:clamp(420px,40vw,520px);--figcap:560px}
.bigfig a.fs{cursor:pointer}
.bigfig a.fs:hover text,.bigfig a.fs:focus-visible text{fill:rgb(var(--p5))}
.bigfig a.fs:focus-visible{outline:2px solid rgb(var(--p5))}
.personas{background:var(--cream)}
.personas .in{max-width:1120px;margin:0 auto;padding:18px 18px 22px}
@media (min-width:760px){
  .hero.poster{height:min(calc(100svh - 52px),880px);min-height:560px}
  .rideit{margin-top:24px;font-size:17px;padding:9px 22px 9px 9px;grid-row:6;justify-self:start}
  .rideit .pl{width:34px;height:34px}
  .pin .cap b{font-size:26px}
  .pin .cap span{font-size:13px}
  .hero.poster .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--figcol));grid-template-rows:1fr auto auto auto auto auto;column-gap:48px;
    align-items:end;padding:0 22px 48px;top:0;bottom:0}
  .hero.poster .inner>*{grid-column:1}
  .hero.poster .inner>.eyebrow{grid-row:2}
  .hero.poster h1{grid-row:3;font-size:clamp(48px,4.6vw,72px)}
  .rq{grid-row:5;margin-top:12px}
  .rqbig p{font-size:clamp(56px,5.6vw,92px)}
  .rq figcaption{font-size:13px}
  .hero.poster .scrim{background:linear-gradient(98deg,rgba(13,12,11,.86) 0%,rgba(13,12,11,.62) 26%,rgba(13,12,11,0) 50%),
    linear-gradient(180deg,rgba(15,14,14,0) 52%,rgba(13,12,11,.6) 68%,rgba(13,12,11,.9) 86%)}
  .hero.poster .inner>.h6fig{grid-column:2;grid-row:1/7;align-self:end;margin:0}
  .bigfig{max-width:var(--figcol);margin:0 0 0 auto}
  .personas .in{padding:26px 22px 26px}
}
@media (prefers-reduced-motion:reduce){.pin .dot:after{animation:none;opacity:0}}
.srcs summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.srcs summary::-webkit-details-marker{display:none}
.srcs summary h2{margin:0}
.srcs summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px)}
.srcs[open] summary::after{transform:rotate(225deg)}
.srcs[open] summary{margin-bottom:12px}

/* v12 Nate 2026-09-28: chips in scores, named builders, angle drawings, stat-block plan, history, related */
.psb .tags{margin-top:2px}
.psb .tags+.tags{margin-top:6px}
.tags.n span{background:#efedec;color:#494644}
.tags.n span.me{background:var(--ember-mark,var(--ember));color:#ffffff;font-weight:700}
.tags.n small{font-size:.86em;opacity:.72;margin-left:2px}
.fig svg.angs{max-width:400px}
/* GEN-11055 r7: a spec card that names the coasters behind each label. Phone: the label sits above its pills; from 760px a label column wide enough for "Rocky Mountain Coasters" */
.grps{display:grid;gap:9px;margin-top:2px}
.grp{display:block}
.grp em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--muted-2);padding:0 0 4px;overflow-wrap:anywhere}
.grp.me em{color:var(--ink)}
.grp .tags{margin-top:0;gap:5px;align-items:center}.grp .tags span{font-size:11.6px;padding:4px 9px}
.grp .gm{font-style:normal;font-size:11.6px;color:var(--muted-2);padding:0 4px}
.decs{display:grid;grid-template-columns:44px 1fr;gap:6px 8px;align-items:start;margin-top:2px}
.decs em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted-2);padding-top:5px}
.decs .tags{margin-top:0;gap:5px}.decs .tags span{font-size:11.6px;padding:4px 9px}
.planrows .tags{margin-top:0}
.specrows li{align-content:start}
.planrows .sv{font-size:23px}
.tr3{display:block;width:150px;height:auto;margin:2px 0 9px}
.dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dates span{background:#efedec;border-radius:10px;padding:6px 10px;font-size:12.5px;color:var(--ink);font-weight:600}
.dates b{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.dates i{flex:0 0 22px;height:2px;background:var(--ember-mark,var(--ember));position:relative}
.dates i:after{content:"";position:absolute;right:-1px;top:-4px;border-left:7px solid var(--ember-mark,var(--ember));border-top:5px solid transparent;border-bottom:5px solid transparent}
.hstats{display:grid;gap:10px}
.hst{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:13px 15px}
.hst b,.hst0 b{display:block;font-family:"Mona Sans",sans-serif;font-weight:700;font-size:28px;line-height:1.05;letter-spacing:-.035em;color:var(--plum)}
.hst span,.hst0 span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted-2);margin-top:3px}
.hst p{font-size:14px;line-height:1.5;color:#3e3b39;margin:7px 0 0}
.hst0{display:flex;align-items:baseline;gap:10px}
.hst0 b{font-size:40px}
.hst0 span{margin:0}
.rstat{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rstat li{background:#f2f0ef;border-radius:9px;padding:7px 9px}
.rstat b{display:block;font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:16px;line-height:1.1;color:var(--ink);margin:0;letter-spacing:-.02em}
.rstat b i{font-style:normal;font-weight:600;font-size:12px;color:var(--muted-2);letter-spacing:0}
.rstat span{display:block;font-size:11.4px;color:var(--muted);margin-top:2px;line-height:1.25}
@media (min-width:760px){.hstats{grid-template-columns:1fr 1fr}.decs{grid-template-columns:auto 1fr}.grp{display:grid;grid-template-columns:11em 1fr;gap:6px 8px;align-items:start}.grp em{padding:5px 0 0}}
/* ---- v3 compare switch + dot lines ---- */
#feel .head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ps.rank .psh{grid-template-columns:1fr 28px;row-gap:8px}
.ps.rank .psh .psn{grid-column:1}.ps.rank .psh .psc{grid-column:2;grid-row:1}
.ps.rank .psh .rlw{grid-column:1/-1}
.rlw{display:block;max-width:420px;width:100%}
.rlc{display:block}
.rlct{display:block;position:relative;height:18px}
.rlct:before{content:"";position:absolute;left:4px;right:4px;top:7.5px;height:3px;border-radius:3px;background:linear-gradient(90deg,#dddcdb,#ada9a7)}
.rlct i{display:block;width:9px;height:9px;border-radius:50%;background:#ffffff;border:2px solid #b1adab;position:relative;z-index:1;box-sizing:border-box}
.rlct i.me{position:absolute;top:0;margin-left:-8.5px;width:17px;height:17px;background:var(--ember-mark,var(--ember));border:3px solid #ffffff;box-shadow:0 0 0 2px var(--ember-mark,var(--ember))}
.rlc.nodata{font-size:12.5px;color:var(--muted-2);font-style:italic;height:18px;line-height:18px}
.rlce{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
.rvw{padding:4px 0 2px}
.rv ol{list-style:none;margin:0;padding:0 0 0 2px;position:relative}
.rv ol:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,#ada9a7,#dddcdb)}
.rv li{display:flex;align-items:flex-start;gap:12px;padding:5px 0;position:relative;font-size:13.5px;line-height:1.35;color:var(--muted)}
.rv li i{flex:0 0 13px;width:13px;height:13px;margin-top:2px;border-radius:50%;background:#ffffff;border:3px solid #b1adab;box-sizing:border-box;position:relative;z-index:1}
.rv li.me i{flex-basis:17px;width:17px;height:17px;margin:0 -2px 0 -2px;background:var(--ember-mark,var(--ember));border:3px solid #ffffff;box-shadow:0 0 0 2px var(--ember-mark,var(--ember))}
.rv li b{color:var(--ink);font-weight:700}
.rve{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.rve:first-child{margin-bottom:4px}.rve:last-of-type{margin-top:4px}
.rvnd{margin:0;font-size:13.5px;color:var(--muted)}
.rlsrc{margin:8px 0 0;font-size:11.5px;color:var(--muted-2)}
.rlx{padding:12px 0 4px;display:flex;flex-direction:column;gap:9px}
.rlxr b{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.rlxr .tags{display:flex;flex-wrap:wrap;gap:6px}
.tags.where span{background:#f4f2f1;color:rgb(var(--p0))}
.ps.rank.open .psh .rlw{visibility:hidden}   /* GEN-11055 r5: hidden but still holding its space, so opening a row does not shrink its header and shift the page */
.snip.rls{flex:1 1 100%;padding:14px 16px}
.snip.rls .rlw{max-width:none}
.snip.rls .rlc,.snip.rls .rlct{display:flex;width:100%}
.snip.rls .rlc{display:block}
.snip.rls .rlce{display:flex;justify-content:space-between;width:100%}.snip.rls .rlce span{display:inline;font-size:9.5px;margin:0}
.snip.rls .rlsn{display:block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
@media (min-width:760px){.ps.rank .psh{grid-template-columns:270px minmax(0,1fr) 28px;row-gap:0}.ps.rank .psh .rlw{grid-column:2;grid-row:1}.ps.rank .psh .psc{grid-column:3}.rlx{flex-direction:row;gap:28px}.rv{max-width:520px}}

/* v11: number stays, line sits where the old bar was */
.ps.rank .psh{grid-template-columns:1fr auto 28px}
.ps.rank .psh .psn{grid-column:1}.ps.rank .psh .psv{grid-column:2;grid-row:1}.ps.rank .psh .psc{grid-column:3;grid-row:1}
.ps.rank .psh .rlw{grid-column:1/-1;grid-row:2}
@media (min-width:760px){.ps.rank .psh{grid-template-columns:230px 70px minmax(0,1fr) 28px}.ps.rank .psh .psv{grid-column:2}.ps.rank .psh .rlw{grid-column:3;grid-row:1}.ps.rank .psh .psc{grid-column:4}}
/* ---- v13: to-scale comparison strip, one tidy card row ---- */
.hsw{padding:2px 0 4px}
.hsx{position:relative}
.hsvw{position:relative}
.hsv{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:12px;background:#f6f5f5;border:1px solid var(--line)}
.hsv::-webkit-scrollbar{display:none}
.hsvw:before,.hsvw:after{content:"";position:absolute;top:1px;bottom:1px;width:22px;z-index:3;pointer-events:none}
.hsvw:before{left:1px;border-radius:12px 0 0 14px;background:linear-gradient(90deg,#f6f5f5,rgba(246,245,245,0))}
.hsvw:after{right:1px;border-radius:0 14px 14px 0;background:linear-gradient(270deg,#f6f5f5,rgba(246,245,245,0))}
.hsk{position:relative}
.hsg{position:absolute;left:0;top:0;overflow:visible}
.hsg .ax{stroke:#c2bfbd;stroke-width:2;stroke-linecap:round}
.hsg .axd{stroke:#c2bfbd;stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.hsg .tk{stroke:#c2bfbd;stroke-width:1}
.hsg .tl{font:700 10px Onest,sans-serif;fill:#948f8c;text-anchor:middle;letter-spacing:.02em}
.hsg .ld{fill:none;stroke:#cfcccb;stroke-width:1;stroke-linejoin:round}
.hsg .ld.me{stroke:var(--ember);stroke-width:1.6}
.hsg .ld.hot{stroke:var(--plum);stroke-width:1.6}
.hsg .dt{fill:#ffffff;stroke:#a09b98;stroke-width:1.6}
.hsg .dt.hot{fill:var(--plum);stroke:var(--plum)}
.hsg .dt.me{fill:var(--ember);stroke:#ffffff;stroke-width:2.5;paint-order:stroke}
.hsc{position:absolute;display:flex;align-items:center;gap:6px;height:58px;box-sizing:border-box;padding:4px 6px;background:#ffffff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(23,21,20,.05);z-index:2}
.hsc.hot{border-color:var(--plum)}
.hsc.me{border:2px solid var(--ember);padding:3px 5px;box-shadow:0 4px 14px -6px rgba(var(--p2),.55)}
.hsc .th{flex:0 0 30px;width:30px;height:30px;border-radius:8px;display:block}
.hsc .tx{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.hsc .nm{font:700 11px/1.1 Onest,sans-serif;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hsc .sc{font:700 11px/1 Onest,sans-serif;color:var(--muted-2)}
.hsc.me .sc{color:var(--ember-ink)}
.hsmore{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:58px;box-sizing:border-box;border:1px dashed #b5b0ae;border-radius:12px;background:#ffffff;font:700 10.5px/1.1 Onest,sans-serif;color:var(--plum);cursor:pointer;z-index:2;padding:0}
.hsmore b{font-size:16px;line-height:.5;letter-spacing:.08em}
@media (hover:hover){.hsmore:hover{border-color:var(--plum);border-style:solid}}
.hscount{margin:7px 6px 0;font:600 11px/1.3 Onest,sans-serif;color:var(--muted-2);display:flex;justify-content:space-between;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.05em}
.hscount>span:not(.c){white-space:nowrap}
.hscount .c{font-size:10.5px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);text-align:center}
.hsc:focus-visible,.hsmore:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
@media (hover:hover){.hsc:hover{border-color:var(--plum)}}

/* v15: expanded strip uses the thick bar */
.hsg .trk{fill:#e9e8e8}
.hsg .axd{stroke:#cbc8c7;stroke-width:3;stroke-dasharray:3 6}
.hsg rect.dt{fill:#ffffff;stroke:#bfbcba;stroke-width:1}
.hsg rect.dt.hot{fill:var(--plum);stroke:var(--plum)}
.hsg circle.dt.me{fill:var(--ember);stroke:#ffffff;stroke-width:4;filter:drop-shadow(0 2px 4px rgba(var(--p2),.45))}
.ps.low .hsg circle.dt.me{fill:var(--plum);filter:drop-shadow(0 2px 4px rgba(var(--p26),.4))}
.ps.low .hsc.me{border-color:var(--plum)}.ps.low .hsc.me .sc{color:var(--plum)}.ps.low .hsg .ld.me{stroke:var(--plum)}

/* v17 */
.hsg .tl.me{fill:var(--ember);font-weight:700}
.ps.low .hsg .tl.me{fill:var(--plum)}
.hsx .hsmore{flex-direction:row;height:32px;border-radius:12px;width:84px;font-size:11px;white-space:nowrap}

/* ---- v14: thick comparison bar ---- */
.sb{display:block;position:relative;height:22px;margin:0 13px}   /* the dot's radius of side room, so a 0 or a 10 sits on the track's end without hanging off the row */
.sb:before{content:"";position:absolute;left:0;right:0;top:4px;height:14px;border-radius:7px;background:#e9e8e8}
.sbf{position:absolute;left:0;top:4px;height:14px;border-radius:7px;background:linear-gradient(90deg,rgb(var(--p23)),var(--ember))}
.ps.low .sbf{background:linear-gradient(90deg,rgb(var(--p24)),var(--plum))}
.sb .t{position:absolute;top:1px;width:3px;height:20px;margin-left:-1.5px;border-radius:2px;background:#ffffff;box-shadow:0 0 0 1px #bfbcba;z-index:1}
.sb .k{position:absolute;top:-2px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--ember);border:4px solid #ffffff;box-shadow:0 2px 8px rgba(var(--p2),.45);box-sizing:border-box;z-index:2}
.ps.low .sb .k{background:var(--plum);box-shadow:0 2px 8px rgba(var(--p26),.4)}
.rlce{margin-top:6px}
/* ---- v13: to-scale comparison strip, one tidy card row ---- */
.hsw{padding:2px 0 4px}
.hsx{position:relative}
.hsvw{position:relative}
.hsv{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:12px;background:#f6f5f5;border:1px solid var(--line)}
.hsv::-webkit-scrollbar{display:none}
.hsvw:before,.hsvw:after{content:"";position:absolute;top:1px;bottom:1px;width:22px;z-index:3;pointer-events:none}
.hsvw:before{left:1px;border-radius:12px 0 0 14px;background:linear-gradient(90deg,#f6f5f5,rgba(246,245,245,0))}
.hsvw:after{right:1px;border-radius:0 14px 14px 0;background:linear-gradient(270deg,#f6f5f5,rgba(246,245,245,0))}
.hsk{position:relative}
.hsg{position:absolute;left:0;top:0;overflow:visible}
.hsg .ax{stroke:#c2bfbd;stroke-width:2;stroke-linecap:round}
.hsg .axd{stroke:#c2bfbd;stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.hsg .tk{stroke:#c2bfbd;stroke-width:1}
.hsg .tl{font:700 10px Onest,sans-serif;fill:#948f8c;text-anchor:middle;letter-spacing:.02em}
.hsg .ld{fill:none;stroke:#cfcccb;stroke-width:1;stroke-linejoin:round}
.hsg .ld.me{stroke:var(--ember);stroke-width:1.6}
.hsg .ld.hot{stroke:var(--plum);stroke-width:1.6}
.hsg .dt{fill:#ffffff;stroke:#a09b98;stroke-width:1.6}
.hsg .dt.hot{fill:var(--plum);stroke:var(--plum)}
.hsg .dt.me{fill:var(--ember);stroke:#ffffff;stroke-width:2.5;paint-order:stroke}
.hsc{position:absolute;display:flex;align-items:center;gap:6px;height:58px;box-sizing:border-box;padding:4px 6px;background:#ffffff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(23,21,20,.05);z-index:2}
.hsc.hot{border-color:var(--plum)}
.hsc.me{border:2px solid var(--ember);padding:3px 5px;box-shadow:0 4px 14px -6px rgba(var(--p2),.55)}
.hsc .th{flex:0 0 30px;width:30px;height:30px;border-radius:8px;display:block}
.hsc .tx{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.hsc .nm{font:700 11px/1.1 Onest,sans-serif;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hsc .sc{font:700 11px/1 Onest,sans-serif;color:var(--muted-2)}
.hsc.me .sc{color:var(--ember-ink)}
.hsmore{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:58px;box-sizing:border-box;border:1px dashed #b5b0ae;border-radius:12px;background:#ffffff;font:700 10.5px/1.1 Onest,sans-serif;color:var(--plum);cursor:pointer;z-index:2;padding:0}
.hsmore b{font-size:16px;line-height:.5;letter-spacing:.08em}
@media (hover:hover){.hsmore:hover{border-color:var(--plum);border-style:solid}}
.hscount{margin:7px 6px 0;font:600 11px/1.3 Onest,sans-serif;color:var(--muted-2);display:flex;justify-content:space-between;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.05em}
.hscount>span:not(.c){white-space:nowrap}
.hscount .c{font-size:10.5px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);text-align:center}
.hsc:focus-visible,.hsmore:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
@media (hover:hover){.hsc:hover{border-color:var(--plum)}}

/* ---- v16: small thick bar replaces the gauges ---- */
.snip.sbar{text-align:left;padding:10px 12px 10px}
.snip.sbar .snv{display:block;font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:28px;line-height:1;letter-spacing:-.04em;color:var(--ink);margin:0 0 6px}
.snip.sbar .snv small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--muted-2);margin-left:2px}
.snip.sbar .rlc{display:block}
.snip.sbar .rlc span{margin:0}
.snip.sbar .sb{height:20px;margin:0 10px}
.snip.sbar .sb:before,.snip.sbar .sbf{top:5px;height:10px;border-radius:5px}
.snip.sbar .sb .t{top:3px;height:14px}
.snip.sbar .sb .k{top:0;width:20px;height:20px;margin-left:-10px;border-width:3px}
.snip.sbar.low .sbf{background:linear-gradient(90deg,rgb(var(--p24)),var(--plum))}
.snip.sbar.low .sb .k{background:var(--plum);box-shadow:0 2px 8px rgba(var(--p26),.4)}
.snip.sbar>span:not(.rlc){margin-top:7px}
.hsc img.th{object-fit:cover}


/* ---- clarity pass ---- */

/* GEN-10302 clarity pass: one vertical height gauge, one related-tile style */
.hv{display:block;margin-top:4px}
.hv svg,.snip svg.hvs{display:block;width:100%;height:auto}
.hv svg{max-width:420px}
.snip.wide svg.hvs{max-width:420px}
.snip:not(.wide) svg.hvs{max-width:170px}
.snip.wide:has(svg.hvs:not(.hvband)){flex-basis:100%}
.snip svg.hvs.hvband,.snip.wide svg.hvs.hvband{max-width:190px}
.rtile{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rtile li{background:#f2f0ef;border-radius:9px;padding:8px 10px}
.rtile b{display:block;font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:16px;line-height:1.15;color:var(--ink);margin:0;letter-spacing:-.01em}
.rtile span{display:block;font-size:11.4px;color:var(--muted-2);margin-top:3px;line-height:1.25;font-variant-numeric:tabular-nums}


/* ---- ride-name links + layout annotations (fixes10) ---- */
section:has(.ob[aria-pressed="true"]) svg text.ann{opacity:0}svg text.ann{transition:opacity .15s}a.rlk{color:inherit;text-decoration:none;cursor:pointer}a.rlk:hover{text-decoration:underline;text-underline-offset:2px}svg a.rlk{cursor:pointer}svg a.rlk:hover text{text-decoration:underline}

/* ---- issues / stoppage list (fixes12) ---- */

.issues{margin-top:14px;background:var(--paper,#ffffff);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.issues .ptl{margin-top:6px}
.issues .ptl li{display:grid;grid-template-columns:110px auto 1fr;gap:10px}
.dz .tags{margin-top:2px}
@media (max-width:640px){.issues .ptl li{grid-template-columns:1fr;gap:3px}}


/* ---- seat train and tail template CSS ---- */

#seattrain{gap:0;align-items:stretch;justify-content:center;padding:4px 0 22px}
#seattrain .car{flex:1 1 0;max-width:58px;min-width:0;height:auto;padding:7px 3px;margin:0;border:1.5px solid #c7c4c2;border-left:0;border-right:0;border-radius:0;background:#f8f7f7;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:none}
#seattrain .car[data-cs]{border-left:1.5px solid #c7c4c2;border-radius:6px 0 0 6px;padding-left:5px}
#seattrain .car[data-ce]{border-right:1.5px solid #c7c4c2;border-radius:0 6px 6px 0;padding-right:5px}
#seattrain .car[data-cs][data-ce]{border-radius:6px}
#seattrain .car:first-child{border-radius:26px 0 0 26px/50% 0 0 50%;padding-left:14px}
#seattrain .car:first-child[data-ce]{border-radius:26px 6px 6px 26px/50% 6px 6px 50%}
#seattrain .car[data-cs]:not(:first-child){margin-left:9px}
#seattrain .car[data-cs]:not(:first-child)::before{content:"";position:absolute;left:-10.5px;width:9px;top:50%;height:1.5px;background:#c7c4c2}
#seattrain .car::after{display:none}
#seattrain .car .seats{position:static;display:grid;grid-template-columns:1fr;gap:3px;margin:0;width:100%;max-width:20px}
#seattrain[data-h="2"] .car .seats{grid-template-columns:1fr 1fr;max-width:40px}
#seattrain .car .seats i,#seattrain[data-h="2"] .car .seats i{display:block;width:auto;height:11px;border-radius:2px 1px 1px 2px;background:#dbdad9;border-right:3px solid #c1bdbb}
#seattrain .car em{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-size:10.5px;font-weight:700;color:var(--muted-2)}
#seattrain .car.best .seats i{background:var(--ember-mark,var(--ember));border-right-color:rgb(var(--p27))}
#seattrain .car.best em{color:var(--ember-ink)}
#seattrain .car.good .seats i{background:rgb(var(--p11));border-right-color:rgb(var(--p28))}
#seattrain .car.good em{color:rgb(var(--p29))}
#seattrain .car.even .seats i{background:rgb(var(--p30));border-right-color:rgb(var(--p31))}
#seattrain .car.best,#seattrain .car.good,#seattrain .car.even{background:#f8f7f7}
@media (max-width:520px){#seattrain .car{padding:6px 2px}#seattrain .car:first-child{padding-left:10px}#seattrain .car .seats i{height:9px;border-right-width:2px}#seattrain .car em{font-size:9.5px}#seattrain .car[data-cs]:not(:first-child){margin-left:6px}#seattrain .car[data-cs]:not(:first-child)::before{left:-7.5px;width:6px}}
@media (min-width:900px){#seattrain .car{max-width:86px;padding:10px 5px}#seattrain .car .seats{max-width:28px;gap:4px}#seattrain[data-h="2"] .car .seats{max-width:58px}#seattrain .car .seats i,#seattrain[data-h="2"] .car .seats i{height:15px}#seattrain .car em{font-size:12px}}


/* ---- Ride Paint v2, palette Tomato: neutral chassis, ride paint carries the ride ---- */
:root{--brand:var(--c-brand);--brand-on-dark:var(--c-brand-on-dark);
  --shadow:0 1px 2px rgba(var(--c-ink-rgb),.05),0 1px 0 rgba(var(--c-ink-rgb),.02);
  --shadow-lg:0 2px 4px rgba(var(--c-ink-rgb),.06),0 18px 40px -22px rgba(var(--c-ink-rgb),.28)}
body{font-feature-settings:"ss01"}
h1,h2,h3,h4{font-stretch:108%;letter-spacing:-.02em}
h1,h2{font-weight:650}
.brand{font-stretch:108%;font-weight:700;letter-spacing:-.01em}
.brand b{color:var(--brand-on-dark)!important}
footer,footer a{color:var(--c-onink)}


/* ---- the ride's own paint (per-page vars --ember-ink / --track / --support / --rb-edge / --hst) ---- */
.hero{position:relative}
.hero.poster:after{content:""!important;display:block;position:absolute;left:0;right:0;top:auto;bottom:0;height:5px!important;background:var(--rb-edge)!important;z-index:4;pointer-events:none}
.qc b,.fig .big,.specrows .sv,.aw b,.snip b,.ans{font-stretch:118%;font-variant-numeric:tabular-nums lining-nums}
.hst b{color:var(--hst)}
.rc{border-top-width:3px}
.tags.bad span{color:#8c3a30}  /* semantic 'criticised' red kept from the source, not ride paint */


/* ---- Ride Paint v2 layer (rp2-layer.css) ---- */
/* ==========================================================================
   Ride Paint v2 layer (GEN-10654 round 5). Canonical. Builder A owns it.
   Inline this whole file at the END of a page's last <style> so it wins ties.
   Fonts: self-hosted (files under /f/); every page inlines the @font-face blocks (render.fonts_css) in its head in place of any Google Fonts link.
   Rules:
   - Chrome (bg, nav, headings, section rules, body buttons, jump bar, footer,
     focus rings) is NEUTRAL + the palette primary (round 6: never blue). A ride's paint never lands on chrome.
   - Ride paint lives only on that ride's own elements (stats, bars, profile,
     card edges) and is set per page as --rp-lead / --rp-second / --rp-ink.
   - Controls are round (Balanced): pills. Cards / panels stay 12px.
   ========================================================================== */

:root{
  /* neutral chassis (palette: Tomato) */
  --rp2-bg:var(--c-bg); --rp2-paper:var(--c-paper); --rp2-ink:var(--c-ink); --rp2-ink-2:var(--c-ink2);
  --rp2-slate:var(--c-slate); --rp2-muted:var(--c-muted); --rp2-line:var(--c-line); --rp2-line-2:var(--c-line2);
  --rp2-chip:var(--c-chip); --rp2-on-dark:var(--c-onink);
  /* site primary: text-safe (links, logo), fill (primary buttons), on dark, tint */
  --rp2-brand:var(--c-brand); --rp2-brand-dk:var(--c-brand-dk);
  --rp2-fill:var(--c-brand-fill); --rp2-fill-ink:var(--c-brand-fill-ink); --rp2-fill-hover:var(--c-brand-fill-hover);
  --rp2-brand-on-dark:var(--c-brand-on-dark); --rp2-brand-tint:var(--c-brand-tint);
  --rp2-logo:var(--c-logo); --rp2-logo-mark:var(--c-logo-mark); --rp2-focus:var(--c-focus);
  /* drawn things: marker, highlighter, contrast accent (never a ride's paint, never data) */
  --rp2-note:var(--c-note); --rp2-note-dark:var(--c-note-dark);
  --rp2-hl:var(--c-hl-a);
  --rp2-acc:var(--c-acc); --rp2-acc-dark:var(--c-acc-dark);
  --rp2-note-hand:"Caveat",cursive;
  /* shape */
  --rp2-r-control:999px; --rp2-r-card:12px; --rp2-r-inner:8px;
  /* type */
  --rp2-display:"Mona Sans",system-ui,sans-serif; --rp2-body:"Onest",system-ui,sans-serif; --rp2-wide:122%;
  --shadow:0 1px 2px rgba(var(--c-ink-rgb),.05),0 1px 0 rgba(var(--c-ink-rgb),.02);
  --shadow-lg:0 2px 4px rgba(var(--c-ink-rgb),.06),0 18px 40px -22px rgba(var(--c-ink-rgb),.28);
}

/* ---------- type ---------- */
body{font-family:var(--rp2-body);font-feature-settings:"ss01"}
h1,h2,h3,h4{font-family:var(--rp2-display);font-stretch:var(--rp2-wide)}
h1,h2{font-weight:600!important;letter-spacing:-.03em!important}
h1{font-stretch:125%}
h3,h4{font-weight:620;letter-spacing:-.012em}
body{background:var(--rp2-bg)}
@media (max-width:719px){h1,h2,h3,h4{font-stretch:112%}h1{font-stretch:104%}.qc b,.fig .big,.specrows .sv,.aw b,.snip b,.ans{font-stretch:106%!important}}

/* hero primary action: paper pill, ink text (chrome, never ride paint) */
.rideit{background:#fff!important;color:var(--rp2-ink)!important;box-shadow:0 10px 30px -12px rgba(0,0,0,.55)!important}
.rideit .pl{background:var(--rp2-ink)!important}
.rideit .pl:before{border-left-color:#fff!important}
@media (hover:hover){.rideit:hover{background:var(--rp2-fill)!important;color:var(--rp2-fill-ink)!important}}
.rideit .pl.dn:before{border-right-color:#fff!important;border-bottom-color:#fff!important}
@media (hover:hover){.rideit:hover .pl.dn:before{border-right-color:var(--rp2-fill)!important;border-bottom-color:var(--rp2-fill)!important}}
@media (hover:hover){.rideit:hover .pl{background:var(--rp2-fill-ink)!important}}
@media (hover:hover){.rideit:hover .pl:before{border-left-color:var(--rp2-fill)!important}}

/* ---------- site chrome: light nav, cool ink footer ---------- */
.brand{font-family:var(--rp2-display);font-stretch:118%;font-weight:720;letter-spacing:-.01em}
.brand b{box-shadow:inset 0 -.3em 0 var(--rp2-logo-mark)}
footer{background:var(--rp2-ink)!important;color:var(--rp2-on-dark)!important}
footer a{color:var(--rp2-on-dark)!important}
footer a:hover{color:#fff!important}
footer .brand{color:#fff!important}
footer .brand b{color:var(--rp2-brand-on-dark)!important}

/* ---------- section rule: a short ink bar above each section heading ---------- */
section>.wrap>h2,section>h2,.head>h2{position:relative}
section>.wrap>h2:before,section>h2:before,.head>h2:before{content:"";position:absolute;left:0;top:-12px;width:28px;height:3px;border-radius:2px;background:var(--rp2-ink)}
.band h2:before,.dark h2:before{background:#fff!important}

/* ---------- eyebrows / kickers: neutral ---------- */
.eyebrow{color:var(--rp2-slate)!important}
.hero .eyebrow,.band .eyebrow,.hero.poster .eyebrow{color:var(--c-eyebrow-dark)!important}

/* ---------- dark bands: cool ink, brand-cool glow (never a ride's paint) ---------- */
.band{background-color:var(--rp2-ink)!important;background-image:radial-gradient(900px 360px at 14% 0%,var(--c-glow),transparent 70%)!important;color:var(--c-band-text)!important}
.band .sub{color:var(--rp2-on-dark)!important}
/* media labels: neutral */
.kind,.kind.pl{background:rgba(var(--c-ink-rgb),.84)!important;color:#fff!important}
/* safety notes: neutral, not ride paint */
.fa .warn{border-color:var(--rp2-line)!important;background:var(--rp2-bg)!important}
.fa .warn:before{background:var(--rp2-ink)!important}
/* disclosure chevrons: neutral */
@media (hover:hover){.psh:hover .psc,.fq summary:hover .chev,.rbh:hover .psc{border-color:var(--rp2-ink)!important;background:var(--rp2-chip)!important}}

/* ---------- jump bar ---------- */
.jump{background:rgba(255,255,255,.95)!important;border-bottom-color:var(--rp2-line)!important}
.jump a.jn{background:#fff!important;color:var(--rp2-ink)!important}
.jump a:focus-visible,.jump a[aria-current]{color:var(--rp2-ink)!important;border-bottom-color:var(--c-link-line)!important}
@media (hover:hover){.jump a:hover{color:var(--rp2-ink)!important;border-bottom-color:var(--c-link-line)!important}}

/* ---------- controls: round (Balanced) ---------- */
.filters button,.picker button,.chips a,.tags span,.tg span,.est,.new,.polls span,.lvl2,
.kind,.play,.watch,.morejump,.wallmore,.rideit,.box,.box button,.yr .age,
.btn,.cta-btn{border-radius:var(--rp2-r-control)!important}
.filters button u{border-radius:var(--rp2-r-control)!important;background:var(--rp2-chip)!important;color:var(--rp2-slate)!important}
.filters button,.picker button{background:var(--rp2-paper);border-color:var(--rp2-line);color:var(--rp2-slate)}
@media (hover:hover){.filters button:hover,.picker button:hover{border-color:var(--rp2-ink)!important;color:var(--rp2-ink)!important;background:var(--rp2-paper)}}
.filters button[aria-pressed="true"],.picker button[aria-pressed="true"]{background:var(--rp2-ink)!important;border-color:var(--rp2-ink)!important;color:#fff!important}
.filters button[aria-pressed="true"] u{background:rgba(255,255,255,.18)!important;color:#fff!important}
.chips a{background:var(--rp2-paper);border-color:var(--rp2-line)}
/* body buttons: ink pill, palette fill on hover */
.watch,.morejump,.wallmore{background:var(--rp2-ink)!important;color:#fff!important;border-color:var(--rp2-ink)!important}
@media (hover:hover){.watch:hover,.morejump:hover,.wallmore:hover,.watch.read:hover{background:var(--rp2-fill-hover)!important;border-color:var(--rp2-fill-hover)!important;color:var(--rp2-fill-ink)!important}}
.box button{background:var(--rp2-fill)!important;color:var(--rp2-fill-ink)!important}
@media (hover:hover){.box button:hover{background:var(--rp2-fill-hover)!important}}
.box{padding-left:18px!important}
.box:focus-within{box-shadow:0 0 0 3px var(--c-focus-ring),0 14px 40px -14px rgba(0,0,0,.5)!important}
/* focus rings: palette focus everywhere, light on dark bands */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline-color:var(--rp2-focus)!important}
.band :focus-visible,.hero :focus-visible,footer :focus-visible{outline-color:var(--rp2-brand-on-dark)!important}
@media (hover:hover){.out:hover,.src a:hover{color:var(--rp2-brand)!important;border-bottom-color:var(--c-link-line)!important}}

/* ==========================================================================
   LIGHT NOTES. A hand-drawn layer, used with editorial discretion.
   0 to 3 per page. A note ADDS a fact from elsewhere on the page; it never
   restates the number or label it marks. Never covers content, never moves
   layout (absolute, pointer-events:none, aria-hidden). Drop or move on mobile.
   Markup + SVG paths: notes-kit.md
   ========================================================================== */
.rn-host{position:relative}
.rn{position:absolute;pointer-events:none;color:var(--rp2-note);z-index:6;line-height:1}
.rn svg{position:absolute;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rn svg path{vector-effect:non-scaling-stroke}
.rn-t{position:absolute;font-family:var(--rp2-note-hand);font-weight:600;font-size:25px;line-height:1.02;color:var(--rp2-note);letter-spacing:.005em;white-space:nowrap;transform:rotate(-2.5deg);transform-origin:left center}
.rn-t.w{white-space:normal}
/* on dark bands: the marker's light twin; on photos: a paper halo so the ink still reads */
.band .rn,.dark .rn,.hero .rn:not(.rn-halo),footer .rn{color:var(--rp2-note-dark)}
.band .rn-t,.dark .rn-t,.hero .rn:not(.rn-halo) .rn-t{color:var(--rp2-note-dark)}
/* contrast accent for circles, stars, sketches when the marker ink would sit on another note */
.rn.acc,.rn-t.acc{color:var(--rp2-acc)}
.band .rn.acc,.dark .rn.acc{color:var(--rp2-acc-dark)}
.rn-halo svg{filter:drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 2px rgba(255,255,255,.8))}
.rn-halo .rn-t,.rn-t.halo{text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 4px #fff,0 0 6px rgba(255,255,255,.85)}
/* circle / ring around an inline value: stretches to the host */
.rn-circle{inset:-.42em -.55em}
.rn-circle svg{inset:0;width:100%;height:100%}
/* underline: under the host text */
.rn-under{left:-2px;right:-2px;bottom:-.42em;height:.5em}
.rn-under svg{inset:0;width:100%;height:100%}
/* strike: through the host text */
.rn-strike{left:-3px;right:-3px;top:.3em;height:.55em}
.rn-strike svg{inset:0;width:100%;height:100%}
/* highlight swipe: behind the text, marker translucent */
.rn-swipe{background:linear-gradient(100deg,transparent 0 1%,var(--rp2-hl) 2% 97%,transparent 98%) 0 72%/100% 58% no-repeat;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* highlighter on a dark band or photo: a solid swipe with ink text, so the words stay readable */
.band .rn-swipe,.dark .rn-swipe,.dz.dark .rn-swipe,.dz.ph .rn-swipe{color:var(--rp2-ink)!important;text-shadow:none!important;background:linear-gradient(100deg,transparent 0 1%,var(--c-hl) 2% 97%,transparent 98%) 0 50%/100% 96% no-repeat}
/* bracket: spans a range vertically on its left or right edge */
.rn-bracket{top:0;bottom:0;width:14px}
.rn-bracket svg{inset:0;width:100%;height:100%}
.rn-bracket.r svg{transform:scaleX(-1)}
/* free-placed pieces: arrow, star, pin, sketch (fixed px, place with left/top) */
.rn-free svg{position:absolute}
/* mobile: hide notes flagged desktop-only; a note may also carry its own @media move */
@media (max-width:719px){.rn-d{display:none!important}}
@media (min-width:720px){.rn-m{display:none!important}}
@media print{.rn{display:none}}


/* ---- r19 hero scrim (post.HERO_CSS) ---- */
@media (min-width:760px){
  html .hero.poster .scrim{background:
    radial-gradient(ellipse 48% 66% at 12% 100%,rgba(12,11,10,.5) 0%,rgba(12,11,10,0) 100%),
    linear-gradient(180deg,rgba(12,11,10,0) 52%,rgba(12,11,10,.5) 72%,rgba(12,11,10,.78) 88%,rgba(12,11,10,.84) 100%)}
  html .hero.poster h1,html .hero.poster .eyebrow,html .hero.poster .rq{text-shadow:var(--tsh-photo)} html .hero.poster .eyebrow{text-shadow:var(--tsh-photo-sm)}
}

/* ---- logo (logo.py) ---- */
.brand.logo{display:inline-flex;align-items:center;flex:none;line-height:0;text-decoration:none}
.brand.logo img{display:block;height:34px;width:auto;max-width:none}
footer .brand.logo img{height:40px}

/* ---- GEN-10654 r20 (coaster19): the five-point scale in tints and shades of the ride's own paint, never a warning
   red. The levels are per-page vars (af/paint.scale_colors; numbers in tokens score.*) ---- */
html .gauge.v5 i:nth-child(-n+5),html .gauge.v4 i:nth-child(-n+4){background:var(--sq5)!important}
html .gauge.v3 i:nth-child(-n+3){background:var(--sq3)!important}
html .gauge.v2 i:nth-child(-n+2),html .gauge.v1 i:nth-child(-n+1){background:var(--sq1)!important}
html .ans.v5,html .ans.v4,html .qc.v5 b,html .qc.v4 b{color:var(--w5)!important}
html .ans.v3,html .qc.v3 b{color:var(--w3)!important}
html .ans.v2,html .ans.v1,html .qc.v2 b,html .qc.v1 b{color:var(--w1)!important}
html .heroq .gauge.v5 i:nth-child(-n+5),html .heroq .gauge.v4 i:nth-child(-n+4){background:var(--d5)!important}
html .heroq .gauge.v3 i:nth-child(-n+3){background:var(--d3)!important}
html .heroq .gauge.v2 i:nth-child(-n+2),html .heroq .gauge.v1 i:nth-child(-n+1){background:var(--d1)!important}
html .heroq .ans.v5,html .heroq .ans.v4{color:var(--d5)!important}
html .heroq .ans.v3{color:var(--d3)!important}
html .heroq .ans.v2,html .heroq .ans.v1{color:var(--d1)!important}
.sa .sawhy{font-size:14px;line-height:1.5;color:#3e3b39;margin:4px 0 0;max-width:72ch}

/* ---- editorial pin captions on the left / below (editorial.SIDES_CSS) ---- */.pin.l .cap{right:26px;top:0;transform:translateY(-50%)}
.pin.l .cap:before{right:-19px;top:50%;width:19px;height:2px;margin-top:-1px}
.pin.d .cap{top:26px;left:0;transform:translateX(calc(-50% + var(--nx,0px)))}
.pin.d .cap:before{top:-19px;left:calc(50% - var(--nx,0px));width:2px;height:19px;margin-left:-1px}
/* ---- editorial light notes (editorial.NOTES_CSS) ---- */.ed-wide,.ed-desk{display:none!important}.rn.ed-mob{display:block}@media (min-width:1100px){.rn.ed-wide{display:block!important}}@media (min-width:720px){.rn.ed-desk{display:block!important}.rn.ed-mob{display:none!important}}
/* ---- What riders love + the header photo slider, option G (riders_love.py, rl-e, rl-f, rl-g) ---- */
/* GEN-10654 experiment: What riders love, the first and tallest rider box */
.rb.rl{position:relative;border-color:#ddd9d7}
/* no paint bar of its own: the hero's ride paint bar sits directly above this box (Nate, Oct 2: "color bar is repeated right next to itself") */
.rb.rl.open{border-color:var(--line);display:block;padding:0}
.rb.rl .rbh,.rb.rl.open .rbh{display:flex!important;flex-direction:column;align-items:stretch;gap:12px;padding:20px 18px 18px;width:100%}
.rl .rlt{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:12px}
.rl .rlk{font-family:"Mona Sans",Onest,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.rl .rlx{flex:none;display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ember-ink);white-space:nowrap}
.rl .rlx:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.rl.open .rlx:after{transform:translateY(2px) rotate(-135deg)}
.rl .rlx .c{display:none}
.rl.open .rlx .o{display:none}
.rl.open .rlx .c{display:inline}
.rl .rlc{display:flex;flex-wrap:wrap;gap:8px}
.rl .rlc q{quotes:none;display:inline-block;font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:15px;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);background:var(--cream);border-left:3px solid var(--ember);border-radius:8px;padding:8px 12px}
.rl .rlc q:before{content:"\201C";color:var(--ember);margin-right:1px}
.rl .rlc q:after{content:"\201D";color:var(--ember);margin-left:1px}
.rl.open .rlc{display:none}
.rb.rl.open .rbh{padding-bottom:14px}
.rb.rl .rbb.rlb{display:none;padding:0 18px 18px}
.rb.rl.open .rbb.rlb{display:block}
.rlb .rlg{display:grid;grid-template-columns:1fr;gap:16px}
.rlb .rlq{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rlb .rlq li{margin:0;background:var(--cream);border-radius:10px;padding:12px 14px 12px 15px;border-left:3px solid var(--ember)}
.rlb .rlq blockquote{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.rlb .rlq blockquote:before{content:"\201C"}
.rlb .rlq blockquote:after{content:"\201D"}
.rlb .rlq b{font-weight:700;background:linear-gradient(transparent 60%,rgba(var(--lead-rgb),.18) 60%)}
.rlb .rlv{align-self:start}
.rlb .rlv .thumbbtn,.rlb .rlv .vplay{border-radius:10px;overflow:hidden}
.rlb .rlv .kind{background:rgba(24,22,21,.9)}
.rlb .rlv p{margin:8px 2px 0;font-size:12.5px;color:var(--muted)}
.rlb .rlv p a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media (min-width:760px){
  .rb.rl .rbh,.rb.rl.open .rbh{padding:22px 24px 22px;gap:14px}
  .rl .rlk{font-size:21px}
  .rl .rlc q{font-size:16px;padding:9px 14px}
  .rb.rl .rbb.rlb{padding:0 24px 24px}
  .rlb .rlg{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px}
}

/* toggle cue: a pill, never a downward arrow (style guide 8.2) */
.rl.v .rlx{border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:var(--paper);transition:background .15s,border-color .15s}
.rl.v .rlx:after{display:none}
@media (hover:hover){.rl.v .rbh:hover .rlx{border-color:var(--ink);background:var(--rp2-chip,#ebe9e8)}}
.rl.v .rlk{font-size:13px;font-family:Onest,sans-serif;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-ink)}
.rl.v .rlc{display:none}
.rl.v .rlm{padding:0 18px 18px}
.rl.v.open .rlm{display:none}
.rl.v .rbh{padding-bottom:12px}
.rl .rlimg{position:relative;overflow:hidden;background:var(--ink);border-radius:10px}
.rl .rlimg img{display:block;width:100%;height:100%;object-fit:cover}
.rl .rltag{position:absolute;left:8px;top:8px;z-index:3;font:700 10.5px/1 Onest,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(24,22,21,.82);border-radius:999px;padding:6px 9px}
@media (min-width:760px){ .rl.v .rlm{padding:0 24px 22px} }

/* GEN-10654 option E */
.hrot{order:1;align-self:stretch;margin-top:18px;color:#fff}
.hero.poster .inner:has(>.hrot)>.h6fig{order:2;align-self:flex-start;width:min(230px,62%);margin-top:16px;opacity:.92}
.hrot .hrk{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px}
.hrot .hrk b{font:700 11.5px/1 Onest,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:var(--tsh-photo-sm)}
.hrot .hrk a{font:700 12.5px/1 Onest,sans-serif;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.55);border-radius:999px;
  padding:7px 12px;background:rgba(20,19,18,.35);backdrop-filter:blur(6px)}
@media (hover:hover){.hrot .hrk a:hover{background:rgba(20,19,18,.6);border-color:#fff}}
.hrot .hrv{position:relative}
.hrot .hcar{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:14px}
.hrot .hcar::-webkit-scrollbar{display:none}
.hrot .hrcard{flex:none;width:88%;scroll-snap-align:start;margin:0;position:relative;overflow:hidden;border-radius:14px;aspect-ratio:16/10;background:#141312}
.hrot .hrcard img{display:block;width:100%;height:100%;object-fit:cover}
.hrot .hrcard .rltag{position:absolute;left:10px;top:10px;z-index:3;font:700 10.5px/1 Onest,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(24,22,21,.82);border-radius:999px;padding:6px 9px}
.hrot .hrcard figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:46px 16px 15px;background:linear-gradient(transparent,rgba(16,14,13,.9));
  font-family:"Mona Sans",Onest,sans-serif;font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.hrot .hrcard figcaption:before{content:"\201C"}
.hrot .hrcard figcaption:after{content:"\201D"}
.hrot .hrcard:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;background:var(--dot,var(--ember))}
.hrot .hdots{display:flex;justify-content:center;gap:6px;padding:11px 0 0}
.hrot .hdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:width .25s,background .25s}
.hrot .hdots i.on{width:18px;border-radius:999px;background:#fff}
.hrot .hnav{display:none}
@media (min-width:760px){
  .hero.poster .inner:has(>.hrot){grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:40px}
  .hero.poster .inner:has(>.hrot)>.hrot{grid-column:2;grid-row:1/7;align-self:end;margin:0}
  .hero.poster .inner:has(>.hrot)>.h6fig{grid-column:1;grid-row:6;justify-self:end;align-self:end;width:min(var(--figcap),100%);margin:0}   /* GEN-10925 (Nate: "the height mini image is really small"): the non-slider size, 420px at most, fitting its column; was a 205px pin */
  .hero.poster .scrim{background:linear-gradient(180deg,rgba(15,14,14,.10) 0%,rgba(15,14,14,0) 38%,rgba(14,13,12,.6) 58%,rgba(13,12,11,.92) 100%)}
  .hrot .hrcard{width:100%}
  .hrot .hrcard figcaption{font-size:25px;padding:60px 20px 18px}
  .hrot .hnav{display:flex;position:absolute;top:calc(50% - 20px);z-index:4;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.3);align-items:center;justify-content:center}
  .hrot .hnav:before{content:"";width:9px;height:9px;border-right:2.5px solid #171514;border-bottom:2.5px solid #171514}
  .hrot .hnav.prev{left:10px}.hrot .hnav.prev:before{transform:translateX(2px) rotate(135deg)}
  .hrot .hnav.next{right:10px}.hrot .hnav.next:before{transform:translateX(-2px) rotate(-45deg)}
}
@media (max-width:759px){
  /* every coaster poster hero flows (site.css loads on coaster pages only; park and ranking heroes keep their own fixed mobile heroes in park.css / rank.css):
     the photo takes the top, the title sits just under it, and the hero ends after its last child, so no dead band below */
  .hero.poster{height:auto;max-height:none}
  .hero.poster .ph{height:calc((100svh - 42px) * .58)}
  .hero.poster .scrim{bottom:auto;height:calc(100svh - 42px)}
  .hero.poster .inner{position:relative;padding-top:calc((100svh - 42px) * .5)}
}
@media (prefers-reduced-motion:reduce){.hrot .hcar{scroll-behavior:auto}}

/* What riders love: the closed line stays when open; opening adds to it */
.rl-e .rlm{padding:0 18px 18px}
.rl.v.rl-e.open .rlm{display:block}
.rl-e .rlline{margin:0;font-size:15px;line-height:1.4;color:var(--ink)}
.rl-e .rlline b{font-family:"Mona Sans",Onest,sans-serif;font-weight:700;color:var(--ember-ink)}
.rl-e .rlbig{margin:8px 0 0;font-family:"Mona Sans",Onest,sans-serif;font-weight:650;font-size:20px;line-height:1.22;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rl-e .rlbig:before{content:"\201C";color:var(--ember)}
.rl-e .rlbig:after{content:"\201D";color:var(--ember)}
.rl-e .rlb .rlq{display:grid;gap:10px}
@media (min-width:760px){
  .rl-e .rlm{padding:0 24px 22px}
  .rl-e .rlbig{font-size:24px;max-width:46ch}
}

/* the four rider-type boxes: the 5-point gauge only, no answer word, closed or open */

/* GEN-10654 option F */
@media (max-width:759px){ .hero.poster .inner:has(>.hrot)>.h6fig{width:100%;max-width:420px;align-self:center;opacity:1} }
.hrot .hrcard.vid{cursor:pointer}
.hrot .hrcard.vid .hpl{position:absolute;left:50%;top:44%;z-index:3;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .15s}
.hrot .hrcard.vid .hpl:after{content:"";position:absolute;left:25px;top:19px;border-left:17px solid #171514;border-top:12px solid transparent;border-bottom:12px solid transparent}
.hrot .hrcard.vid:hover .hpl{transform:scale(1.08)}
.hrot .hplay{display:none;position:relative}
.hrot .hplay .vplay{border-radius:14px;overflow:hidden}
.hrot .hx{position:absolute;right:10px;top:10px;z-index:5;border:0;border-radius:999px;padding:8px 14px;cursor:pointer;
  font:700 13px/1 Onest,sans-serif;background:rgba(255,255,255,.94);color:#171514}
.hrot.playing .hrv,.hrot.playing .hdots,.hrot.playing .hrk{display:none}
.hrot.playing .hplay{display:block}
@media (min-width:760px){
  .hero.poster.hplaying .inner>*:not(.hrot){visibility:hidden}
  .hero.poster.hplaying .pins{visibility:hidden}
  .hero.poster.hplaying .inner>.hrot{grid-column:1/-1;grid-row:1/7;align-self:center;justify-self:center;width:min(100%,calc((100svh - 190px) * 16 / 9))}
}

/* box: option C's closed layout stays when open; open adds the rest */
.rl.v.rl-c.rl-f.open .rlm{display:grid}
.rl-f .rlpk{grid-column:1;margin:0;font:700 11.5px/1 Onest,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rl-f .rlnum.word b{font-size:40px;letter-spacing:-.03em}
.rl-f .rlalso{grid-column:1 / -1;margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.rl-f .rlalso span{display:inline-block;border-radius:999px;padding:5px 11px;background:var(--rp2-chip,#ebe9e8);color:var(--ink);font-weight:650}
@media (min-width:760px){
  .rl-f.rl-c .rlm.pk{grid-template-rows:auto auto auto auto}
  .rl-f .rlm.pk .rlpk{grid-row:1}
  .rl-f .rlm.pk .rlnum{grid-row:2}
  .rl-f .rlm.pk .rlalso{grid-column:1;grid-row:3}
  .rl-f .rlm.pk .rlbig{grid-row:1 / span 3}
  .rl-f .rlm.pk .rlfb{grid-row:1 / span 3}
  .rl-f .rlnum.word b{font-size:60px}
}

/* GEN-10654 option G */
.hero.poster .inner:has(>.hrot)>.rideit{display:none}
.hrot .hrk{display:none}
@media (min-width:760px){ .hero.poster .inner:has(>.hrot)>.h6fig{justify-self:start} }
.hrot .hrcard.vid .rltag{background:#fff;color:#171514}

.rl-g .rlth{padding:0 18px 18px;display:grid;gap:12px}
.rl-g .tht{background:var(--cream,#f6f4f3);border-radius:12px;padding:14px 15px 15px;cursor:pointer}
.rl-g .tht .lz{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px 6px 9px;background:var(--paper,#fff);
  border:1px solid var(--line,#e1dedd);font:700 13px/1 Onest,sans-serif;color:var(--ink)}
.rl-g .tht .lz:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot,var(--ember))}
.rl-g .tht blockquote{margin:10px 0 0;font-family:"Mona Sans",Onest,sans-serif;font-weight:650;font-size:17px;line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.rl-g .tht blockquote:before{content:"\201C";color:var(--dot,var(--ember))}
.rl-g .tht blockquote:after{content:"\201D";color:var(--dot,var(--ember))}
.rl-g .rlfb{position:relative;overflow:hidden;border-radius:12px;background:#141312;aspect-ratio:16/10}
.rl-g .rlfb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:rlfade 9s infinite}
.rl-g .rlfb img:nth-child(1){opacity:1;animation-delay:0s}
.rl-g .rlfb img:nth-child(2){animation-delay:3s}
.rl-g .rlfb img:nth-child(3){animation-delay:6s}
/* fewer frames (dark stills are skipped): one stays put; two share a 6s cycle so a frame always shows (GEN-11055 qaten) */
.rl-g .rlfb.n1 img{animation:none;opacity:1}
.rl-g .rlfb.n2 img{animation-name:rlfade2;animation-duration:6s}
@keyframes rlfade2{0%{opacity:0;transform:scale(1)}3%{opacity:1}50%{opacity:1}56%{opacity:0;transform:scale(1.08)}100%{opacity:0}}
@keyframes rlfade{0%{opacity:0;transform:scale(1)}6%{opacity:1}33%{opacity:1}40%{opacity:0;transform:scale(1.08)}100%{opacity:0}}
@media (min-width:760px){
  .rl-g .rlth{padding:0 24px 22px;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr);align-items:start}
  .rl-g .rlfb{aspect-ratio:auto;align-self:stretch;min-height:150px}
}
/* GEN-10654 option H (GEN-10925): each theme opens on its own tap to three more riders (four in all); no box-wide Read more */
.rl-h .rlhd{padding:20px 18px 12px}
.rl-h .tht{cursor:default;padding:0;display:flex;flex-direction:column}
.rl-h .thb{all:unset;box-sizing:border-box;display:block;width:100%;padding:14px 15px 15px;border-radius:12px;-webkit-tap-highlight-color:transparent}
.rl-h button.thb{cursor:pointer}
.rl-h .thb:focus-visible{outline:2px solid var(--dot,var(--ember));outline-offset:2px}
.rl-h .thx{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font:700 12.5px/1 Onest,sans-serif;color:var(--ember-ink,#a3341f)}
.rl-h .thx:after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.rl-h .tht.on .thx:after{transform:translateY(1px) rotate(-135deg)}
.rl-h .thx .c,.rl-h .tht.on .thx .o{display:none}
.rl-h .tht.on .thx .c{display:inline}
.rl-h .tht .lead{margin:10px 0 0}
.rl-h .thm{display:none;list-style:none;margin:0;padding:0 15px 16px 15px;gap:14px}
.rl-h .tht.on .thm{display:grid}
.rl-h .tht.on .thb{padding-bottom:12px}
.rl-h .thm li{margin:0;padding:2px 0 0 12px;border-left:2px solid var(--dot,var(--ember))}
.rl-h .thm blockquote{margin:0;font-family:"Mona Sans",Onest,sans-serif;font-weight:560;font-size:15.5px;line-height:1.36;letter-spacing:-.005em;color:var(--ink)}
.rl-h .thm blockquote:before{content:"\201C"}.rl-h .thm blockquote:after{content:"\201D"}
@media (min-width:760px){
  .rl-h .rlhd{padding:22px 24px 12px}
  .rl-h .rlfb{align-self:start;aspect-ratio:4/5;min-height:0}
}
@media (max-width:759px){ .rl-g .rlfb{order:-1} }
@media (prefers-reduced-motion:reduce){ .rl-g .rlfb img,.rl-g .rlfb.n1 img,.rl-g .rlfb.n2 img,.rl-g .rlfb.n3 img{animation:none} }



/* ---- contrast and linked pills (GEN-10654 contrast pass, ported into the stylesheets by GEN-10925) ----
   Text over a photo gets a soft dark halo (the photo itself stays as graded). A pill that only links keeps its look on hover and
   shows the link by an underline; only real filters change colour. */
.hero h1,.hero .rq,.hero .rq p,.hero .inner>p,.pb,.pb .big,.pb small{text-shadow:var(--tsh-photo)!important}
html body .hero .eyebrow,html body .hero .crumbs,html body .hero .crumbs a,html body .hero .crumbs span{text-shadow:var(--tsh-photo-sm)!important}
html body .hero .eyebrow{color:#fff!important}
.eyebrow .eb-status{display:block;margin-top:6px}
.pb .big small{color:rgba(255,255,255,.9)!important}
.tally a:hover,.tally a:focus-visible,.chips a:hover,.chips a:focus-visible{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hero svg text,.h6fig svg text{paint-order:stroke;stroke:rgba(12,11,10,.55);stroke-width:3px;stroke-linejoin:round}
/* GEN-11055 r9 (QA row 8): the hero graph's stat text sits on busy photos; a dark translucent backing keeps it readable */
html body .hero .h6fig{background:rgba(10,9,8,.55);border-radius:12px;padding:8px 10px;box-sizing:border-box}
html body .hero .rq b{color:var(--ember-hero,var(--ember-lt))!important;text-shadow:var(--tsh-photo)!important}
/* the ride's own colour as a fill under white text: deepened per ride until it reads at 4.5:1 (--ember-fill, af/paint.py) */
.tags.n span.me,.pin:focus-visible .cap,.watch{background:var(--ember-fill,var(--ember-ink))!important}
@media (hover:hover){.pin:hover .cap,.morejump:hover{background:var(--ember-fill,var(--ember-ink))!important}}

/* ---------- Performance: quotes-only rows (GEN-10730 locked design, GEN-10925) ---------- */
.ps.thin{background:#fdfbf8}
@media (hover:hover){.ps.thin:hover{border-color:var(--line)}}
.ps.thin .psh{grid-template-columns:1fr;cursor:default}
.pnl{display:flex;flex-direction:column;gap:3px}
.tbody{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;min-width:0}
.dqs{display:grid;gap:8px}
.dq{margin:0;padding:9px 12px;background:var(--cream);border-radius:10px}
.dq p{font-size:13.6px;line-height:1.48;margin:0;color:var(--ink)}
.dq p b{font-weight:700;background:linear-gradient(transparent 60%,rgba(var(--p25),.30) 0)}
.dq cite{display:block;font-style:normal;font-size:11.6px;color:var(--muted-2);margin-top:5px}
#feel .psq{border-left:0;border-radius:10px}
@media (min-width:760px){
  .ps.thin .psh{grid-template-columns:270px minmax(0,1fr);align-items:start;column-gap:28px}
  .tbody{grid-column:2;grid-row:1}
  .dqs{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

/* GEN-11055 noph: a ride with no hero photo gets a short band in its own livery colour instead of an empty photo frame.
   --ember-fill is the lead colour, deepened only as far as white text reads on it at 4.5:1 (paint.ember_fill); every ink on the band is white */
.hero.poster.noph{height:auto;min-height:0;max-height:none;background:var(--ember-fill)}
.hero.poster.noph .inner{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;display:flex;flex-direction:column;align-items:flex-start;padding:36px 18px 28px}
html body .hero.poster.noph :is(h1,.rq,.rq p,.rq b,.eyebrow,.inner>p){text-shadow:none!important}
.hero.poster.noph .eyebrow,html body .hero.poster.noph .eyebrow{color:#fff!important}
.hero.poster.noph .rqbig p,.hero.poster.noph .rq figcaption,.hero.poster.noph .rq figcaption a{color:#fff}
html body .hero.poster.noph .rq b{color:#fff!important;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em}
@media (min-width:760px){
  .hero.poster.noph .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--figcol));grid-template-rows:repeat(5,auto) 1fr;align-items:start;column-gap:40px;padding:40px 22px 36px}
  .hero.poster.noph .inner>.eyebrow{grid-row:1}
  .hero.poster.noph h1{grid-row:2}
  .hero.poster.noph .inner>.rq{grid-row:4}
  .hero.poster.noph .inner>.h6fig{grid-column:2;grid-row:1/7;align-self:center;margin:0}
  .hero.poster.noph .inner:has(>.hrot){grid-template-columns:minmax(0,1fr) minmax(0,460px)}
  .hero.poster.noph .inner:has(>.hrot)>.hrot{grid-column:2;grid-row:1/7;align-self:center;margin:0}
  .hero.poster.noph .inner:has(>.hrot)>.h6fig{grid-column:1;grid-row:5;justify-self:start;align-self:start;width:min(var(--figcap),100%);margin:16px 0 0}
  .hero.poster.noph.hplaying .inner:has(>.hrot)>.hrot{grid-column:1/-1;justify-self:center}
}

/* ==========================================================================
   GEN-11055 r5 (Nate, Thu 10/08): performance bars read the same open and shut, marks guarded for contrast
   ("gotta be sure our ... custom color ... scheme for each ride has sufficient contrast"; "it feels like two different bars";
   "the expander jumps when I click"). --ember-mark is the ride's lead colour moved toward black until it reads >= 3:1 against
   the bar track and the paper (af/paint.py mark_of); `afbuild qa` checks it on every built page.
   ========================================================================== */
.sbf{background:linear-gradient(90deg,rgb(var(--p23)),var(--ember-mark))}
.sb .k{background:var(--ember-mark);box-shadow:0 2px 8px rgba(23,21,20,.32)}
.sb .t{box-shadow:0 0 0 1px #757170}
.rlce{color:var(--muted)}
.hsg .dt{stroke:#757170}
.hsg .dt.me,.hsg circle.dt.me{fill:var(--ember-mark)}
.hsg .ld.me{stroke:var(--ember-mark)}
.hsc.me{border-color:var(--ember-mark)}
.hsg .tl{fill:#6a6663}
.hsg .tl.me{fill:var(--ember-mark)}
.ps.open{border-color:var(--ember-mark)}
.psc{border-color:var(--ember-mark)}
.psc:before{border-right-color:var(--ember-mark);border-bottom-color:var(--ember-mark)}
.hsx{min-height:164px}   /* the drawn open bar is 162px tall plus its 2px frame: reserved, so drawing it moves nothing */
/* the Typical wait time row names its value (Bad / Okay / Good) instead of a /10 */
.psw{font-size:14px;line-height:1.2;letter-spacing:-.01em}
.psn .psnow{display:block;min-height:1.3em;margin-top:2px;font:600 12.5px/1.3 Onest,sans-serif;color:var(--muted);letter-spacing:0}   /* the live wait, read from the same fetch as the hero chip; its line is reserved while empty */
.psnow:empty{visibility:hidden}
.snip.sbar .snv.snw{font-size:16px;line-height:1.15;letter-spacing:-.01em}
@media (min-width:760px){.ps.rank .psh{grid-template-columns:230px 160px minmax(0,1fr) 28px}.psw{font-size:15px}}

/* What riders say: praised in green, criticised in red, both >= 4.5:1 (Nate: "should we use green and red probably yeah") */
#says .tags span{background:#e4f3e9;color:#14582f}
#says .tags.bad span{background:#fbe7e5;color:#9a2a20}

/* Related: the whole card is the link (one real <a> on the title, stretched over the card); sections are spaced like the page's own */
.rc{position:relative}
.rc .rcl{color:inherit;text-decoration:none}
.rc .rcl:after{content:"";position:absolute;inset:0;border-radius:12px;z-index:1}
@media (hover:hover){.rc:hover{box-shadow:var(--shadow-lg)}}
.rc:hover .rcl{text-decoration:underline}
.rc:focus-within{outline:3px solid var(--ember-mark);outline-offset:2px}
.rc .rcl:focus-visible{outline:none}
.relhead{margin-top:34px}
@media (min-width:760px){ .hero.poster .inner:has(>.hrot) .bigfig{max-width:none;margin:0} }   /* beside the slider the figure fills its own --figcap width */

/* GEN-11055 r6 (Nate 10/09: live wait above the fold, always present): a small chip directly under the hero title, white on a
   dark translucent pill (also on a no-photo hero, whose ember livery would not give white text 4.5:1 for a thin line). */
.hero .qtlive{margin:10px 0 0;padding:6px 12px;border-radius:14px;background:rgba(10,9,8,.68);color:#ffffff;font-size:13.5px;line-height:1.4;
  max-width:100%;justify-self:start;align-self:start}
.hero .qtlive .qtw{font-weight:700}
.hero .qtlive .qtu{color:rgba(255,255,255,.86)}
.hero .qtlive .qtu:empty{display:none}
.hero .qtlive>*+*:before{content:"\00b7";color:rgba(255,255,255,.7);text-decoration:none;display:inline-block;margin:0 7px}
.hero .qtlive a{color:#ffffff;text-decoration:underline;white-space:nowrap}
html body .hero .qtlive{text-shadow:none!important}
@media (min-width:760px){
  .hero.poster .inner>.qtlive{grid-row:4}
  .hero.poster.noph .inner>.qtlive{grid-row:3}
}

.compare-caption{margin:0;color:var(--muted);font:500 13px/1.5 Onest,sans-serif}
.psb.nohs-park .hsw{display:none}