/* ===========================================================================
   JUST CREATE — the home page, and the class card it shares with /classes
   ========================================================================= */

/* =========================================================================
   THE HERO
   Copy on the left, artwork on the right, on a soft wash. Not a full-bleed
   photograph: there is no photograph, and inventing one is the whole thing
   this build refuses to do.
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 88% 18%,
      var(--leaf-wash) 0%, transparent 58%),
    radial-gradient(90% 90% at 12% 84%,
      var(--sky-wash) 0%, transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.hero-copy { max-width: 34rem; }
.hero-copy h1 { margin-bottom: .4em; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.9rem;
}

.hero-art { display: flex; justify-content: center; }
.hero-logo {
  width: min(100%, 440px);
  height: auto;
  /* A watercolour on a wash needs a touch of lift or it looks pasted on. */
  filter: drop-shadow(0 18px 34px rgba(30, 100, 140, .16));
}
.hero-photo {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

/* =========================================================================
   SECTION HEADS
   ========================================================================= */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }

/* =========================================================================
   THE CLASS CARD
   Shared with classes.html — see cards.js for why it is not the kit card
   with different words.
   ========================================================================= */
.class-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow var(--quick), transform var(--quick);
}
.class-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.class-card .card-media {
  border: 0;
  border-radius: 0;
  aspect-ratio: 3 / 2;
}
.class-card .card-body { padding: 1.1rem 1.2rem 1.2rem; gap: .55rem; }
.class-card .card-name { font-size: 1.2rem; }

/* ---- the date chip -------------------------------------------------------
   The most important thing on the card. It sits ON the flyer, bottom-left,
   so the eye lands on the date before the picture resolves into anything. */
.date-chip {
  position: absolute;
  left: .85rem;
  bottom: .85rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: .5rem .6rem .45rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  line-height: 1;
}
.date-chip-day {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ocean-deep);
}
.date-chip-month {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ink-muted);
  margin-top: .22em;
  /* The tracking pushes the last letter past the box; this recentres it. */
  margin-right: -.14em;
}

/* ---- the facts ------------------------------------------------------------ */
.class-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
}
.class-facts li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  color: var(--ink-body);
}
.fact-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--ocean-mid);
}
.fact-icon svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.class-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: .4rem;
  padding-top: .8rem;
  border-top: 1px solid var(--hairline);
}

/* A class nobody can get into is dimmed but stays completely readable — the
   details still matter, and somebody wants to know it exists so they can
   catch the next one. */
.class-card.is-full .card-media img { opacity: .55; }

/* =========================================================================
   THE ABOUT STRIP
   ========================================================================= */
.about-strip {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3.2rem);
  align-items: center;
  /* ⚠ PULLED IN FROM THE PAGE WIDTH. The paragraph is capped at 60ch, so on a
     1180px page it stopped two-thirds of the way across and left a third of a
     coloured band with nothing in it — the band looked like it was waiting for
     a second column that never came. Centring the pair makes the air sit
     around the block instead of beside it. */
  max-width: 940px;
  margin-inline: auto;
}
.about-strip-art img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(30, 100, 140, .14));
}
.about-strip-copy .lede { font-size: 1.18rem; color: var(--ink-body); max-width: 60ch; }
.about-strip-copy .link-more { margin-top: 1rem; }

/* =========================================================================
   THE THREE PROMISES
   ========================================================================= */
.promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* ⚠ THESE WERE THREE GREY BOXES AND THEY LOOKED LIKE A PLACEHOLDER.
   Flat --paper-2 rectangles on --paper are barely a shade apart, so at the
   bottom of a page of white cards and watercolour they read as the part
   nobody got round to. They are now the same object as every other card on
   the site — white, hairlined, lifted — with a wash of the leaf bleeding out
   of one corner so the three of them are not identical rectangles. */
.promises li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.6rem;
  box-shadow: var(--shadow);
  transition: box-shadow var(--quick), transform var(--quick);
}
.promises li:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

/* The wash. It alternates leaf / sky / leaf down the row, which is the same
   two colours the hero blooms use — so the bottom of the page belongs to the
   top of it. */
