/* Team Landing — styles for taxonomy-by-team.php
 * Ported from the standalone team-ferrari-v2.html design.
 *
 * Every rule is scoped under .tl-page so nothing leaks into the rest of the
 * theme; only :root custom properties stay global. The mockup was a complete
 * standalone page, so its own header, drawer, breadcrumb, footer and toast
 * rules are dropped here — WordPress supplies that chrome via get_header()
 * and get_footer().
 *
 * Loaded only on by-team term archives (see team-landing.php). */
:root{--bg:#f4f5f7;--surface:#ffffff;--fg:#15181d;--muted:#6a7280;--border:#e6e8eb;
  --accent:#e10600;--accent-ink:#c20500;
  --dark:#0c0e13;--dark-2:#171a21;--dark-line:rgba(255,255,255,.09);
  --success:#16a34a;--danger:#e11d48;--warn:#f5a623;
  
  --team:#cc0000;--team-hi:#ff4422;--team-dk:#5a0000;
  --r:12px;--shadow:0 6px 24px rgba(15,24,40,.10);--wrap:1280px;
  --font-display:'Saira Condensed','Archivo Narrow',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
.tl-page *{box-sizing:border-box;margin:0;padding:0}
.tl-page img{display:block;max-width:100%}
.tl-page a{color:inherit;text-decoration:none}
.tl-page button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.tl-page ul{list-style:none}
.tl-page :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.tl-page .wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.tl-page .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px}
.tl-page .eyebrow::before{content:"";width:24px;height:2px;background:var(--accent);display:inline-block}
.tl-page .eyebrow.on-dark{color:#ff5a52}
.tl-page section.block{padding:64px 0}
.tl-page .hrow{display:flex;align-items:center;gap:22px;height:68px}
.tl-page .badge{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.tl-page .hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.tl-page .hero::before{content:"";position:absolute;top:-70%;left:-28%;width:104%;height:210%;pointer-events:none;
  background:radial-gradient(ellipse at 42% 46%,
    rgba(190,10,10,.30) 0%,
    rgba(170,12,12,.17) 26%,
    rgba(140,14,14,.07) 48%,
    rgba(90,12,12,.02) 66%,
    transparent 80%)}
.tl-page .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px),
             linear-gradient(180deg,transparent 40%,rgba(12,14,19,.55) 100%)}
/* container-type lets the wordmark below size itself against the hero's real
   width rather than the viewport, so a long team name lands on one line. */
