/* Top-ten guides — v3 adapter.
   Seven guides (Austin Powers, Beatles 007, Cuphead, Simpsons, SpongeBob, Stranger
   Things, TOTAN) are built on the topten markup, not the guide.css markup, so
   guide-v3.css does not reach them. This maps the same reduction language onto the
   classes those pages actually use: condensed wood-type for statements, Georgia for
   reading, narrow caps at wide tracking for labels, and structure carried by
   hairlines and space instead of cards, boxes and shadows.
   Palette comes from guide-themes.css per table; nothing here hardcodes a color. */

body.topten-v3{background:var(--bg);color:var(--ink);background-image:none;
  font:18px/1.62 Georgia,'Times New Roman',serif}
.topten-v3 main{max-width:1200px;margin:0 auto;padding-top:0}
.topten-v3 ::selection{background:var(--accent);color:#fff}
.topten-v3 p{text-wrap:pretty}
.topten-v3 a{color:var(--ink);text-decoration-color:var(--accent-ink);text-underline-offset:3px}

/* ---------- type ---------- */
.topten-v3 h1,.topten-v3 h2{font-family:Haettenschweiler,'Arial Narrow',Impact,sans-serif;font-weight:900;color:var(--ink);text-shadow:none}
.topten-v3 h1{font-size:clamp(76px,10vw,148px);line-height:.9;letter-spacing:1.5px;margin:0 0 26px;text-transform:uppercase}
.topten-v3 h2{font-size:clamp(34px,4.4vw,52px);line-height:.98;letter-spacing:1px;text-transform:uppercase;max-width:22ch;margin:0 0 24px}
.topten-v3 h3{font:700 21px/1.28 Georgia,serif;letter-spacing:-.2px;color:var(--ink);margin:0 0 10px}
.topten-v3 h4{font:700 12px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:3.5px;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px}
.topten-v3 .eyebrow,.topten-v3 .section-kicker{display:block;background:none;border:0;padding:0;
  font:700 12px/1.4 'Arial Narrow',Arial,sans-serif;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.topten-v3 .section-kicker{color:var(--accent-ink)}

/* ---------- hero: artwork first, then the statement ---------- */
.topten-v3 .guide-hero{display:flex;flex-direction:column-reverse;align-items:center;gap:0;
  width:100vw;margin-left:calc(50% - 50vw);padding:0;background:var(--bg);border:0;box-shadow:none;text-align:center}
.topten-v3 .guide-hero .hero-art{margin:56px auto 0;width:min(1200px,92vw);background:none;border:0;box-shadow:none;padding:0}
.topten-v3 .guide-hero .hero-art img{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain;border-radius:0}
.topten-v3 .guide-hero .hero-art figcaption{font:13px/1.6 'Arial Narrow',Arial,sans-serif;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);padding:16px 0 0;text-align:center}
.topten-v3 .guide-hero .hero-copy{max-width:820px;margin:0 auto;padding:64px 5vw 8px}
.topten-v3 .guide-hero .lede{font:400 25px/1.4 Georgia,serif;color:var(--ink);max-width:46ch;margin:0 auto 18px}
.topten-v3 .guide-hero .identity{font:14px/1.6 'Arial Narrow',Arial,sans-serif;color:var(--muted);max-width:52ch;margin:0 auto 26px}

.topten-v3 .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--accent);color:#fff;border:0;border-radius:99px;padding:14px 26px;box-shadow:none;
  font:700 16px/1.2 'Arial Narrow',Arial,sans-serif;text-decoration:none;transition:opacity .15s}
.topten-v3 .button:hover,.topten-v3 .button:focus-visible{opacity:.85;transform:none;box-shadow:none}

/* ---------- contents: pills, like the act table of contents ---------- */
.topten-v3 .page-toc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:96px auto 0;padding:0;background:none;border:0;border-top:1px solid var(--line);padding-top:44px}
.topten-v3 .page-toc a{font:700 13px/1 'Arial Narrow',Arial,sans-serif;color:var(--ink);text-decoration:none;
  border:1px solid var(--line-ui);border-radius:99px;padding:12px 18px;white-space:nowrap;background:none}
.topten-v3 .page-toc a:hover,.topten-v3 .page-toc a:focus-visible{border-color:var(--accent-ink);color:var(--accent-ink)}

