/* The waitlist (waitlist.html): the form printed on the back of a seed packet, beside the painted
   seed it sows. Joining sprouts the seed (waitlist.js); the seed and the note of which episode
   someone came from are written by tools/episodes.py. */

/* Opening ---------------------------------------------------------------------------------------- */
.wl-open { padding-block: calc(4.9rem + 2vh) clamp(3rem, 6vw, 5rem); }
/* the words, and the seed under them; the packet down the other side */
.wl-open__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); grid-template-rows: auto 1fr;
  grid-template-areas: "text form" "plant form"; column-gap: clamp(2rem, 5.5vw, 5.5rem); align-items: start;
}
.wl-open__text { grid-area: text; }
.wl-open h1 { margin-top: 1.2rem; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.7rem); max-width: 12ch; }
.wl-open .lede { margin-top: 1.1rem; max-width: 30rem; }
.wl-open__audit { margin-top: 0.9rem; max-width: 30rem; color: var(--ink-2); }

/* The packet: cream paper, its flap pinked along the top, a printed label, then the form ------ */
.packet {
  --pad: clamp(1.05rem, 2.6vw, 1.8rem);
  grid-area: form; position: relative; max-width: 36rem; margin-top: 0.9rem; padding: 0.75rem var(--pad) clamp(1.2rem, 2.6vw, 1.7rem);
  background-color: #efdfbd; background-image: var(--grain), linear-gradient(rgba(255, 250, 238, 0.35), transparent 40%); border-radius: 2px 2px 12px 10px;
  box-shadow: var(--shadow-paper); rotate: -0.5deg;
}
.packet::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 8px; background: #efdfbd var(--grain);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}
.packet .muted { color: #4f5347; }
/* the fold across the flap */
.packet::after { content: ""; position: absolute; left: 0; right: 0; top: 0.35rem; border-top: 1px dashed rgba(122, 84, 40, 0.28); pointer-events: none; }

.packet__band {
  position: relative; display: grid; gap: 0.2rem; margin: 0.35rem calc(0.55rem - var(--pad)) 0; padding: 1rem 5.2rem 1.1rem 1.2rem;
  border-radius: 7px 7px 5px 5px; color: #fbf1dc;
  background-color: var(--earth-2);
  background-image: var(--grain), radial-gradient(110% 120% at 88% 0%, rgba(242, 182, 50, 0.32), transparent 62%), radial-gradient(90% 90% at 0% 100%, rgba(30, 43, 34, 0.28), transparent 70%);
  box-shadow: inset 0 0 0 1.5px rgba(30, 43, 34, 0.35);
}
.packet__series { font: 800 0.7rem/1.2 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wattle-2); }
.packet__title { font-size: var(--step-3); line-height: 1.02; color: #fff7e6; }
.packet__variety { font-size: 0.86rem; line-height: 1.35; color: #f1dccb; }
.packet__variety i { font-family: var(--f-display); font-size: 0.95rem; font-variation-settings: "SOFT" 100, "WONK" 1; color: #fff3df; }
.packet__no {
  position: absolute; right: 0.9rem; top: 50%; translate: 0 -50%; width: 3.6rem; aspect-ratio: 1; display: grid; place-items: center;
  border: 1.5px dashed rgba(251, 241, 220, 0.75); border-radius: 50%; rotate: 8deg;
  font-family: var(--f-display); font-weight: 650; font-size: 1rem; color: #fff3df;
}

/* where they came from: an episode (?ep=N) or one of the course's two ways in (?plan=) */
.packet__from { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; font-size: 0.92rem; font-weight: 650; color: var(--ink-2); }
.packet__from[hidden] { display: none; }
.packet__from + .packet__fields { margin-top: 1.1rem; }
.packet__from a { color: var(--ink); text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.packet__pad {
  flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 6px; background: var(--c); rotate: -4deg;
  box-shadow: inset 0 0 0 1.5px rgba(30, 43, 34, 0.9), 2px 2px 0 rgba(30, 43, 34, 0.9);
  font-family: var(--f-display); font-weight: 650; font-size: 0.9rem; color: var(--on, #fff8ea);
}

.packet__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; margin-top: 1.5rem; }
.packet .input { background-color: #fffcf5; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8 L10 13 L15 7.5' fill='none' stroke='%231e2b22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.1rem;
}

/* the sowing guide, as printed on every packet */
.packet__sow { display: grid; grid-template-columns: auto auto auto; justify-content: start; margin: 1.3rem 0 0; border-block: 1.5px dashed rgba(122, 84, 40, 0.34); }
.packet__sow div { padding: 0.55rem 1.1rem 0.6rem; border-left: 1.5px dashed rgba(122, 84, 40, 0.34); }
.packet__sow div:first-child { padding-left: 0; border-left: 0; }
.packet__sow dt { font: 800 0.66rem/1.2 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--earth); }
.packet__sow dd { margin: 0.2rem 0 0; font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; line-height: 1.2; }

.packet__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.8rem 1.2rem; margin-top: 1.4rem; }
.packet__foot > p, .packet__stamp { grid-area: 1 / 2; }
.packet__foot > p { max-width: 15rem; transition: opacity 0.2s ease; }
/* rubber-stamped by the button once the seed is in */
.packet__stamp {
  justify-self: start; --tilt: -7deg; font-size: 0.84rem; padding: 0.42rem 0.75rem; color: var(--canopy-2); background: rgba(251, 247, 238, 0.86);
  opacity: 0; scale: 1.8; pointer-events: none; transition: opacity 0.18s ease, scale 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.packet.is-sown .packet__foot > p { opacity: 0; }
.packet.is-sown .packet__stamp { opacity: 1; scale: 1; }
.no-motion .packet__stamp { transition: none; }
.packet__done { margin-top: 1.1rem; font-size: 1.45rem; line-height: 1.15; color: var(--canopy-2); }
.packet__done:empty { display: none; }
/* after joining: the free tools, to start on now */
.packet__next { margin-top: 0.9rem; padding: 0.8rem 1rem; border-radius: 10px; background: rgba(198, 222, 126, 0.28); box-shadow: inset 0 0 0 1.5px rgba(44, 97, 56, 0.25); }
.packet__next-head { margin: 0; font-weight: 750; }
.packet__next ul { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.packet__next a { font-weight: 700; color: var(--canopy); }

/* The seed, and what it grows into ------------------------------------------------------------ */
.wl-plant { grid-area: plant; margin: 0.4rem 0 0; justify-self: center; width: min(100%, 24rem, calc((100svh - 22rem) / (1.344 * (1 - var(--lift) - var(--drop))))); }
.wl-plant__pot { display: grid; }
.wl-plant__pot > .specimen { grid-area: 1 / 1; margin-block: calc(var(--lift) * -134.4%) calc(var(--drop) * -134.4%); pointer-events: none; }
.wl-plant .specimen > * { transition: opacity 1.4s ease; }
.wl-plant .specimen.is-gone > * { opacity: 0; }
.wl-plant .specimen[data-later]:not(.is-now) { visibility: hidden; }
.js .wl-plant .specimen[data-later] { transition-duration: 2.2s; }
.no-motion .wl-plant .specimen > * { transition: none; }
.wl-plant figcaption { display: grid; justify-items: center; gap: 0.2rem; margin-top: 0.4rem; text-align: center; }
.wl-plant figcaption .hand { font-size: 1.55rem; rotate: -1.5deg; }
.wl-plant__credit { max-width: 26rem; font-size: 0.78rem; color: var(--ink-3); }
.wl-plant .specimen__notes .art__hand { font-size: 62px; stroke-width: 13px; }

@media (max-width: 860px) {
  .wl-open__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "text" "form" "plant"; }
  .packet { margin-top: 2.2rem; }
  .wl-plant { width: min(100%, 22rem); margin-top: 1.5rem; }
  .wl-plant .specimen__notes .art__hand { font-size: 70px; stroke-width: 14px; }
}
@media (max-width: 560px) {
  .packet__fields { grid-template-columns: 1fr; }
  .packet__band { padding-right: 4.4rem; }
  .packet__no { width: 3rem; font-size: 0.88rem; right: 0.7rem; }
  .packet__sow div { padding-inline: 0.75rem; }
  .packet__foot { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .packet__foot > p, .packet__stamp { grid-area: 2 / 1; }
}

/* While you wait: a painting for each of the other ways in ----------------------------------- */
.wl-wait { background-color: var(--paper-2); background-image: var(--grain); }
.wait { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); }
.wait li { display: flex; }
.wait a {
  flex: 1; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; padding: 0.65rem 0.65rem 1.25rem;
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-paper); color: inherit; text-decoration: none;
  transition: translate 0.3s var(--ease-grow), box-shadow 0.3s ease;
}
.wait li:nth-child(odd) a { rotate: -0.6deg; }
.wait li:nth-child(even) a { rotate: 0.5deg; }
.wait a:hover { translate: 0 -4px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 26px 46px -26px rgba(74, 46, 16, 0.55), 0 2px 6px -2px rgba(74, 46, 16, 0.18); }
.wait__art { display: block; aspect-ratio: 3 / 2; margin-bottom: 0.85rem; overflow: hidden; border-radius: 9px 8px 10px 7px; background: #fbf7ee; }
.wait__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s var(--ease-grow); }
.wait__art--multiply img { object-fit: contain; mix-blend-mode: multiply; }
.wait li:nth-child(4) .wait__art img { object-position: 64% 50%; }
.wait a:hover .wait__art img, .wait a:focus-visible .wait__art img { scale: 1.05; }
.wait__kick, .wait__title, .wait__desc { padding-inline: 0.55rem; }
.wait__kick { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.wait__title { margin-top: 0.25rem; font-family: var(--f-display); font-size: var(--step-1); font-weight: 600; line-height: 1.2; }
.wait__desc { margin-top: 0.3rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.wait a:hover .wait__title { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; }
.wait__talk { margin-top: clamp(2.2rem, 4vw, 3rem); text-align: center; font-weight: 650; }
.wait__talk .hand { margin-right: 0.3rem; font-size: 1.5rem; color: var(--earth); }
.wait__talk a { color: var(--ink); text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
/* where sign-in is off, or a first visit waits to hear, the sample hub's card goes (base.css), so the other three
   share the row (qag-12eni, qag-1nk1j) */
@media (min-width: 1101px) { .sign-in-off .wait:has(> li > a[href*="?tour"]:only-child), .sign-in-wait .wait:has(> li > a[href*="?tour"]:only-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .wait { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .wait { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }