/* October Sky section (/october-sky/): the story of the Rocket Boys of Coalwood. Used by layouts/october-sky/ and
   layouts/partials/os-page.html. The drawings are inline SVG in the content files; people in them use the site's one
   cartoon skin color (#ffcc4d, outline #e8a93a). */
.os{--g:#004225;--g2:#00562f;--gold:#b8963e;--acc:#004225;max-width:900px;margin:0 auto;line-height:1.6}
[data-theme="dark"] .os{--acc:#6cc79a}
.os a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:2px;box-shadow:none}
.os a:hover{color:var(--acc)}
.os .os-steps{padding-left:1.4rem;margin:.4rem 0}
.os-crumbs{font-size:.85rem;color:var(--secondary);margin:0 0 .6rem}
.os-crumbs a{text-decoration:none;box-shadow:none}
.os-hero{background:linear-gradient(135deg,#004225 0%,#00562f 100%);color:#fff;border-radius:14px;padding:1.4rem 1.6rem;margin:0 0 1rem;position:relative;overflow:hidden}
.os-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;border:2px dashed rgba(230,207,143,.35);pointer-events:none}
.os-eyebrow{margin:0;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:#e6cf8f}
.os-hero h1{margin:.15rem 0 .35rem;font:700 2.1rem/1.15 Georgia,"Times New Roman",serif;color:#fff}
.os-hero p{margin:0;color:#d3e6da;max-width:44rem}
.os-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.4rem;padding:0;list-style:none}
.os-nav a{display:inline-block;font:600 .88rem system-ui,sans-serif;padding:.38rem .8rem;border-radius:999px;border:1px solid var(--border);background:var(--entry);color:var(--primary);text-decoration:none;box-shadow:none}
.os-nav a:hover{border-color:var(--acc)}
.os-nav a[aria-current="page"]{background:#004225;border-color:#004225;color:#fff}
.os-nav a.os-course{border-color:var(--gold)}
.os h2{font:700 1.45rem/1.25 Georgia,serif;color:var(--acc);margin:2rem 0 .5rem}
.os h3{font:700 1.12rem/1.3 Georgia,serif;margin:1.3rem 0 .35rem}
.os p,.os li{max-width:46rem}
.os>p,.os-act>p,.os-act>section>p{margin:0 0 .85rem}
.os-lead{font-size:1.06rem;color:var(--primary)}
.os-note{border:1px solid var(--border);border-left:4px solid var(--gold);background:var(--entry);border-radius:10px;padding:.75rem 1rem;margin:1rem 0}
.os-note p{margin:.25rem 0}
.os-safe{border-left-color:#004225}
[data-theme="dark"] .os-safe{border-left-color:#6cc79a}
.os-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem;margin:1rem 0;padding:0;list-style:none}
.os-cards li{max-width:none}
.os-cards a{display:block;height:100%;box-sizing:border-box;padding:.85rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--entry);color:var(--primary);text-decoration:none;box-shadow:none}
.os-cards a:hover{border-color:var(--acc)}
.os-cards b{display:block;font:700 1.05rem Georgia,serif;color:var(--acc);margin-bottom:.2rem}
.os-cards span{font-size:.9rem;color:var(--secondary)}
.os-cards .os-feature a{border-color:var(--gold);border-width:2px}

/* The illustrated timeline */
.os-tl{list-style:none;margin:1rem 0;padding:0 0 0 1.3rem;border-left:3px solid #c9b07a}
.os-tl>li{position:relative;max-width:none;display:grid;grid-template-columns:240px 1fr;gap:1rem;align-items:start;margin:0 0 1.1rem;padding:.8rem;background:var(--entry);border:1px solid var(--border);border-radius:12px}
.os-tl>li::before{content:"";position:absolute;left:calc(-1.3rem - 10px);top:1.1rem;width:13px;height:13px;border-radius:50%;background:var(--gold);border:2px solid var(--theme)}
.os-tl svg{width:100%;height:auto;display:block;border-radius:8px}
.os-when{font:600 .8rem system-ui,sans-serif;color:var(--secondary);letter-spacing:.03em;text-transform:uppercase;margin:0}
.os-tl h3{margin:.1rem 0 .3rem}
.os-tl p{margin:.3rem 0}
@media (max-width:640px){
  .os-tl{padding-left:1rem}
  .os-tl>li{grid-template-columns:1fr;padding:.7rem}
  .os-tl>li::before{left:calc(-1rem - 10px)}
  .os-tl svg{max-width:340px}
  .os-hero{padding:1.1rem 1.1rem}
  .os-hero h1{font-size:1.7rem}
}

/* Tables (book vs film, the Space Race) */
.os-tw{overflow-x:auto;margin:1rem 0;border:1px solid var(--border);border-radius:10px}
.os table{border-collapse:collapse;width:100%;font-size:.92rem;margin:0}
.os th,.os td{text-align:left;vertical-align:top;padding:.5rem .65rem;border-bottom:1px solid var(--border)}
.os thead th{background:var(--entry);font:700 .82rem system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary)}
.os tbody tr:last-child td,.os tbody tr:last-child th{border-bottom:0}
.os td.os-src{font-size:.82rem;color:var(--secondary);white-space:nowrap}
@media (max-width:640px){
  .os table.os-stack thead{display:none}
  .os table.os-stack tr{display:block;border-bottom:1px solid var(--border);padding:.4rem 0}
  .os table.os-stack td{display:block;border:0;padding:.2rem .65rem}
  .os table.os-stack td::before{content:attr(data-h);display:block;font:700 .72rem system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary)}
  .os td.os-src{white-space:normal}
}

/* Activities */
.os-act{border:1px solid var(--border);border-radius:12px;padding:.4rem 1rem .8rem;margin:1rem 0;background:var(--entry)}
.os-act h3{margin-top:.7rem}
.os-act .os-meta{font-size:.85rem;color:var(--secondary);margin:.1rem 0 .4rem}
.os-act figure{margin:.5rem 0;max-width:420px}
.os-act svg{width:100%;height:auto;display:block}
.os-act figcaption{font-size:.82rem;color:var(--secondary)}
.os-steps li{margin:.2rem 0}

/* Books */
.os-books{list-style:none;padding:0;margin:.8rem 0}
.os-books li{padding:.5rem 0;border-bottom:1px solid var(--border);max-width:none}
.os-books li:last-child{border-bottom:0}
.os-books b{font-family:Georgia,serif}
.os-yr{font-size:.85rem;color:var(--secondary)}

/* Space Race list */
.os-sr{list-style:none;padding:0;margin:1rem 0}
.os-sr li{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--border);max-width:none}
.os-sr li:last-child{border-bottom:0}
.os-sr time{font:600 .85rem system-ui,sans-serif;color:var(--secondary)}
.os .os-who{display:inline-block;font:600 .7rem system-ui,sans-serif;padding:.05rem .45rem;border-radius:999px;border:1px solid var(--border);margin-right:.35rem;vertical-align:1px}
@media (max-width:480px){.os-sr li{grid-template-columns:1fr;gap:.1rem}}

.os-next{margin:2rem 0 .5rem;padding-top:.8rem;border-top:1px solid var(--border);font-size:.92rem}
.os-next a{font-weight:600}

/* Drawing colors (both themes) */
.os .sk{fill:#ffcc4d;stroke:#e8a93a;stroke-width:1.5}
@media print{.os-hero{background:none;color:#000;border:1px solid #999}.os-hero h1,.os-hero p,.os-eyebrow{color:#000}.os-nav{display:none}.os-tl>li{break-inside:avoid}}