/* ---------- sections: rhythm and hairlines, no panels ---------- */
.topten-v3 .guide-section{margin:130px 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.topten-v3 .guide-section>p,.topten-v3 .guide-section>ul,.topten-v3 .guide-section>ol{max-width:62ch}
.topten-v3 .guide-section ul,.topten-v3 .guide-section ol{padding-left:1.2em}
.topten-v3 .guide-section li{margin-bottom:9px}
.topten-v3 .guide-section li::marker{color:var(--accent-ink);font-weight:700}
.topten-v3 code{font:15px/1.5 'Arial Narrow',Arial,monospace;color:var(--bone);background:none;padding:0}

/* ---------- lessons and artwork ---------- */
.topten-v3 .desktop-lesson{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:start;
  background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:34px 0 0;margin:34px 0 0}
.topten-v3 .desktop-teaching{min-width:0}
.topten-v3 .lesson-visual{margin:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.topten-v3 .lesson-visual img{display:block;width:100%;height:auto;border-radius:8px}
.topten-v3 .lesson-visual figcaption{font:15px/1.6 'Arial Narrow',Arial,sans-serif;color:var(--muted);padding:14px 0 0;text-align:left}
.topten-v3 .desktop-enlarge-link,.topten-v3 .desktop-image-link{color:var(--accent-ink);font-size:14px}

/* ---------- cards become hairline entries ---------- */
.topten-v3 .mode-card,.topten-v3 .step-card{background:none!important;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;padding:26px 0 0;margin:26px 0 0}
.topten-v3 .mode-card h3,.topten-v3 .step-card h3{font:700 19px/1.3 Georgia,serif}
.topten-v3 .mode-card p,.topten-v3 .step-card p{max-width:62ch}
.topten-v3 .detail-body{background:none;border:0;border-radius:0;padding:0;margin:14px 0 0}
.topten-v3 .detail-body p,.topten-v3 .detail-body li{font-size:17px;color:var(--muted)}
.topten-v3 .detail-body strong{color:var(--ink)}

/* ---------- a note is a sentence with a rule, not a box ---------- */
.topten-v3 .evidence-note{background:none;border:0;border-left:2px solid var(--accent);border-radius:0;
  box-shadow:none;padding:6px 0 6px 26px;margin:34px 0;max-width:62ch;color:var(--muted);font-size:17px}

/* ---------- glossary and timeline: hairline reference rows ---------- */
.topten-v3 .glossary{display:grid;grid-template-columns:minmax(0,18ch) minmax(0,1fr);gap:0 28px;
  margin:32px 0 0;padding:0;border-top:1px solid var(--line);background:none}
.topten-v3 .glossary dt{font:700 17px/1.4 Georgia,serif;color:var(--ink);padding:18px 0;border-bottom:1px solid var(--line)}
.topten-v3 .glossary dd{margin:0;font:16px/1.6 Georgia,serif;color:var(--muted);padding:18px 0;border-bottom:1px solid var(--line)}
.topten-v3 .timeline{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line);background:none}
.topten-v3 .timeline li{padding:18px 0;border-bottom:1px solid var(--line);background:none;margin:0}

/* ---------- attributions stay available but stop interrupting ---------- */
.topten-v3 .source-list{font:14px/1.65 'Arial Narrow',Arial,sans-serif;color:var(--muted);
  border-top:1px solid var(--line);padding-top:22px;max-width:62ch}
.topten-v3 .source-list a{color:var(--accent-ink)}

/* ---------- chrome ---------- */
.topten-v3 .library-nav{position:sticky;top:0;z-index:18;display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  background:var(--bg);border:0;border-bottom:1px solid var(--line);box-shadow:none;padding:14px 32px}
.topten-v3 .library-brand{color:var(--ink);font:700 13px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:2px;
  text-transform:uppercase;text-decoration:none;margin-right:auto}
.topten-v3 .library-nav a{color:var(--ink);font:700 14px/1 'Arial Narrow',Arial,sans-serif;text-decoration:none}
.topten-v3 .all-tables>summary{border:1px solid var(--line-ui);border-radius:99px;white-space:nowrap;padding:8px 16px;
  list-style:none;cursor:pointer;font:700 13px/1 'Arial Narrow',Arial,sans-serif}
.topten-v3 .all-tables>summary::-webkit-details-marker{display:none}
.topten-v3 .all-tables-panel a:hover,.topten-v3 .all-tables-panel a:focus-visible,
.topten-v3 .all-tables-panel a[aria-current=page]{background:var(--accent-ink);color:var(--bg)}
.topten-v3 footer{border-top:1px solid var(--line);color:var(--muted);text-align:center;
  font:700 12px/1.5 'Arial Narrow',Arial,sans-serif;letter-spacing:3.5px;text-transform:uppercase;padding:30px 0 8px;margin-top:110px}

/* ---------- terms ---------- */
.topten-v3 .term-link{text-decoration-style:dotted;text-decoration-color:var(--accent-ink);text-decoration-thickness:1.5px}
.topten-v3 .term-link:hover,.topten-v3 .term-link:focus-visible{color:var(--accent-ink);outline-color:var(--accent-ink)}

/* ---------- focus: 3:1 ring plus a ground halo (2.4.11/2.4.13) ---------- */
.topten-v3 a:focus-visible,.topten-v3 button:focus-visible,.topten-v3 summary:focus-visible{
  outline:3px solid var(--accent-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--bg);border-radius:4px}

@media (max-width:900px){
  .topten-v3 .desktop-lesson{grid-template-columns:1fr;gap:24px}
  .topten-v3 .guide-section{margin:90px 0}
  .topten-v3 .glossary{grid-template-columns:1fr;gap:0}
  .topten-v3 .glossary dt{border-bottom:0;padding-bottom:0}
}
@media (max-width:640px){
  .topten-v3 h1{font-size:clamp(56px,15vw,84px)}
  .topten-v3 .guide-hero .hero-copy{padding:44px 6vw 6px}
  .topten-v3 .library-nav{padding:12px 20px;gap:12px}
}
@media print{.topten-v3 .page-toc{display:none}.topten-v3 .guide-hero{width:auto;margin:0}}

/* ---------- topten.css leftovers.
   Those pages paint their cards and disclosures with a hard-coded #0d1728 gradient
   panel, and colour table headers and glossary terms with the raw --accent, which is
   a fill colour: as small text it lands between 3.2:1 and 4.5:1 on every table. The
   v3 rule is that small text uses --accent-ink. The generic link colour above was
   also reaching the skip link and cancelling its own black-on-white pair. */
.topten-v3 .shot-grid article,.topten-v3 .warning-grid article,
.topten-v3 .route-cards article,.topten-v3 .two-up article,
.topten-v3 .step-card,.topten-v3 details:not(.all-tables){
  background:none!important;border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0 0}
.topten-v3 th,.topten-v3 .glossary dt,.topten-v3 .eyebrow,.topten-v3 .section-kicker{color:var(--accent-ink)}
.topten-v3 th{border-bottom:1px solid var(--ink);text-transform:uppercase;letter-spacing:2px;
  font:700 12px/1.4 'Arial Narrow',Arial,sans-serif;padding:12px 16px 12px 0;text-align:left}
.topten-v3 td{border-bottom:1px solid var(--line);padding:16px 16px 16px 0;font-size:16px}
.topten-v3 .skip-link{background:var(--accent-ink);color:var(--bg)}
.topten-v3 summary{color:var(--ink);cursor:pointer}

/* The reading bar that guide-navigation.js injects marks the current section with
   raw --accent, and topten.css panels a few more list types. Same two rules as above:
   small text takes --accent-ink, and panels become hairlines. */
.topten-v3 .guide-reader-bar{background:var(--bg);border:0;border-bottom:1px solid var(--line);box-shadow:none}
.topten-v3 .guide-reader-menu a{color:var(--ink)}
.topten-v3 .guide-reader-menu a[aria-current=location],
.topten-v3 .guide-reader-menu a:hover,.topten-v3 .guide-reader-menu a:focus-visible{color:var(--accent-ink)}
.topten-v3 .action-list li,.topten-v3 .lifecycle li,.topten-v3 .timeline li,
.topten-v3 .na-grid p{background:none!important;border-radius:0}
.topten-v3 .coach{background:none!important;border:0;border-left:2px solid var(--accent);border-radius:0;padding:6px 0 6px 26px}

/* Align the running head to the page column: main is a centred 1200px box with 1rem
   padding, so its text starts at 136px on a 1440 viewport while the nav sat at 32px. */
.topten-v3 .library-nav{padding-inline:max(16px,calc((100vw - 1200px)/2 + 16px))}
@media (max-width:640px){.topten-v3 .library-nav{padding-inline:20px}}
/* The all-tables <details> is taller than its own <summary>, so centring the details
   left the pill sitting below the links next to it. Centre the children uniformly. */
.topten-v3 .library-nav>*{display:flex;align-items:center;min-height:44px}
.topten-v3 .all-tables{position:relative}
.topten-v3 .all-tables>summary{min-height:36px;display:flex;align-items:center}

/* ================= Audit round 1 fixes =================
   fold (h1 was at y=968), prose measure (.detail-body ran 140 chars/line because the
   constraint was a child selector), the reader bar sitting 124px outside the column,
   the All-tables panel overflowing the viewport by 49px and shearing off four guides,
   one shared content column, fixed table proportions, and term links that read as
   spell-check errors. */
.topten-v3 main{max-width:1240px;padding-inline:40px}
.topten-v3 .library-nav{padding-inline:max(40px,calc((100vw - 1240px)/2 + 40px))}
.topten-v3 .guide-reader-bar{padding-inline:max(40px,calc((100vw - 1240px)/2 + 40px))}

.topten-v3 .guide-hero .hero-art{margin:24px auto 0}
.topten-v3 .guide-hero .hero-art img{max-height:52vh}
.topten-v3 .guide-hero .hero-copy{padding:36px 5vw 20px}
.topten-v3 h1{font-size:clamp(60px,6.4vw,104px);margin-bottom:20px}
.topten-v3 .guide-hero .lede{font-size:22px}

.topten-v3 .guide-section p,.topten-v3 .detail-body p,.topten-v3 .detail-body li,
.topten-v3 .mode-card p,.topten-v3 .step-card p,.topten-v3 .evidence-note{max-width:62ch}
.topten-v3 td p,.topten-v3 th p,.topten-v3 figcaption,.topten-v3 figcaption p{max-width:none}

.topten-v3 .all-tables-panel{right:0;left:auto;width:min(760px,calc(100vw - 80px))}
.topten-v3 table{table-layout:fixed;width:100%}
.topten-v3 td,.topten-v3 th{overflow-wrap:break-word}

.topten-v3 .term-link{text-decoration-style:solid;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--accent-ink) 50%,transparent)}
.topten-v3 .term-link:hover,.topten-v3 .term-link:focus-visible{text-decoration-color:var(--accent-ink)}
.topten-v3 .source-list li,.topten-v3 .glossary dd,.topten-v3 .timeline li{max-width:62ch}
/* hero still pushed the lede and CTA past the fold; give the artwork less room */
.topten-v3 .guide-hero .hero-art img{max-height:42vh}
.topten-v3 .guide-hero .hero-copy{padding:28px 5vw 16px}
/* topten.css targets `.hero-copy h1`, which outranked a bare `.topten-v3 h1`; match it
   so the two poster families share one title scale. */
