/* Steve's onion talk (onion-talk.html): the ceiling, the five stages, the proof and the close.
   Built on public.css: the opener, In Steve's words (.words, .word) and the end (.prog-end). */

/* The ceiling: the text beside two onions cut across */
.ceiling__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ceiling__text h2 { margin-top: 0.9rem; }
.ceiling__text .lede { margin-top: 1rem; }
.ceiling__text p + p { margin-top: 0.9rem; }
.ceiling__text .lede + p { margin-top: 1.2rem; }
.ceiling__art { margin: 0; }
.ceiling__art img { mix-blend-mode: multiply; }
@media (max-width: 860px) { .ceiling__grid { grid-template-columns: minmax(0, 1fr); } }

/* The five stages: each plate beside its days, its name and his goal for it */
.stages__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.stage { display: grid; align-content: start; gap: 0.7rem; }
.stage__plate { width: 100%; height: auto; aspect-ratio: 1; mix-blend-mode: multiply; }
.stage__no { font-size: 0.88rem; color: var(--ink-3); }
.stage__no span { display: inline-block; margin-right: 0.35rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--wattle); color: var(--ink); font-weight: 700; letter-spacing: 0.04em; }
.stage h3 { margin-top: 0.3rem; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
.stage__goal { margin-top: 0.45rem; font-family: var(--f-display); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 1.05rem; line-height: 1.3; color: var(--ink-2); }
/* the stage that sets the ceiling */
.stage--gate .stage__no span { background: #b9442c; color: #fbf3e1; }
@media (max-width: 1000px) {
  .stages__list { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .stage { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem; }
}
@media (max-width: 420px) { .stage { grid-template-columns: 5.5rem minmax(0, 1fr); } }

/* His one rule, under the stages */
.handoff { margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; max-width: 42rem; text-align: center; }
.handoff blockquote { margin: 0; }
.handoff p {
  font-family: var(--f-display); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 480; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.12; text-wrap: balance;
}
.handoff figcaption { margin-top: 0.8rem; color: var(--ink-3); font-size: 0.92rem; }

/* The proof: the sap test, and a check strip */
.listen__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.listen__grid h2 { margin-top: 0.9rem; }
.listen__grid .lede { margin-top: 1rem; }
.listen__grid .lede + p { margin-top: 1.1rem; }
.listen__try { padding: clamp(1.4rem, 3vw, 2rem); }
.listen__try p { margin-top: 0.6rem; }
@media (max-width: 860px) { .listen__grid { grid-template-columns: minmax(0, 1fr); } }

/* The close: his last words on the shed's dark wall, the onion in the doorway's light */
.closer { position: relative; display: grid; align-content: start; min-height: clamp(26rem, 70svh, 44rem); overflow: hidden; isolation: isolate; }
.closer__scene { position: absolute; inset: 0; }
.closer__scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(38, 26, 14, 0.62), rgba(38, 26, 14, 0.18) 46%, rgba(38, 26, 14, 0) 64%); }
.closer__words { position: relative; z-index: 2; padding-block: clamp(3rem, 9vh, 6rem); }
.closer .word { max-width: 26rem; }
.closer .word p { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); text-shadow: 0 0 18px rgba(30, 20, 10, 0.7); }
.closer .word figcaption { margin-top: 0.9rem; color: #f1e6cc; }
@media (max-width: 600px) {
  .closer { min-height: 34rem; }
  .closer__scene::after { background: linear-gradient(180deg, rgba(38, 26, 14, 0.7), rgba(38, 26, 14, 0.25) 55%, rgba(38, 26, 14, 0) 75%); }
  .closer .word { max-width: 20rem; }
}