/* /books/the-sim-racers-training-manual/ (templates/training_manual.html), scoped under
   .tmn, in the tokens of /books/ and /shop/: ground #05080f, ink #f4f7fc, dim #a3afc6,
   blue #5bc3f9, gold #f5c542, the manual's red #E8282B. */

body.tmn-page{ height:auto; min-height:100vh; background:#05080f; }
html{ scroll-padding-top:88px; background:#05080f; }
.tmn-page .landing-nav{ position:sticky; top:0; z-index:50; }

.tmn{
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative; overflow:hidden; flex-shrink:0; line-height:normal;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#e7ecf6; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%,rgba(232,40,43,.12),transparent 70%),
    radial-gradient(ellipse 50% 30% at 90% 8%,rgba(47,107,255,.12),transparent 70%),
    #05080f;
}
.tmn :where(h1,h2,h3,p,ul,ol,figure,blockquote){ margin:0; }
.tmn :where(ul,ol){ padding:0; list-style:none; }
.tmn :where(a){ color:#5bc3f9; text-decoration:none; }
.tmn :where(a:hover){ color:#8fd6fb; }

/* ===== Hero ===== */
.tmn-hero{ position:relative; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,80px); align-items:center; max-width:1200px; margin:0 auto; padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(32px,4vw,56px); }
.tmn-hero-glow{ position:absolute; left:8%; top:10%; width:520px; height:520px; border-radius:50%; background:radial-gradient(closest-side,rgba(232,40,43,.22),transparent); filter:blur(10px); pointer-events:none; }
.tmn-cover{ position:relative; justify-self:center; width:min(100%,420px); }
.tmn-cover img{ display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 40px 80px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06); transform:perspective(1400px) rotateY(-8deg); }
.tmn-crumbs{ color:#6f7c96; font-size:13px; }
.tmn-crumbs a{ color:#a3afc6; }
.tmn-h1{ margin-top:14px; color:#f4f7fc; font-size:clamp(36px,5vw,64px); font-weight:800; letter-spacing:-.035em; line-height:1.02; }
.tmn-grad{ display:block; background:linear-gradient(90deg,#ff8a8c,#E8282B 60%,#f5c542); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tmn-sub{ margin-top:14px; color:#f5c542; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.tmn-lede{ margin-top:22px; color:#f4f7fc; font-size:clamp(17px,1.5vw,20px); font-weight:600; line-height:1.5; max-width:560px; }
.tmn-body{ margin-top:14px; color:#a3afc6; font-size:16px; line-height:1.65; max-width:560px; }
.tmn-facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.tmn-facts li{ padding:8px 14px; border:1px solid rgba(160,180,220,.18); border-radius:999px; color:#a3afc6; font-size:14px; }
.tmn-facts b{ color:#f4f7fc; }
.tmn-buy{ display:flex; align-items:center; gap:18px; margin-top:28px; }
.tmn-buy--center{ justify-content:center; }
.tmn-price{ color:#f4f7fc; font-size:32px; font-weight:800; letter-spacing:-.02em; }
.tmn .tmn-btn{ padding:14px 26px; border-radius:12px; background:#5bc3f9; color:#05080f; font-size:16px; font-weight:800; transition:filter .2s,transform .2s; }
.tmn .tmn-btn:hover{ color:#05080f; filter:brightness(1.1); transform:translateY(-1px); }
.tmn .tmn-btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.tmn .tmn-btn:focus-visible{ outline:2px solid #5bc3f9; outline-offset:3px; }
.tmn-note{ margin-top:12px; color:#6f7c96; font-size:13.5px; line-height:1.5; }

/* ===== Sections ===== */
.tmn-sec{ max-width:1200px; margin:0 auto; padding:clamp(56px,7vw,96px) clamp(20px,4vw,48px) 0; }
.tmn-eyebrow{ display:inline-flex; align-items:center; gap:12px; color:#5bc3f9; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.tmn-rule{ flex:none; width:28px; height:1px; background:currentColor; }
.tmn-h2{ margin-top:14px; color:#f4f7fc; font-size:clamp(26px,3.2vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.1; max-width:760px; }

.tmn-quote{ margin-top:28px; max-width:780px; padding:28px 32px; border-left:3px solid #E8282B; border-radius:0 16px 16px 0; background:linear-gradient(90deg,rgba(232,40,43,.08),rgba(255,255,255,.015)); }
.tmn-quote p{ color:#d6deeb; font-size:17px; line-height:1.65; }
.tmn-quote p + p{ margin-top:12px; }
.tmn-quote footer{ margin-top:16px; color:#f5c542; font-size:14px; font-weight:700; }

.tmn-know{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:28px; }
.tmn-know li{ position:relative; padding:18px 20px 18px 50px; border:1px solid rgba(160,180,220,.12); border-radius:14px; background:rgba(255,255,255,.025); color:#e7ecf6; font-size:16px; line-height:1.45; }
.tmn-know li::before{ content:""; position:absolute; left:20px; top:22px; width:12px; height:12px; border-radius:50%; background:#34d399; box-shadow:0 0 10px rgba(52,211,153,.45); }
.tmn-for{ margin-top:20px; color:#a3afc6; font-size:16px; }

.tmn-parts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:32px; }
.tmn-part{ position:relative; overflow:hidden; display:flex; flex-direction:column; padding:24px 22px 24px; border:1px solid rgba(160,180,220,.12); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); transition:border-color .25s,transform .25s; }
.tmn-part:hover{ border-color:rgba(91,195,249,.45); transform:translateY(-3px); }
.tmn-part-n{ position:absolute; top:-18px; right:10px; color:rgba(232,40,43,.14); font-size:120px; font-weight:900; line-height:1; letter-spacing:-.05em; pointer-events:none; }
.tmn-part-k{ position:relative; color:#ff6b6e; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.tmn-part-h{ position:relative; margin-top:8px; color:#f4f7fc; font-size:21px; font-weight:800; letter-spacing:-.015em; line-height:1.2; }
.tmn-part-sum{ position:relative; margin-top:10px; color:#a3afc6; font-size:14.5px; line-height:1.55; }
.tmn-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.tmn-tags li{ padding:5px 10px; border:1px solid rgba(160,180,220,.16); border-radius:999px; background:rgba(255,255,255,.03); color:#d6deeb; font-size:12.5px; font-weight:600; }
@media (max-width:1040px){ .tmn-parts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .tmn-parts{ grid-template-columns:minmax(0,1fr); } }

.tmn-pages{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:32px; }
.tmn-pages img{ display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 24px 50px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06); }
.tmn-pages figcaption{ margin-top:10px; color:#a3afc6; font-size:14px; text-align:center; }

.tmn-final{ padding-bottom:clamp(72px,9vw,120px); text-align:center; }
.tmn-final .tmn-h2{ margin-left:auto; margin-right:auto; }
.tmn-final .tmn-lede{ margin:14px auto 0; color:#a3afc6; font-weight:500; }

@media (max-width:860px){
  .tmn-hero{ grid-template-columns:minmax(0,1fr); }
  .tmn-cover{ width:min(70%,320px); }
  .tmn-pages{ grid-template-columns:minmax(0,1fr); max-width:420px; }
}
@media (prefers-reduced-motion:reduce){ .tmn .tmn-btn{ transition:none; } }