.topten-v3 .guide-hero .hero-copy h1{font-size:clamp(60px,6.4vw,104px);line-height:.9;letter-spacing:1.5px}

/* R1 REGRESSION: right:0 resolved against the wrong containing block, pinning the
   panel 50px off the LEFT edge and 290px away from its own trigger. scrollWidth stays
   1440 for negative overflow, which is why the check missed it. Anchor it to the
   trigger the way the v3 family does. */
.topten-v3 .all-tables{position:relative}
.topten-v3 .all-tables>.all-tables-panel{position:absolute;top:calc(100% + 8px);right:0;left:auto;
  width:min(760px,calc(100vw - 80px));max-width:none}
.topten-v3 .guide-section ul li,.topten-v3 .guide-section ol li{max-width:62ch}
.topten-v3 table{width:100%}
/* topten.css makes .library-nav an overflow-x:auto scroll container, which displaces
   the absolutely-positioned panel out of its trigger's containing block. The nav no
   longer needs to scroll at this size, so release the overflow context. */
.topten-v3 .library-nav{overflow:visible;flex-wrap:wrap}
/* topten.css centres the panel with left:50% + translateX(-50%); that transform was
   sliding the right-anchored panel 380px left, off the viewport. */
.topten-v3 .all-tables>.all-tables-panel{transform:none;left:auto}
/* footer sat in topten.css's wider 1320px box, so its prose ran 220 characters. */
.topten-v3 footer{max-width:1240px;margin-inline:auto;padding-inline:40px}
.topten-v3 footer p,.topten-v3 footer li{max-width:62ch}
.topten-v3 .strategy-table,.topten-v3 .strategy-table table,.topten-v3 table{width:100%}