.promises li::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -55%;
  right: -30%;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--leaf-wash) 0%, transparent 68%);
  pointer-events: none;
}
.promises li:nth-child(2)::after {
  background: radial-gradient(circle at 50% 50%,
    var(--sky-wash) 0%, transparent 68%);
}

/* The same brush stroke that underlines the section headings, above each
   promise. It is a mark, not an icon: three invented pictograms for three
   sentences would say less than this does and would take longer to draw. */
.promises li::before {
  content: '';
  display: block;
  width: 34px;
  height: 8px;
  margin-bottom: .9rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7.4c26-3.2 52-4.6 78-4.1 24 .5 47 2.6 71 3.1 22 .4 44-.6 67-3.4-21 5.2-43 7.6-65 7.7-25 .1-49-2.1-74-2.6C55 8 34 8.6 2 7.4Z' fill='%231E648C'/%3E%3C/svg%3E");
}
.promises li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7.4c26-3.2 52-4.6 78-4.1 24 .5 47 2.6 71 3.1 22 .4 44-.6 67-3.4-21 5.2-43 7.6-65 7.7-25 .1-49-2.1-74-2.6C55 8 34 8.6 2 7.4Z' fill='%237FA83C'/%3E%3C/svg%3E");
}

.promises h3 { margin-bottom: .4rem; }
.promises p { font-size: .95rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .promises li:hover { transform: none; }
}

/* =========================================================================
   THE SIGN-UP
   ========================================================================= */
.signup-wrap { max-width: 34rem; }
.signup { display: flex; gap: .6rem; margin-top: 1.4rem; }
.signup input { flex: 1 1 auto; }
.signup .btn { flex: 0 0 auto; }

/* ========================================================================= */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* The artwork goes ABOVE the copy on a phone, because it is the brand and
     it is the thing that says what this is before a word is read. */
  .hero-art { order: -1; }
  .hero-logo { width: min(74%, 320px); }
  .about-strip { grid-template-columns: 1fr; }
  .about-strip-art { max-width: 150px; }
}

@media (max-width: 520px) {
  .hero-cta .btn { flex: 1 1 auto; }
  .signup { flex-direction: column; }
}

/* =========================================================================
   THE BLOOMS BEHIND THE HERO
   ========================================================================= */
.hero-blooms { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-blooms .bloom--sky {
  width: 46vw; height: 46vw;
  max-width: 640px; max-height: 640px;
  top: -14%; right: 4%;
}
.hero-blooms .bloom--leaf {
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  bottom: -20%; left: -6%;
  opacity: .42;
}
.hero-inner { position: relative; z-index: 1; }

/* =========================================================================
   THE SAYING
   -------------------------------------------------------------------------
   Her tagline, once, in the brush script, on a wash. It is the only place on
   the site other than the header where that face appears — see saying() in
   home.js for why that restraint matters.
   ========================================================================= */
.saying-band {
  background:
    radial-gradient(70% 120% at 22% 20%, var(--leaf-wash) 0%, transparent 60%),
    radial-gradient(70% 120% at 82% 90%, var(--sky-wash) 0%, transparent 62%),
    var(--paper);
  border-block: 1px solid var(--hairline);
  text-align: center;
}
.saying { max-width: 40rem; }
.saying-mark {
  display: block;
  width: 44px;
  height: 10px;
  margin: 0 auto 1.4rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7.4c26-3.2 52-4.6 78-4.1 24 .5 47 2.6 71 3.1 22 .4 44-.6 67-3.4-21 5.2-43 7.6-65 7.7-25 .1-49-2.1-74-2.6C55 8 34 8.6 2 7.4Z' fill='%237FA83C'/%3E%3C/svg%3E");
}
.saying-text {
  font-family: var(--script);
  /* A script needs room; at body size it is unreadable and at this size it
     is the point. Line height is generous because the ascenders and
     descenders in this face overlap badly when they are tight. */
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.35;
  color: var(--ocean-deep);
  margin: 0 0 1.4rem;
}

/* The brush stroke sits under a heading, so the heading has to allow for it. */
.section-head h2, .page-head h1, .month-head { position: relative; }
.section-head h2 .brush-rule,
.page-head h1 .brush-rule,
.month-head .brush-rule { margin-top: .4rem; }