/* Kosmos page: only what differs from ../style.css. */

@media (min-width: 701px) { .top-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; } .top-nav::-webkit-scrollbar { display: none; } }
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { display: block; height: 26px; width: auto; }

.hero-copy { max-width: min(60rem, 100%); }
.hero-copy h1 { font-size: clamp(2.4rem, 4.4vw, 5.4rem); }
.hero-copy .quiet { max-width: 26rem; }
.hero-cap { max-width: 26rem; text-wrap: balance; }
.rail-btn { max-width: 100%; }
.rail-text { white-space: nowrap; }
.rail-menu li small { font: .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; opacity: .65; margin-left: auto; padding-left: 14px; }

.prose p, .side .sub { color: var(--muted); }
.prose p, .intro { max-width: 40rem; }
.intro { margin: 0 0 2.4rem; }
.src { font: .66rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted) !important; max-width: 44rem; }
.section > .wrap > .src { margin-top: 2rem; }
.side h2 .badge { font-size: .64rem; vertical-align: middle; }
.side h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }

/* facts */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 2rem 0 1.4rem; padding: 0; border-top: 1px solid var(--faint); }
.facts > div { padding: 14px 0; border-bottom: 1px solid var(--faint); min-width: 0; }
.facts dt { font: .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 8px; }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* screenshots */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 4rem; }
.shots figure, .wide { margin: 0; min-width: 0; }
.shots img, .wide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; background: var(--pill); box-shadow: 0 1px 0 var(--faint), 0 18px 40px -28px var(--shadow); }
.shots figcaption, .wide figcaption { margin-top: 10px; font: .66rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.shot-note { margin: 20px 0 0; font: .64rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.wide { margin-top: 3rem; max-width: 56rem; }

/* cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards > li { min-width: 0; background: var(--card); border-radius: 28px; padding: 24px; box-shadow: 0 1px 0 var(--faint), 0 18px 40px -28px var(--shadow); }
.cards h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: .7em; }
.cards p { color: var(--muted); font-size: .96rem; }
.cards.built { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.built .logo { display: block; height: 44px; width: auto; max-width: 100%; margin: 0 0 18px; object-fit: contain; object-position: left center; }
.cards.built .logo-hand { height: 56px; width: 56px; }
.cards .src { font-size: .66rem; margin-bottom: .6em; }
.cards.built .links { margin: 0; }

.crates { margin: 0; }
.crates dt { font: 600 .72rem/1.4 var(--mono); letter-spacing: .04em; margin-top: 12px; overflow-wrap: anywhere; }
.crates dt:first-child { margin-top: 0; }
.crates dd { margin: 2px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }

/* tables */
.tbl-h { margin: 3rem 0 14px; }
.quiet + .tbl-h { margin-top: 2.4rem; }
.tbl-wrap { overflow-x: auto; max-width: 52rem; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 var(--faint); }
.tbl-wrap:focus-visible { outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 14px 18px 4px; font: .66rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
th, td { padding: 10px 18px; text-align: left; border-top: 1px solid var(--faint); white-space: nowrap; }
thead th { font: .64rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 500; }
tbody th { font-weight: 600; }
.caveats { max-width: 46rem; margin: 18px 0 0; padding-left: 1.2em; color: var(--muted); font-size: .94rem; }
.caveats li { margin-bottom: .5em; padding-left: .2em; }
#numbers .quiet { max-width: 46rem; text-transform: none; letter-spacing: .02em; font-size: .78rem; }

.list .links, ul.links { }
.list li p { max-width: 40rem; margin-bottom: .7em; }
.list li p:last-child { margin-bottom: 0; }
.links a { font-weight: 600; }

@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 40rem; }
}
@media (max-width: 700px) {
  .cards, .cards.built { grid-template-columns: minmax(0, 1fr); }
  .cards > li { padding: 20px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .hero-copy h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .top-nav { gap: 14px; }
}

/* Hero: a smaller title, then a full-width capture from the engine. */
.hero { min-height: 0; }
.hero-main { align-items: flex-start; padding-bottom: 28px; }
.hero-copy .lead { max-width: 44rem; }
.hero-copy .quiet { max-width: 40rem; }
.hero-wide { margin: 8px 0 0; padding: 0; width: 100%; }
.hero-wide img { display: block; width: 100%; height: clamp(300px, 50vw, 780px); object-fit: cover; object-position: center 4%; background: var(--pill); }
.hero-wide figcaption { padding-top: 12px; padding-bottom: 8px; font: .66rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* Character builder section: centred, not pushed to the right like a hero. */
#builder .stage .hero-viewer, #builder .stage .shadow, #builder .stage .hero-cap { align-self: center; margin-right: 0; }
#builder .stage .hero-viewer { width: clamp(260px, 52svh, 520px); }
#builder .stage .shadow { width: min(52%, 360px); }
#builder .stage .card.controls { align-self: center; margin-right: 0; transform: none; }
#builder .stage .hero-cap { text-align: center; }
.hero .hero-copy { position: static; top: auto; left: auto; margin: 0 0 20px; }
.hero-copy .lead { max-width: 54rem; }
.hero-main { padding-bottom: 12px; }

.kicker { margin: 0 0 14px; font: .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }

/* Features, breakouts, architecture, libraries, compatibility */
.jump { font: .72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: -1rem 0 2rem; }
.jump a { font-weight: 600; margin-right: .6em; }
.cards.feat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.feat .badge { white-space: nowrap; }
.badge.warn { color: #8a5a00; border-color: currentColor; }
.libs td, .libs th { white-space: normal; vertical-align: top; }
.libs td:nth-child(3) { white-space: nowrap; }
.libs tbody th { font: .64rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 500; }
.tbl-wrap:has(.libs) { max-width: 64rem; }
.rel { max-width: 46rem; }

.breakout-sec { padding: 4rem 0; }
.breakout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.breakout.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.breakout.rev .bo-img { order: 2; }
.bo-img { margin: 0; min-width: 0; }
.bo-img img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 20px; background: var(--pill); box-shadow: 0 1px 0 var(--faint), 0 18px 40px -28px var(--shadow); }
.bo-img figcaption { margin-top: 10px; font: .66rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.bo-text { min-width: 0; }
.bo-text h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.bo-text p { color: var(--muted); max-width: 36rem; }

.arch { margin: 0 0 3rem; max-width: 52rem; }
.layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ly { background: var(--card); border-radius: 22px; padding: 16px 20px; box-shadow: 0 1px 0 var(--faint), 0 14px 32px -26px var(--shadow); border-left: 5px solid var(--accent); }
.ly h3 { margin: 0 0 6px; }
.ly p { margin: 0; color: var(--muted); font-size: .94rem; }
.ly ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ly ul li { background: var(--pill); border-radius: 12px; padding: 8px 12px; font: 600 .74rem/1.35 var(--mono); overflow-wrap: anywhere; }
.ly ul small { display: block; font: .7rem/1.4 var(--sans); font-weight: 400; color: var(--muted); margin-top: 2px; }
.ly-js { border-left-color: #b8791f; }
.ly-gpu { border-left-color: #2f6fd6; }
.ly-data { border-left-color: var(--muted); }
.ly-arrow { align-self: center; text-align: center; font: .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 18px 0 10px; position: relative; }
.ly-arrow::before { content: ""; position: absolute; left: 50%; top: 0; height: 12px; border-left: 1px solid var(--muted); }
.ly-arrow::after { content: ""; position: absolute; left: calc(50% - 4px); top: 8px; width: 7px; height: 7px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg); }
.arch figcaption { margin-top: 12px; font: .66rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.cols2 > div { min-width: 0; }
.flow, .plain { margin: 0 0 1em; padding-left: 1.3em; color: var(--muted); font-size: .96rem; }
.flow li, .plain li { margin-bottom: .6em; padding-left: .2em; }

.compat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compat-card { min-width: 0; background: var(--card); border-radius: 28px; padding: 28px; box-shadow: 0 1px 0 var(--faint), 0 18px 40px -28px var(--shadow); }
.compat-card p { color: var(--muted); font-size: .96rem; }
.compat-card .src { font-size: .66rem; }
.compat-logo { display: block; height: 48px; width: auto; max-width: 100%; margin: 0 0 18px; }
.compat-fig { max-width: 56rem; }
.compat-fig img { aspect-ratio: auto; object-fit: contain; }
.credit { max-width: 46rem; margin-top: 1.6rem; font: .72rem/1.6 var(--mono); color: var(--muted); }

@media (max-width: 1000px) {
  .cards.feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breakout, .breakout.rev { grid-template-columns: minmax(0, 1fr); }
  .breakout.rev .bo-img { order: 0; }
  .cols2, .compat { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .cards.feat { grid-template-columns: minmax(0, 1fr); }
  .breakout-sec { padding: 3rem 0; }
  .compat-card { padding: 20px; }
}
.src, .credit, .bo-img figcaption { overflow-wrap: anywhere; }
.bo-text h2 { margin-bottom: 18px; }
.compat-card h3 { margin-bottom: .7em; }

/* Previs, animation, studio and effects sections */
.after-bo { margin-top: 3.5rem; }
.after-bo > div > h3 { margin-bottom: 18px; }
.after-bo .list h3 { font-size: 1.05rem; }