/* ================= Audit round 3 =================
   N1 REGRESSION: capping max-height on an img whose width stayed 1200px letterboxed
   the artwork inside its own 1px border - 264px of empty framed space each side. Let
   the box shrink with the picture and drop the border.
   N4: at 560 the panel still ran 88px off the left; pin it to the viewport there.
   N5: one desktop-lesson split, and the tech-ref-style right anchor for the panel. */
.topten-v3 .guide-hero .hero-art{text-align:center}
.topten-v3 .guide-hero .hero-art img{width:auto;max-width:100%;max-height:44vh;
  border:0!important;box-shadow:none!important;border-radius:0;margin-inline:auto}
.topten-v3 .desktop-lesson{grid-template-columns:var(--lesson-art-width,340px) minmax(0,1fr)!important;gap:40px!important}
@media (max-width:700px){
  .topten-v3 .all-tables>.all-tables-panel{position:fixed;left:16px;right:16px;top:64px;
    width:auto;max-width:calc(100vw - 32px);transform:none}
}
/* the wordmark now sits inside a banner landmark like the other nine pages */
.topten-v3 header.site-banner{display:block;position:sticky;top:0;z-index:18;background:var(--bg)}
.topten-v3 header.site-banner .library-nav{position:static}
/* guide.css styles the bare `header` element with padding:14px 5vw, which the new
   banner wrapper inherited and stacked on top of the nav's own column padding. */
