/* The 3.0 homepage — /home.
   Ported from the 3.0 kit's `1 Homepage.dc.html` (2026-08-21), which supersedes the
   earlier Homepage.dc.html the phase 1 plan was written against: the five-Rs ladder,
   the 2027 goal band and the Winbox are gone, and a cofounders' note and a programs
   carousel take their place.

   Loaded via yield :page_stylesheets, not on every page.

   RADII COME FROM THE KIT, NOT FROM THE APP'S NEAREST RUNG. Tabulated from the comp
   before any of this was written, because reaching for the closest existing token is
   how the last kit screen turned every pill into a rounded rectangle: 999px pills
   (place switch, the avatar), 24px the tools panel, 16px the programme figures and the
   note portrait, 14px the signup shell, 11-12px the tool cards, 10px buttons.

   The two spacing ladders disagree above --space-4, so this file only uses the shared
   tokens where they agree: the kit's --space-5 is 20px against the app's 24px, and the
   kit's --space-6 is 24px against the app's 32px. Anything above 16px is written as a
   literal rather than reaching for the token that is 8px out, so the comp's rhythm
   survives.

   Ink is warm here (--zw-ink-warm*), not the app's cool --zw-ink. See the note beside
   those tokens in brand_tokens.css: the two ramps share the kit's names and collapsing
   them is an app-wide repaint. */

.zw-home {
  background: var(--zw-paper-3);
  color: var(--zw-ink-warm);
}

/* Every band is separated by a single hairline. 3.0 does structure with rules and
   warm grounds, never with colour blocks. */
.zw-home__band {
  border-bottom: 1px solid var(--zw-border-warm);
}

.zw-home__band--white {
  background: var(--zw-surface);
}

.zw-home__measure {
  width: 100%;
  max-width: var(--zw-measure); /* 960px — the kit's content column */
  margin: 0 auto;
  padding-left: var(--zw-gutter);
  padding-right: var(--zw-gutter);
}

/* --- Hero ------------------------------------------------------------------- */

/* The bottom padding is deep because the tool cards in the next band bouquet up
   through this one's floor. Shrink it and they collide with the signup form. */
.zw-home-hero {
  padding-top: 64px;
  padding-bottom: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.zw-home-hero__lead {
  margin: 0 0 36px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--zw-ink-warm-3);
  max-width: var(--zw-measure-prose);
  text-wrap: pretty;
}

.zw-home-hero__signup {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zw-home-hero__note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--zw-muted);
  text-wrap: pretty;
}

/* The place switch sits directly above the form it changes. */
.zw-home-place {
  margin-bottom: 14px;
}

/* What the signup's Turbo Stream leaves behind. This stands where a large floating
   input shell was, so it needs to be a panel rather than a line of text. Blue, not
   green: in 3.0 green measures something achieved and a confirmation is not a
   measurement. */
.zw-home-signup-done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  background: var(--zw-blue-50);
  border: 1px solid var(--zw-blue-300);
  border-radius: var(--zw-radius-lg);
  font-size: 16px;
  color: var(--zw-blue-800);
  text-align: left;
}

.zw-home-signup-done__check {
  flex: none;
  display: flex;
  color: var(--zw-blue-700);
}

/* --- The toolkit ------------------------------------------------------------ */

/* flow-root so the panel's own margins stay inside the band. */
.zw-home-tools {
  padding-top: 44px;
  padding-bottom: 72px;
  display: flow-root;
}

.zw-home-tools__panel {
  position: relative;
  background: var(--zw-panel);
  border: 1px solid var(--zw-border-warm);
  border-radius: var(--zw-radius-2xl);
  padding: 120px 44px 52px;
}

/* The bouquet: four cards lifted out of the panel's top edge so they break the
   band rule above it. The negative margin is what makes the row read as sitting
   on the panel rather than inside it. */
