/* Holding page only (DEC-095): the teaser sections under the hero. The full site
   doesn't load this file. The dark band borrows the book cover's night blue and teal. */

.tease-band {
  --band: #0b1424; --band-fg: #d9e2ec; --band-ink: #f2f6fa; --band-teal: #5fe0cf;
  margin-inline: calc(50% - 50vw); padding: 3.5rem 0;
  background:
    radial-gradient(60rem 30rem at 85% 60%, rgba(60, 184, 169, 0.22), transparent 70%),
    linear-gradient(180deg, #0e1a2e, var(--band));
  color: var(--band-fg);
}
@media (min-width: 48rem) { .tease-band { padding-block: 5rem; } }
.tease-inner { max-width: var(--wide); margin-inline: auto; padding-inline: 1rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 48rem) { .tease-inner { padding-inline: 2rem; } }
@media (min-width: 56rem) { .tease-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; } }
.tease-text { display: grid; gap: 1.4rem; min-width: 0; }
.tease-band .eyebrow { color: var(--band-teal); }
.tease-band h2 { color: var(--band-ink); font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.08; }
.tease-band .lede { color: var(--band-fg); }
.tease-band h2 .l { display: block; text-wrap: balance; }
.glow { color: var(--band-teal); text-shadow: 0 0 24px rgba(95, 224, 207, 0.45); }
.tools { font-family: var(--mono); font-size: var(--step--1); color: #9fb3c8; letter-spacing: 0.02em; }

.cover { margin: 0; justify-self: center; width: min(100%, 20rem); perspective: 1200px; }
.cover img {
  display: block; width: 100%; height: auto; border-radius: 3px 6px 6px 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 80px rgba(60, 184, 169, 0.25);
  transform: rotateY(-8deg); transition: transform 0.6s ease;
}
.cover:hover img { transform: rotateY(0deg); }

/* the sample run */
.term { background: #0b1424; border: 1px solid #22344d; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px -25px rgba(11, 20, 36, 0.6); max-width: 52rem; }
.term-bar { display: flex; gap: 6px; padding: 0.7rem 0.9rem; background: #13213a; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c405e; }
.term pre { white-space: normal; margin: 0; padding: 1.1rem 1.2rem 1.3rem; overflow-x: auto; font-family: var(--mono); font-size: clamp(8.5px, calc((100vw - 3.8rem) / 32), 0.88rem); /* the widest row (50 characters) always fits */ line-height: 1.65; color: #c9d6e3; }
.term .ln { display: block; white-space: pre; }
.term .ln.w { white-space: pre-wrap; padding-left: 0; }
.term b { color: #f2f6fa; font-weight: 600; }
.term .p { color: #5fe0cf; }
.term .x { color: #e48a72; }
.term .q { color: #e0b25a; }
.term .v { color: #5fcabd; }
@media (prefers-reduced-motion: no-preference) {
  .term.play .ln { opacity: 0; transform: translateY(4px); animation: ln-in 0.35s ease forwards; }
  @keyframes ln-in { to { opacity: 1; transform: none; } }
}

/* the ideas */
.ideas { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 48rem) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .ideas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.idea { background: var(--panel); padding: 1.4rem 1.2rem 1.5rem; display: grid; gap: 0.7rem; align-content: start; min-width: 0; }
.idea h3 { font-size: 1.15rem; }
.idea p { font-size: 0.98rem; line-height: 1.5; }

/* the close */
.finale { display: grid; justify-items: center; gap: 0.9rem; text-align: center; padding-block: 2rem 1rem; }
.mark.big { height: 56px; gap: 6px; }
.mark.big i { width: 11px; border-radius: 2px; }
.finale-line { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: var(--step-4); color: var(--ink); line-height: 1.1; text-wrap: balance; }
.finale-date { font-family: var(--mono); color: var(--accent-text); letter-spacing: 0.08em; text-transform: uppercase; }

/* The hero is one column at every width: the opening text, then the level table at
   full width, so its three columns have room (holding page only). */
.hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 60rem) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero-text { max-width: 44rem; }

/* the level table and its autonomy column */
.level-head { display: none; }
.level-name div > span { display: block; line-height: 1.35; margin-top: 0.15rem; }
.level .auto { color: var(--accent-text); }
.auto-label { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 56rem) {
  .level { grid-template-columns: 17rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 2rem; }
  .level-head { display: grid; padding-block: 0.6rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  /* the header names the column; screen readers, which skip that header, still hear the
     label on every row */
  .auto-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* the meters fill bar by bar when the table comes into view */
@media (prefers-reduced-motion: no-preference) {
  .levels.pre .meter i { transform: scaleY(0); transform-origin: bottom; }
  .levels.rise .meter i { transform: none; transform-origin: bottom; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
  .levels.rise .meter i:nth-child(2) { transition-delay: 0.08s; } .levels.rise .meter i:nth-child(3) { transition-delay: 0.16s; }
  .levels.rise .meter i:nth-child(4) { transition-delay: 0.24s; } .levels.rise .meter i:nth-child(5) { transition-delay: 0.32s; }
}

/* the cursor at the end of the sample run */
.term .cursor { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: text-bottom; background: #5fe0cf; }
@media (prefers-reduced-motion: no-preference) {
  .term .cursor { animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
}

/* one body size for every short description, and no one-word last lines */
.nowrap { white-space: nowrap; }
.level p, .idea p, .point p { font-size: 1rem; line-height: 1.5; }
p, .lede { text-wrap: pretty; }

/* the full-width band uses 100vw, which counts the scrollbar on desktop browsers that
   show one; clip it so the page never scrolls sideways */
body { overflow-x: clip; }
/* four cards in a row: titles take two lines' room so the texts start level */
@media (min-width: 70rem) { .idea h3 { min-height: 2.3em; } }
@media (max-width: 30rem) { .term pre { padding-inline: 0.8rem; } }
.level p { text-wrap: wrap; }