.topten-v3 header.site-banner{padding:0;border:0;border-bottom:1px solid var(--line)}
.topten-v3 header.site-banner .library-nav{border-bottom:0}
@media (max-width:900px){.topten-v3 .desktop-lesson{grid-template-columns:1fr!important;gap:24px!important}}

/* ================= Audit round 4 =================
   D1: three families, three fixed panel widths (760/900/760), each right-anchored to a
   trigger ~350px from the viewport edge. Whenever the width exceeded the space to the
   left of the trigger the panel ran off-canvas - at 800-1152 on v3, 700-900 on the
   others. scrollWidth stays at the viewport width for negative overflow, which is why
   this survived three rounds. One width formula for all three, derived from the space
   actually available, plus a viewport pin on narrow screens. */
.topten-v3 .all-tables>.all-tables-panel{
  width:min(760px,calc(100vw - 380px))!important;max-width:none!important;
  left:auto!important;right:0!important;transform:none!important}
@media (max-width:820px){
  .topten-v3 .all-tables>.all-tables-panel{position:fixed!important;left:16px!important;right:16px!important;
    top:64px!important;width:auto!important;max-height:72vh;overflow:auto}
}
/* D3: the 340px cell is sized for the playfield image; on cuphead and stranger-things
   it holds prose instead, at 27 characters per line. Fall back to one column there. */
.topten-v3 .desktop-lesson:not(:has(> .lesson-visual)){grid-template-columns:1fr!important}
/* D3 root cause: .desktop-lesson is 340px + 1fr and relies on DOM order, so wherever
   the text block is authored first it lands in the column sized for the playfield
   image and renders at 27 characters per line. Assign columns by role instead. */
.topten-v3 .desktop-lesson>.lesson-visual{grid-column:1}
.topten-v3 .desktop-lesson>.desktop-teaching{grid-column:2}
@media (max-width:900px){
  .topten-v3 .desktop-lesson>.lesson-visual,
  .topten-v3 .desktop-lesson>.desktop-teaching{grid-column:auto}
}
/* D4: grids that stayed multi-column at 560 left prose under 30 characters per line. */
@media (max-width:700px){
  .topten-v3 .shot-grid,.topten-v3 .step-grid,.topten-v3 .na-grid{grid-template-columns:1fr!important}
}
/* a nested card grid inside the 780px teaching column was still splitting to ~238px */
.topten-v3 .desktop-teaching .shot-grid,.topten-v3 .desktop-teaching .step-grid,
.topten-v3 .desktop-teaching .na-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important}
/* D-N1: the per-table sheets place the figure in column 2 at specificity (0,3,1),
   which outranked my (0,3,0), so the image took the 780px column and the prose was
   left in the 340px one - the original 27-cpl bug. With only one of the two rules
   landing, both children ended up in column 2 and auto-placed into separate rows,
   leaving a 340px empty gutter. Both roles now assert at the same weight. */
