/* Cascade V2 landing. Layout values come inline from the design export; this file holds
   the base, hover, open/closed and small-screen rules the inline styles cannot express. */
*, *::before, *::after { box-sizing: border-box; }
html { background: #141B17; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #141B17; color: #E8E1D3; font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: #EE6254; }
::selection { background: #EE6254; color: #EDE4D4; }
:focus-visible { outline: 2px solid #EE6254; outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: #E8E1D3; color: #141B17; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.skip:focus { top: 12px; }

/* Header sign-in */
.signin { display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px; padding: 0 16px; border: 1px solid rgba(232,225,211,0.5); background: rgba(20,27,23,0.55); color: #E8E1D3; white-space: nowrap; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; }
.signin:hover { background: #EE6254; border-color: #EE6254; color: #141B17; }

/* Hero line with links to the four products */
.hero-sub { font-size: clamp(9px, 1.45vw, 24px); }
.hero-sub > span { display: block; white-space: nowrap; }
.hero-link { color: #EE6254; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.hero-link:hover { color: #E8E1D3; }

.cta-github { transition: background 200ms ease; }
.cta-github:hover { background: #EE6254 !important; color: #141B17; }

/* Story */
.chapter:hover { color: #E8E1D3 !important; }

/* Parts */
.part-toggle:hover { color: #EE6254; }
.part-toggle .plus { transition: transform 240ms ease; }
.part-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }
.part-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms cubic-bezier(0.4,0,0.2,1); margin-top: -8px; }
.part-toggle[aria-expanded="true"] + .part-panel { grid-template-rows: 1fr; }
.part-tile { display: block; transition: border-color 200ms ease; }
a.part-tile:hover { border-color: #EE6254 !important; }
.part-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #E8E1D3; border-bottom: 1px solid rgba(232,225,211,0.4); align-self: flex-start; }
.part-link:hover { border-color: #EE6254; }
.part-status { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,225,211,0.62); border: 1px solid rgba(232,225,211,0.3); padding: 2px 6px; align-self: flex-start; }

.foot-link { display: inline-flex; align-items: center; min-height: 40px; color: #E8E1D3; }

@media (max-width: 900px) {
  .chapter-name { display: none; }
}
@media (max-width: 640px) {
  /* The design keeps this on one line, which would shrink it to 9px on phones. */
  .hero-sub { font-size: 18px; }
  .hero-sub > span { white-space: normal; }
  .hero-link { display: inline-block; min-height: 24px; }
}
@media (max-width: 520px) {
  .signin .long { display: none; }
  .signin { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .part-panel, .part-toggle .plus { transition: none; }
}