.tl-page .hero-inner{position:relative;z-index:2;padding:44px 0 40px;container-type:inline-size}
.tl-page .hero-inner > .eyebrow, .tl-page .hero-inner h1, .tl-page .hero-stripe, .tl-page .hero-body, .tl-page .hero-cta{position:relative;z-index:1}
.tl-page .hero-rail{position:absolute;left:-52px;top:120px;transform:rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.34em;font-size:11.5px;font-weight:600;color:#5c6475;white-space:nowrap}
@media(max-width:1420px){.tl-page .hero-rail{display:none}}
.tl-page .hero-kicker{display:flex;align-items:center;gap:14px;margin:22px 0 2px}
.tl-page .hero-kicker span{font-family:var(--font-display);text-transform:uppercase;font-weight:700;letter-spacing:.38em;font-size:clamp(15px,2vw,26px);color:#8a94a4}
.tl-page .hero-kicker i{flex:1;height:1px;background:linear-gradient(90deg,var(--dark-line),transparent);max-width:340px}
.tl-page .hero h1{margin:0}
/* Was clamp(72px,15.5vw,232px): 223px at desktop, which pushed a two-word name
   like "Factory Racing." onto a second line and 357px of hero before the copy
   even started. The smaller ramp keeps the wordmark dominant without that, and
   --tl-name-cap (printed per team from the name's length) trims it further when
   the name is long enough to still wrap. */
.tl-page .wordmark{display:block;font-family:var(--font-display);font-style:italic;text-transform:uppercase;font-weight:900;
  font-size:min(clamp(64px,11.5vw,168px),var(--tl-name-cap,168px));line-height:.8;letter-spacing:-.05em;color:#fff;overflow-wrap:break-word}
.tl-page .wordmark .dot{color:var(--accent)}
.tl-page .hero-stripe{display:block;height:12px;width:min(100%,760px);margin:22px 0 0;transform:skewX(-24deg);
  background:linear-gradient(90deg,var(--accent) 0 44%,rgba(225,6,0,.55) 68%,rgba(225,6,0,0) 100%);border-radius:2px}
/* Hero image. No object-fit:cover — the file is pre-cropped to 16:9 by
   commons-images.py, so what shipped is what was reviewed, and the intrinsic
   width/height wp_get_attachment_image() prints reserves the box against layout
   shift. A dark plate and a hairline keep a bright track photo from floating on
   the near-black hero. */
.tl-page .hero-media{margin:26px 0 0;position:relative;z-index:1}
/* Logo treatment. A team logo is dark ink on transparency: on the hero's own
   near-black plate the wordmark is invisible and only a coloured device survives,
   so it gets a white plate and real padding instead of bleeding to the edge.
   min-height keeps a 10:3 wordmark from collapsing the column to a thin strip. */
.tl-page .hero-media--logo{background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:clamp(20px,3.4cqw,42px);min-height:0;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.tl-page .hero-media--logo .hero-media-img{border:0;border-radius:0;background:none;box-shadow:none;
  /* A portrait lockup — star stacked over the wordmark, as Mercedes' 2026 mark is —
     would otherwise render 0.9:1 in a 404px-wide plate, i.e. ~446px tall against a
     ~290px wordmark stack on the left, and the hero would grow by half again just
     to hold it. Cap the height and let the width follow, so a tall mark is scaled
     down and centred instead of setting the hero's height. Wide marks are well
     under this (McLaren 10:3 lands at ~121px, Williams 2.85:1 at ~142px) so they
     are untouched. */
  max-height:260px;width:auto;max-width:100%;margin-inline:auto}

/* The credit. Its own plate rather than a text-shadow: it has to hold up over a
   white logo plate and over a grey track photo, and only a solid backing does
   both. White on rgba(9,11,15,.82) clears 4.5:1 either way. */
.tl-page .hero-media-credit{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);
  padding:5px 9px;border-radius:6px;background:rgba(9,11,15,.82);
  font-size:10.5px;line-height:1.35;letter-spacing:.01em;color:#e7ebf1}
.tl-page .hero-media-credit a{color:#e7ebf1;text-decoration:underline;text-decoration-color:rgba(231,235,241,.45);text-underline-offset:2px}
.tl-page .hero-media-credit a:hover{color:#fff;text-decoration-color:#fff}
.tl-page .hero-media-credit a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px}
.tl-page .hero-media-img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--dark-line);background:#0b0d12;box-shadow:0 22px 60px rgba(0,0,0,.5)}

.tl-page .hero-body{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;margin-top:34px}
.tl-page .hero-lead p{color:#aeb7c4;font-size:16.5px;line-height:1.72;margin-bottom:14px;max-width:56ch}
.tl-page .hero-lead p:last-child{margin-bottom:0}
.tl-page .hero-lead b{color:#fff;font-weight:600}
.tl-page .ledger{border-top:1px solid var(--dark-line)}
.tl-page .ledger div{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--dark-line);align-items:baseline}
.tl-page .ledger dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5c6475;font-weight:600}
.tl-page .ledger dd{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:16px;color:#e7ebf1;letter-spacing:.01em}
.tl-page .ledger dd b{color:#ff5a52}
.tl-page .ledger .it-flag{display:inline-flex;width:22px;height:15px;border-radius:3px;overflow:hidden;vertical-align:-2px;margin-right:8px;border:1px solid rgba(255,255,255,.22)}
.tl-page .ledger .it-flag span{flex:1}
.tl-page .ledger .it-flag .g{background:#008c45}
.tl-page .ledger .it-flag .w{background:#f4f5f0}
.tl-page .ledger .it-flag .r{background:#cd212a}
.tl-page .ghost-num{position:absolute;right:-14px;bottom:-26px;z-index:0;font-family:var(--font-display);font-style:italic;font-weight:900;
  font-size:clamp(180px,22vw,340px);line-height:.72;letter-spacing:-.06em;color:rgba(255,255,255,.045);pointer-events:none;user-select:none}
@media(max-width:1180px){.tl-page .ghost-num{display:none}}
.tl-page .hero-cta{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:34px}
.tl-page .btn{height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:9px;transition:.18s}
.tl-page .btn:active{transform:translateY(1px)}
.tl-page .btn-pri{background:var(--accent);color:#fff;font-weight:700}
.tl-page .btn-pri:hover{background:#ff1a12;color:#fff;box-shadow:0 10px 30px rgba(225,6,0,.4)}
.tl-page .tlink{font-size:14px;font-weight:600;color:#dfe4ec;display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px;transition:.15s}
.tl-page .tlink:hover{color:#fff;border-color:#fff}
.tl-page .stats{position:relative;z-index:3;background:#050709;border-top:1px solid var(--dark-line)}
.tl-page .stats-row{display:grid;grid-template-columns:repeat(4,1fr)}
.tl-page .stat{padding:26px 28px 26px 0;border-right:1px solid var(--dark-line);display:flex;align-items:baseline;gap:14px}
.tl-page .stat:not(:first-child){padding-left:28px}
.tl-page .stat:last-child{border-right:0}
.tl-page .stat .n{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,4.4vw,54px);color:var(--accent);line-height:.9;font-variant-numeric:tabular-nums;flex:none}
.tl-page .stat .txt{min-width:0}
.tl-page .stat .l{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#98a2b2;font-weight:600;line-height:1.3}
.tl-page .stat .s{font-size:11.5px;color:#6a7484;margin-top:5px;line-height:1.35}
.tl-page .ribbon{position:relative;z-index:3;background:#08090d;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
.tl-page .ribbon-row{display:flex;align-items:center;gap:22px;padding:16px 0}
.tl-page .ribbon-lbl{flex:none;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:12px;letter-spacing:.16em;color:#ff5a52;max-width:132px;line-height:1.35}
.tl-page .ribbon-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.tl-page .ribbon-track::-webkit-scrollbar{display:none}
.tl-page .yr{flex:none;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.04em;color:#c6cedb;background:rgba(255,255,255,.045);
  border:1px solid var(--dark-line);border-radius:999px;padding:7px 15px;font-variant-numeric:tabular-nums;transition:.15s;white-space:nowrap}
.tl-page .yr:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.32);color:#fff}
.tl-page .yr.dbl{color:#fff;border-color:rgba(225,6,0,.55);background:rgba(225,6,0,.16)}
.tl-page .yr.dbl:hover{background:rgba(225,6,0,.3);border-color:#ff5a52;color:#fff}
.tl-page .yr.dbl::after{content:"★";margin-left:7px;color:#ff7a72;font-size:11px}
.tl-page .seo-grid{display:grid;grid-template-columns:1.7fr .9fr;gap:48px;align-items:start}
.tl-page .seo-main h2{font-family:var(--font-display);text-transform:uppercase;font-weight:800;font-size:clamp(26px,3.2vw,38px);line-height:1.05;margin:14px 0 18px}
.tl-page .seo-main p{color:#33373e;font-size:16.5px;line-height:1.75;margin-bottom:14px;max-width:66ch;text-wrap:pretty}
.tl-page .seo-main p.drop::first-letter{font-family:var(--font-display);font-weight:900;font-size:70px;line-height:.7;float:left;margin:6px 12px 0 0;color:var(--accent-ink)}
.tl-page .seo-aside{background:var(--dark);color:#fff;border-radius:var(--r);padding:26px;position:sticky;top:88px}
.tl-page .seo-aside h4{color:#ffffff;font-family:var(--font-display);text-transform:uppercase;font-weight:800;font-size:16px;letter-spacing:.04em;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.tl-page .seo-aside h4::before{content:"";width:22px;height:3px;background:var(--accent);border-radius:2px}
.tl-page .fact li{display:grid;grid-template-columns:118px 1fr;gap:10px;font-size:13.5px;line-height:1.5;padding:11px 0;border-bottom:1px solid var(--dark-line);color:#cdd5e0}
.tl-page .fact li:last-child{border-bottom:0}
.tl-page .fact li span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b7688;font-weight:600;padding-top:2px}
.tl-page .fact li b{font-family:var(--font-display);font-weight:700;color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.01em}
.tl-page .chapter{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:52px}
.tl-page .chapter:last-child{margin-bottom:0}
.tl-page .chapter.flip .ch-art{order:-1}
.tl-page .ch-art{position:relative;border-radius:16px;overflow:hidden;min-height:340px;border:1px solid var(--border);background:linear-gradient(150deg,#1a1d24,#0c0e13)}
.tl-page .ch-art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 24px)}
.tl-page .ch-art.a{background:linear-gradient(150deg,#2a0606,#0c0e13 62%)}
.tl-page .ch-art.b{background:linear-gradient(150deg,#3a0a04,#0c0e13 62%)}
.tl-page .ch-art.c{background:linear-gradient(150deg,#21252d,#0c0e13 62%)}
.tl-page .ch-art .ghost{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:clamp(80px,12vw,160px);color:rgba(255,255,255,.07);letter-spacing:-.03em;text-transform:uppercase;padding:0 16px;text-align:center;line-height:.9}
.tl-page .ch-art .ch-cap{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:600;color:rgba(255,255,255,.62)}
/* Era card carrying a real photo instead of the watermark word.
   The watermark card is a flat 340px panel, which crops a photo to roughly 2.6:1
   and cuts the top off most of them, so image mode takes a 16:10 box instead.
   The diagonal hatch is dropped (it reads as dirt over a photograph) and a bottom
   scrim keeps the caption legible whatever the image is. The gradient background
   stays as the placeholder shown while the image lazy-loads. */
.tl-page .ch-art.has-img{aspect-ratio:16/10;min-height:0;max-width:100%}
.tl-page .ch-art.has-img::before{display:none}
.tl-page .ch-art.has-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(6,7,10,.78) 0,rgba(6,7,10,.25) 34%,rgba(6,7,10,0) 62%)}
.tl-page .ch-art .ch-img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:inherit}
.tl-page .ch-num{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.14em;color:var(--accent-ink)}
.tl-page .chapter h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.02;margin:8px 0 16px}
.tl-page .chapter p{color:#33373e;font-size:16px;line-height:1.7;max-width:54ch;margin-bottom:12px}
.tl-page .chapter p:last-child{margin-bottom:0}
.tl-page .tl{position:relative;max-width:860px;margin:0 auto;padding:8px 0}
.tl-page .tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--border) 6%,var(--border) 94%,transparent);transform:translateX(-50%)}
.tl-page .tl-item{position:relative;width:50%;padding:0 42px 34px 0}
.tl-page .tl-item:nth-child(even){margin-left:50%;padding:0 0 34px 42px;text-align:left}
.tl-page .tl-item:nth-child(odd){text-align:right}
.tl-page .tl-item::after{content:"";position:absolute;top:4px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--border)}
.tl-page .tl-item:nth-child(odd)::after{right:-7px}
.tl-page .tl-item:nth-child(even)::after{left:-7px}
.tl-page .tl-yr{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--accent-ink);line-height:1}
.tl-page .tl-item h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:18px;margin:4px 0 6px}
.tl-page .tl-item p{font-size:13.5px;color:var(--muted);line-height:1.5;max-width:40ch;margin-left:auto}
.tl-page .tl-item:nth-child(even) p{margin-left:0;margin-right:auto}
.tl-page .rec-wrap{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.tl-page table.rec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tl-page table.rec caption{text-align:left;padding:16px 18px;font-size:13px;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--border)}
.tl-page table.rec th{background:var(--dark);color:#cdd5e0;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;font-weight:600;text-align:left;padding:13px 18px}
.tl-page table.rec th:last-child{text-align:right}
.tl-page table.rec td{padding:12px 18px;font-size:14px;border-bottom:1px solid var(--border);color:#33373e}
.tl-page table.rec td:first-child{font-family:var(--font-display);font-weight:700;font-size:16px}
.tl-page table.rec td:last-child{text-align:right}
.tl-page table.rec tr:last-child td{border-bottom:0}
.tl-page table.rec tr.double{background:rgba(225,6,0,.06)}
.tl-page table.rec tr.double td:first-child{color:var(--accent-ink)}
.tl-page .dbl{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:6px;background:var(--accent);color:#fff}
.tl-page .rec-note{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.6;max-width:78ch}
.tl-page .cars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tl-page .car{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.tl-page .car-art{position:relative;height:132px;background:linear-gradient(150deg,var(--team),var(--team-dk));display:grid;place-items:center;overflow:hidden}
.tl-page .car-art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 22px)}
.tl-page .car-art b{position:relative;font-family:var(--font-display);font-style:italic;font-weight:900;font-size:44px;color:rgba(255,255,255,.42);letter-spacing:-.02em;line-height:1}
.tl-page .car-yr{position:absolute;top:10px;left:12px;z-index:2;font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.1em;color:#fff;background:rgba(6,8,11,.42);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 10px}
/* Car card carrying a real photo instead of the ghosted model code.
   The gradient strip is a flat 132px, too short for a car to read; image mode takes
   a 2:1 box instead. The hatch overlay is dropped and a light bottom scrim grounds
   the card, which matters on museum shots with bright floors. */
.tl-page .car-art.has-img{height:auto;aspect-ratio:2/1}
.tl-page .car-art.has-img::before{display:none}
.tl-page .car-art.has-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(6,7,10,.42) 0,rgba(6,7,10,0) 42%)}
.tl-page .car-art .car-img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;border:0}
.tl-page .car-body{padding:16px 18px 20px}
.tl-page .car-body h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;font-size:20px;line-height:1.05}
.tl-page .car-body p{font-size:14px;color:#4a5261;line-height:1.6;margin-top:8px}
.tl-page .legends{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.tl-page .legends::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 26px)}
.tl-page .legends .wrap{position:relative;z-index:1}
.tl-page .legends .eyebrow{margin-bottom:24px}
.tl-page .legend-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tl-page .legend{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--dark-line);border-radius:12px;background:rgba(255,255,255,.02);transition:.15s}
.tl-page .legend:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);transform:translateY(-3px)}
.tl-page .legend .lav{width:54px;height:54px;border-radius:50%;background:linear-gradient(150deg,var(--team),var(--team-dk));border:1px solid var(--dark-line);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:17px;color:#fff;flex-shrink:0}
.tl-page .legend .lname{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:16px;line-height:1.05;letter-spacing:.01em}
.tl-page .legend .lstat{font-size:12px;color:#8b95a5;margin-top:6px;font-variant-numeric:tabular-nums}
.tl-page .quote{position:relative;background:var(--dark);color:#fff;overflow:hidden;padding:72px 0}
.tl-page .quote::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px)}
.tl-page .quote::after{content:"";position:absolute;top:-60%;left:-18%;width:82%;height:220%;
  background:radial-gradient(ellipse at 44% 48%,rgba(190,10,10,.26) 0%,rgba(160,12,12,.13) 30%,rgba(120,12,12,.05) 54%,transparent 76%)}
.tl-page .quote-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.7fr .9fr;gap:48px;align-items:center}
.tl-page .quote blockquote{color:#ffffff;font-family:var(--font-display);text-transform:uppercase;font-weight:800;font-size:clamp(26px,4vw,48px);line-height:1.05;letter-spacing:-.01em}
.tl-page .quote blockquote .mark{color:var(--accent)}
.tl-page .quote cite{display:block;margin-top:20px;font-style:normal;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#8791a0;font-weight:500}
.tl-page .quote cite b{color:#fff;font-family:var(--font-display);font-weight:700}
.tl-page .q-posts h5{font-family:var(--font-display);text-transform:uppercase;font-size:13px;letter-spacing:.1em;color:var(--accent);margin-bottom:14px}
.tl-page .q-post{display:block;padding:13px 0;border-bottom:1px solid var(--dark-line)}
.tl-page .q-post:last-child{border-bottom:0}
.tl-page .q-post .qd{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5c6475;font-weight:600}
.tl-page .q-post .qt{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:17px;color:#e7ebf1;line-height:1.15;margin-top:3px;transition:color .15s}
.tl-page .q-post:hover .qt{color:var(--accent)}
.tl-page .faq{max-width:900px}
.tl-page .faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.tl-page .faq summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:19px;line-height:1.15;transition:background .15s}
.tl-page .faq summary::-webkit-details-marker{display:none}
.tl-page .faq summary:hover{background:#eef0f3}
.tl-page .faq details[open] summary{background:#eef0f3;border-bottom:1px solid var(--border)}
.tl-page .faq summary .chev{flex:none;width:28px;height:28px;border-radius:999px;border:1px solid var(--border);display:grid;place-items:center;color:var(--fg);transition:transform .2s}
.tl-page .faq details[open] summary .chev{transform:rotate(180deg);background:var(--accent);border-color:var(--accent);color:#fff}
.tl-page .faq .ans{padding:18px 22px 22px;font-size:15.5px;line-height:1.75;color:#33373e;max-width:72ch}
.tl-page .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.tl-page .sec-head h2{font-family:var(--font-display);text-transform:uppercase;font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.02;margin-top:10px}
.tl-page .sec-head .viewall{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);display:inline-flex;align-items:center;gap:6px;transition:gap .15s}
.tl-page .sec-head .viewall:hover{gap:12px;color:var(--accent-ink)}
.tl-page .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tl-page .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.tl-page .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d7dade}
.tl-page .thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--dark);display:grid;place-items:center}
.tl-page .thumb.t-red{background:linear-gradient(150deg,#3a0505,#12060a 62%)}
.tl-page .thumb.t-dark{background:linear-gradient(150deg,#15181d,#0c0e13)}
.tl-page .thumb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 22px)}
.tl-page .poster{position:relative;z-index:1;text-align:center;color:#fff;padding:18px}
.tl-page .poster .pk{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;color:rgba(255,255,255,.55);font-weight:600}
.tl-page .poster .pn{font-family:var(--font-display);font-style:italic;font-weight:900;font-size:66px;line-height:.84;color:var(--accent);margin:8px 0 0}
.tl-page .poster .pl{font-family:var(--font-display);text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:15px;color:#fff;margin-top:8px}
.tl-page .poster .pstripe{width:56px;height:4px;background:var(--accent);margin:12px auto 0;border-radius:2px}
.tl-page .ptag{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--font-display);text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:11.5px;padding:4px 10px;border-radius:7px;color:#fff;background:var(--accent)}
.tl-page .ptag.hot{background:#111;color:#fff;border:1px solid rgba(255,255,255,.25)}
.tl-page .pbody{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.tl-page .pcat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tl-page .ptitle{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:18px;line-height:1.08}
.tl-page .pnote{font-size:12.5px;color:var(--muted);line-height:1.4}
.tl-page .pfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.tl-page .price{font-family:var(--font-display);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.tl-page .pfoot .add{width:44px;height:44px;border-radius:10px;background:var(--dark);color:#fff;display:grid;place-items:center;transition:.15s}
.tl-page .pfoot .add:hover{background:var(--accent);color:#fff}
.tl-page .shop-note{font-size:13px;color:var(--muted);margin-top:18px;display:flex;align-items:center;gap:9px}
.tl-page .shop-note svg{color:var(--accent-ink);flex:none}
.tl-page .tm-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tl-page .tm-tile{position:relative;aspect-ratio:1/1;background:linear-gradient(160deg,var(--dark-2) 0%,var(--dark) 70%);border-radius:14px;overflow:hidden;display:grid;place-items:center;color:#fff;transition:transform .2s,box-shadow .2s}
.tl-page .tm-tile:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.tl-page .tm-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.16),transparent 65%);pointer-events:none}
.tl-page .tm-tile .abbr{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(38px,5vw,60px);color:rgba(255,255,255,.34);letter-spacing:-.04em}
.tl-page .tm-tile .nm{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.94);z-index:2}
@media(max-width:1024px){.tl-page .wrap{padding:0 24px}
.tl-page .pgrid{grid-template-columns:repeat(2,1fr)}
.tl-page .cars{grid-template-columns:repeat(2,1fr)}
.tl-page .legend-row{grid-template-columns:repeat(2,1fr)}
.tl-page .tm-row{grid-template-columns:repeat(3,1fr)}}
/* Two-column hero from 961px. Same 1.15fr/.85fr split and 52px gap as .hero-body
   below it, so the image's right edge lands exactly on the ledger's — the whole
   point of putting it here rather than floating it. The image spans the eyebrow,
   wordmark and stripe rows and sits at the top of that span; .hero-rail and
   .ghost-num are absolutely positioned and so stay out of the grid entirely.
   Below 961px none of this applies and the hero is the single column it always
   was, with the image in source order between the name and the prose. */
@media(min-width:961px){
  .tl-page .hero-inner.has-media{display:grid;grid-template-columns:1.15fr .85fr;column-gap:52px;align-items:start;
    grid-template-areas:"eyebrow media" "title media" "stripe media" "body body" "cta cta"}
  .tl-page .hero-inner.has-media > .eyebrow{grid-area:eyebrow}
  .tl-page .hero-inner.has-media > h1{grid-area:title}
  .tl-page .hero-inner.has-media > .hero-stripe{grid-area:stripe}
  .tl-page .hero-inner.has-media > .hero-body{grid-area:body}
  .tl-page .hero-inner.has-media > .hero-cta{grid-area:cta}
  .tl-page .hero-inner.has-media > .hero-media{grid-area:media;align-self:start;margin:22px 0 0}
}

@media(max-width:960px){.tl-page .hero-body{grid-template-columns:1fr;gap:28px;margin-top:28px}
.tl-page .hero-stripe{width:min(100%,420px);height:10px}
.tl-page .seo-grid{grid-template-columns:1fr;gap:30px}
.tl-page .seo-aside{position:static}
.tl-page .chapter{grid-template-columns:1fr;gap:22px}
.tl-page .chapter.flip .ch-art{order:0}
.tl-page .ch-art{min-height:230px}
.tl-page .quote-grid{grid-template-columns:1fr;gap:30px}
.tl-page .tl::before{left:8px}
.tl-page .tl-item, .tl-page .tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 28px 34px;text-align:left}
.tl-page .tl-item::after, .tl-page .tl-item:nth-child(odd)::after, .tl-page .tl-item:nth-child(even)::after{left:1px;right:auto}
.tl-page .tl-item p, .tl-page .tl-item:nth-child(even) p{margin-left:0}}
@media(max-width:640px){.tl-page section.block{padding:48px 0}
.tl-page .hero-inner{padding:32px 0 34px}
.tl-page .hero-kicker{margin:16px 0 0}
.tl-page .hero-kicker i{display:none}
.tl-page .stats-row{grid-template-columns:1fr 1fr}
.tl-page .stat{padding:20px 14px 20px 0;gap:12px}
.tl-page .stat:not(:first-child){padding-left:14px}
.tl-page .stat:nth-child(3){padding-left:0}
.tl-page .ribbon-row{flex-direction:column;align-items:flex-start;gap:12px}
.tl-page .ribbon-lbl{max-width:none}
.tl-page .ribbon-track{width:100%}
.tl-page .ledger div{grid-template-columns:112px 1fr;gap:10px}
.tl-page .stat:nth-child(2){border-right:0}
.tl-page .stat:nth-child(1), .tl-page .stat:nth-child(2){border-bottom:1px solid var(--dark-line)}
.tl-page .pgrid, .tl-page .cars{grid-template-columns:1fr}
.tl-page .legend-row{grid-template-columns:1fr}
.tl-page .tm-row{grid-template-columns:repeat(2,1fr)}
.tl-page .sec-head{flex-direction:column;align-items:flex-start;gap:8px}
.tl-page .rec-wrap{overflow-x:auto}
.tl-page table.rec{min-width:600px}
.tl-page .btn{width:100%;justify-content:center}
.tl-page .faq summary{font-size:17px;padding:16px 16px}
.tl-page .faq .ans{padding:16px}}
/* ---- additions for the WordPress template (not in the static mockup) ---- */
/* Visually-hidden table caption: the design shows no caption, but the table
   still needs one for screen readers when the editor leaves the field empty. */
.tl-page .tl-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Sources list under the record table — the trust leg of E-E-A-T. */
.tl-page .tl-srcs-wrap{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}
.tl-page .tl-srcs-h{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--muted);margin:0 0 10px}
.tl-page ol.tl-srcs{margin:0;padding-left:20px;display:grid;gap:7px}
.tl-page ol.tl-srcs li{font-size:14px;color:var(--fg);line-height:1.45}
.tl-page ol.tl-srcs a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.tl-page .tl-src-pub{color:var(--muted)}
/* ?view=all turns the carousel row into a full grid, plus its own pager. */
.tl-page .pgrid.is-grid{grid-template-columns:repeat(4,1fr)}
.tl-page .tl-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
.tl-page .tl-pg{display:grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--fg);font-weight:700;font-size:14px;text-decoration:none}
.tl-page .tl-pg:hover{border-color:var(--accent);color:var(--accent)}
.tl-page .tl-pg.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:1100px){.tl-page .pgrid.is-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.tl-page .pgrid.is-grid{grid-template-columns:repeat(2,1fr)}}
/* Ghost watermark step-down. The base clamp is tuned for a four-digit year; a
   longer word (a place name, say) overflows the card at that size, so the
   template adds a class based on character count and these rules shrink it. */
.tl-page .ch-art .ghost.ghost-sm{font-size:clamp(56px,8vw,104px)}
.tl-page .ch-art .ghost.ghost-xs{font-size:clamp(38px,5.4vw,70px);letter-spacing:-.02em}
/* Breadcrumb bar. Adapted from the mockup's .crumb, but written against Rank
   Math's real output, which is a flat inline sequence with no <p> wrapper:
     <a>Home</a><span class="separator"> › </span><span class="last">By Team</span>
     <span class="separator"> › </span><span class="last">Scuderia Ferrari</span>
   Layout therefore lives on .wrap, and no flex/gap is used — the separators
   already carry their own spaces, so flexing would double the gaps.

   Rank Math tags EVERY non-linked crumb as .last, so the taxonomy base ("By Team",
   which has no archive page to link to) gets it as well as the current term. Only
   the final one is treated as the current page; the rest stay muted. */
.tl-page .tl-crumb{background:var(--dark);border-bottom:1px solid var(--dark-line)}
.tl-page .tl-crumb .wrap{padding-top:11px;padding-bottom:11px;font-size:12.5px;line-height:1.5;color:#7a8494}
.tl-page .tl-crumb a{color:#9aa6b6;text-decoration:none;transition:color .15s}
.tl-page .tl-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.tl-page .tl-crumb .separator{color:#3c4453}
.tl-page .tl-crumb .last{color:#7a8494;font-weight:400}
.tl-page .tl-crumb .last:last-child{color:#fff;font-weight:600}

/* Highlight-video modal. Hidden until the Watch highlight button is pressed;
   the iframe inside .tl-video-frame is created by JS at that moment, so a page
   view costs no third-party request. */
.tl-page .tl-video-open{background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.tl-video-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}
.tl-video-modal[hidden]{display:none}
.tl-video-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82)}
.tl-video-box{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.tl-video-frame,.tl-video-frame iframe{width:100%;height:100%;border:0;display:block}
.tl-video-close{position:absolute;top:-44px;right:0;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.tl-video-close:hover{background:rgba(255,255,255,.26)}
@media (max-width:600px){.tl-video-close{top:auto;bottom:-46px}}