.topten-v3 .desktop-lesson>.lesson-visual{grid-column:1!important;grid-row:1!important}
.topten-v3 .desktop-lesson>.desktop-teaching{grid-column:2!important;grid-row:1!important}
@media (max-width:900px){
  .topten-v3 .desktop-lesson>.lesson-visual,
  .topten-v3 .desktop-lesson>.desktop-teaching{grid-column:auto!important;grid-row:auto!important}
}
/* topten tables have no scrollable wrapper, so a min-width overflowed the PAGE - a
   worse defect than narrow cells. Auto layout only: columns size to content and the
   page keeps no horizontal scroll. */
@media (max-width:700px){
  .topten-v3 table{table-layout:auto!important;width:100%;min-width:0}
  .topten-v3 td,.topten-v3 th{white-space:normal}
}

/* ---- Art-direction audit: the teaching image was pinned to the 340px image column
   even where the source is 1200-1440px wide. Where a lesson block carries the
   playfield reference, give it the room the source can actually fill. ---- */
.topten-v3 .desktop-lesson:has(img[src*="playfield"]),
.topten-v3 .desktop-lesson:has(img[src*="shot-map"]){
  grid-template-columns:660px minmax(0,1fr)!important}
@media (max-width:1100px){
  .topten-v3 .desktop-lesson:has(img[src*="playfield"]),
  .topten-v3 .desktop-lesson:has(img[src*="shot-map"]){grid-template-columns:1fr!important}
}

/* With the diagram figures removed, a lesson block that has only prose left was still
   laid out on the two-column grid, stranding the text in the second column - one block
   rendered at 238px beside an empty 882px gutter. A lone child takes the full width. */
.topten-v3 .desktop-lesson:has(> :only-child){grid-template-columns:minmax(0,1fr)!important}
.topten-v3 .desktop-lesson > :only-child{grid-column:1/-1!important}

/* field-graphic figures (editorial illustrations) on topten-v3 pages: same treatment guide-v3.css gives them, otherwise a 1536px image overflows the column */
.topten-v3 .field-graphic{margin:30px 0 34px;width:min(100%,980px);background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.topten-v3 .field-graphic img{display:block;width:100%;height:auto;background:var(--bg)}
.topten-v3 .field-graphic figcaption{padding:16px 20px;color:var(--muted);font:15px/1.5 Arial,sans-serif}
.topten-v3 .field-graphic figcaption strong{display:block;color:var(--ink);font:800 17px/1.3 Arial,sans-serif;margin-bottom:5px}
.topten-v3 #shots .field-graphic{width:min(100%,1100px)}
@media(max-width:700px){.topten-v3 .field-graphic{margin:22px 0 28px}.topten-v3 .field-graphic figcaption{padding:14px 16px;font-size:14px}}

/* Scared Stiff is the hero model: full-width art fading into a compact title
   block, instead of a reduced poster floating above it. */
.topten-v3 .guide-hero{max-width:none!important;padding:0!important;gap:0!important}
.topten-v3 .guide-hero .hero-art{width:100%;max-width:none;margin:0;padding:0}
.topten-v3 .guide-hero .hero-art img{
  width:100%;
  max-width:none;
  height:clamp(420px,66vh,700px);
  max-height:none;
  margin:0;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(#000 42%,transparent 92%);
  mask-image:linear-gradient(#000 42%,transparent 92%);
}
.topten-v3 .guide-hero .hero-copy{position:relative;margin:-120px auto 0;padding-top:0}
@media(max-width:640px){
  .topten-v3 .guide-hero .hero-art img{height:clamp(360px,58vh,480px)}
  .topten-v3 .guide-hero .hero-copy{margin:-90px auto 0;padding-top:0}
}