.zw-home-tools__row {
  position: relative;
  z-index: 2;
  margin-top: -230px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.zw-home-tools__heading {
  margin-top: 34px;
}

.zw-home-tool {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: 11px;
  box-shadow: var(--zw-shadow-card);
  transition:
    box-shadow 320ms var(--zw-ease-out),
    transform 320ms var(--zw-ease-out);
}

.zw-home-tool:hover {
  box-shadow: var(--zw-shadow-lift);
  transform: rotate(0deg) translateY(-8px) scale(1.035);
}

/* Each card rests at its own angle, and hover straightens it. The tilts are
   per-card rather than generated so the row reads as a handful of photographs
   rather than a pattern. */
.zw-home-tool--1 { transform: rotate(-1.5deg) translateY(6px); }
.zw-home-tool--2 { transform: rotate(1.2deg) translateY(-4px); }
.zw-home-tool--3 { transform: rotate(-0.8deg) translateY(8px); }
.zw-home-tool--4 { transform: rotate(1.6deg) translateY(-2px); }

.zw-home-tool__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zw-ink-warm);
}

.zw-home-tool__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--zw-muted);
}

/* The icon tile's corners are deliberately unequal, and differently unequal per
   tool — the kit's one piece of hand-drawn geometry. Four organic radii, not one
   token: making them uniform is what would flatten it. */
.zw-home-tool__icon {
  margin-bottom: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zw-home-tool--1 .zw-home-tool__icon {
  border-radius: 15px 11px 14px 12px;
  background: var(--zw-tool-actions-tint);
  color: var(--zw-tool-actions);
}

.zw-home-tool--2 .zw-home-tool__icon {
  border-radius: 11px 15px 12px 14px;
  background: var(--zw-tool-calendar-tint);
  color: var(--zw-tool-calendar);
}

.zw-home-tool--3 .zw-home-tool__icon {
  border-radius: 14px 12px 15px 11px;
  background: var(--zw-tool-map-tint);
  color: var(--zw-tool-map);
}

.zw-home-tool--4 .zw-home-tool__icon {
  border-radius: 12px 14px 11px 15px;
  background: var(--zw-tool-wiki-tint);
  color: var(--zw-tool-wiki);
}

/* --- The cofounders' note --------------------------------------------------- */

.zw-home-note {
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.zw-home-note__rail {
  display: grid;
  gap: 14px;
}

.zw-home-note__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--zw-radius-xl);
  overflow: hidden;
  border: 1px solid var(--zw-border-warm);
}

.zw-home-note__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zw-home-note__video {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-md);
  cursor: pointer;
  text-align: left;
  transition: box-shadow 200ms var(--zw-ease-out);
}

.zw-home-note__video:hover {
  box-shadow: var(--zw-shadow-md);
}

.zw-home-note__play {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zw-blue-700);
  border-radius: var(--zw-radius-pill);
  color: var(--zw-surface);
}

.zw-home-note__video-label {
  display: grid;
  gap: 2px;
}

.zw-home-note__video-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--zw-ink-warm);
}

.zw-home-note__video-sub {
  font-size: 13px;
  color: var(--zw-muted);
}

/* The letter. This is 3.0's one pull-quote-weight body copy, and the only place
   on the page that reads at 18px. */
.zw-home-note__letter {
  max-width: var(--zw-measure-prose);
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.zw-home-note__letter p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--zw-ink-warm-2);
  text-wrap: pretty;
}

/* --- Programmes ------------------------------------------------------------- */

.zw-home-programs {
  padding-top: var(--zw-section-y);
  padding-bottom: var(--zw-section-y);
}

.zw-home-programs__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.zw-home-programs__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zw-ink-warm);
  white-space: nowrap;
}

.zw-home-programs__dek {
  font-size: 15px;
  color: var(--zw-muted);
  min-width: 0;
}

.zw-home-programs__more {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Bleeds to the gutter on both sides so a card can be half-visible at the edge —
   that overhang is the only thing telling a reader the row scrolls. min-width: 0
   on the scroller is load-bearing: without it a grid or flex item refuses to
   shrink and the overflow never engages. */
.zw-home-programs__scroller {
  display: flex;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--zw-gutter);
  scroll-padding-right: var(--zw-gutter);
  padding-top: var(--space-2);
  padding-bottom: 32px;
  margin-left: calc(-1 * var(--zw-gutter));
  margin-right: calc(-1 * var(--zw-gutter));
  padding-left: var(--zw-gutter);
  padding-right: var(--zw-gutter);
  scrollbar-width: thin;
  align-items: flex-start;
}

.zw-home-shot {
  margin: 0;
  flex: none;
  width: 320px;
  scroll-snap-align: start;
  display: grid;
  gap: 10px;
  transform-origin: center;
  transition: transform 320ms var(--zw-ease-out);
}

.zw-home-shot--1 { transform: rotate(-1.4deg) translateY(0); }
.zw-home-shot--2 { transform: rotate(1.1deg) translateY(10px); }
.zw-home-shot--3 { transform: rotate(-0.9deg) translateY(2px); }
.zw-home-shot--4 { transform: rotate(1.5deg) translateY(12px); }
.zw-home-shot--5 { transform: rotate(-1.2deg) translateY(4px); }
.zw-home-shot--6 { transform: rotate(0.8deg) translateY(8px); }
.zw-home-shot--7 { transform: rotate(-1.6deg) translateY(6px); }
.zw-home-shot--8 { transform: rotate(1.3deg) translateY(2px); }

.zw-home-shot:hover {
  transform: rotate(0deg) translateY(0) scale(1.02);
}

.zw-home-shot__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--zw-radius-xl);
  overflow: hidden;
  border: 1px solid var(--zw-border-warm);
}

/* No photo yet. Warm ground and a hairline, not a gradient: 3.0 separates with
   structure, and the three gradients /work falls back to still carry the retired
   2.x mint. */
.zw-home-shot__frame--empty {
  background: var(--zw-panel);
}

.zw-home-shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zw-home-shot__caption {
  display: grid;
  gap: 2px;
}

.zw-home-shot__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zw-ink-warm);
}

.zw-home-shot__meta {
  font-size: 14px;
  color: var(--zw-muted);
}

/* --- Help make it happen ---------------------------------------------------- */

.zw-home-help {
  padding-top: 72px;
  padding-bottom: 72px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.zw-home-help__copy {
  max-width: 460px;
}

.zw-home-help__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--zw-muted);
}

.zw-home-help__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- The TEDx dialog ------------------------------------------------------- */

.zw-home-video-dialog {
  width: min(960px, calc(100vw - 56px));
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.zw-home-video-dialog::backdrop {
  background: rgba(27, 59, 49, 0.82);
}

.zw-home-video-dialog__inner {
  display: grid;
  gap: 14px;
}

.zw-home-video-dialog__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--zw-radius-xl);
  overflow: hidden;
  background: var(--zw-base);
}

.zw-home-video-dialog__foot {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--zw-base-link);
}

.zw-home-video-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(27, 59, 49, 0.72);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  color: var(--zw-surface);
}

.zw-home-video-dialog__close:hover {
  background: rgba(27, 59, 49, 0.9);
}

/* --- Responsive ------------------------------------------------------------ */

/* Two columns. The lift and the panel's top padding have to be tuned together, not
   separately: the row only escapes the panel by however much the lift EXCEEDS that
   padding, so a generous padding here silently cancels the whole effect and leaves
   the hero's deep bottom margin sitting over nothing. Two rows of cards are shorter
   than one row is at full width, so both numbers come down. */
@media (max-width: 860px) {
  .zw-home-tools__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -150px;
  }

  .zw-home-tools__panel {
    padding: 84px 24px 40px;
  }

  .zw-home-hero {
    padding-bottom: 96px;
  }

  .zw-home-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .zw-home-note__rail {
    max-width: 300px;
  }
}

/* Below this the cards stack, and a stack cannot bouquet — it would hang the
   whole column above the panel. The row sits inside it instead. */
@media (max-width: 560px) {
  .zw-home-tools__row {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }

  .zw-home-tools__panel {
    padding: 28px 20px 32px;
  }

  .zw-home-hero {
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .zw-home-shot {
    width: 260px;
  }

  /* A tilted card in a single column reads as a misaligned card, not a charming
     one -- the effect needs neighbours to be read against. */
  .zw-home-tool {
    transform: none;
  }
}

/* The resting tilts are decoration; the hover straightening is feedback. Both go. */
@media (prefers-reduced-motion: reduce) {
  .zw-home-tool,
  .zw-home-shot {
    transform: none;
    transition: none;
  }

  .zw-home-tool:hover,
  .zw-home-shot:hover {
    transform: none;
  }
}