/* ==========================================================================
   home.css — 2027 landing page only.
   Loaded by index.html alongside style.css (tokens, fonts, reset).
   The archive pages (2025.html, 2026.html, early.html) still use index.css.
   ========================================================================== */

/* Every tint below is derived from the palette already in style.css — no new
   hues are introduced. --med-green (#6E734E) and --background (#fffff6) are
   the two the mixes are built from. */

:root {
  --sage: #e5e6d8;       /* --med-green 18% over --background */
  --sage-deep: #d6d8c7;  /* --med-green 28% over --background */
  --ink-soft: #484835;   /* --font-black 65% + --med-green 35% */
  --plate: var(--bg-light);
  /* the haze over the header photo — --bg-light's hue (45), deepened and
     warmed so it reads as afternoon light rather than a grey veil */
  --haze: 246, 239, 223;
  /* where the haze holds and where it lets go, measured from the top left of
     the header. in rem so it stays glued to the copy at any window shape */
  --haze-x1: 9rem;   /* full strength by here */
  --haze-x2: 27rem;  /* holds to here */
  --haze-x3: 33rem;
  --haze-x4: 42rem;  /* gone */
  --haze-y1: 23rem;  /* flat to just past the form */
  --haze-y2: 28rem;  /* gone */
  --haze2-y0: 8rem;  /* second layer fades in below the lockup */
  --haze2-y1: 12rem;
  --radius: 10px;
}

body.home {
  max-width: 76em;
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* full screen; svh so mobile browser chrome does not push the copy off */
  height: 100vh;
  height: 100svh;
  min-height: 32rem;
  background: var(--bg-light);
}

.hero > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* anchored left at every size: when the frame is too narrow for the photo,
     the right goes and the left is kept */
  object-position: 0% 50%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  /* One even veil across the whole copy block. A radial can't do this — it is
     brightest at its centre by definition — so the wash is flat and a mask
     decides where it stops: level across the logo, the details and the form,
     then gone before it reaches the tipped basket. */
  /* Geometry is in rem, not percentages. The copy block is laid out in rem, so
     the haze keeps the same relationship to it at any window shape. With
     percentages it slid across the photo as the window changed and turned into
     a visible bright patch on the flower bed. */
  background: linear-gradient(
    90deg,
    rgba(var(--haze), 0) 0,
    rgba(var(--haze), 0.63) var(--haze-x1),
    rgba(var(--haze), 0.63) var(--haze-x2),
    rgba(var(--haze), 0.46) var(--haze-x3),
    rgba(var(--haze), 0) var(--haze-x4)
  );

  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--haze-y1), transparent var(--haze-y2));
  mask-image: linear-gradient(180deg, #000 0, #000 var(--haze-y1), transparent var(--haze-y2));

  pointer-events: none;
}

/* Second haze, stacked on the first. The two are separate pseudo-elements so
   each can have its own vertical extent: ::before is the broad veil over the
   whole copy area, ::after adds density under the words only — it fades in
   below the logo, holds through the details and the form, and is gone before
   the first one is. Tune its 0.3 to make the text area heavier or lighter
   without touching the veil behind the logo. */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    90deg,
    rgba(var(--haze), 0) 0,
    rgba(var(--haze), 0.3) var(--haze-x1),
    rgba(var(--haze), 0.3) var(--haze-x2),
    rgba(var(--haze), 0.18) var(--haze-x3),
    rgba(var(--haze), 0) var(--haze-x4)
  );

  -webkit-mask-image: linear-gradient(180deg, transparent var(--haze2-y0), #000 var(--haze2-y1), #000 var(--haze-y1), transparent var(--haze-y2));
  mask-image: linear-gradient(180deg, transparent var(--haze2-y0), #000 var(--haze2-y1), #000 var(--haze-y1), transparent var(--haze-y2));

  pointer-events: none;
}

/* The content keeps roughly the physical size it has at 1200px wide rather than
   scaling with the viewport — on a large monitor the photograph reveals more of
   itself instead of the design shrinking. A centred container stops the copy
   being stranded at the far left on a wide screen. */

.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: clamp(1.8rem, 5vh, 3.2rem) 0 2rem;
  color: var(--ink);
}

.hero-inner {
  display: flex;
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.hero-content {
  display: flex;
  flex-direction: column;
  width: min(520px, 42vw);
  /* the indent the 1200px reference has. capped so it stops growing on a wide
     screen, where the centred container is already doing the work */
  margin-left: min(170px, 14vw);
}

/* Title.
   logo.svg is the wordmark, drawn by hand; it is painted with a CSS mask so it
   can take any colour without the file being recoloured or edited. 2027.svg is
   the matching year — unused in this layout, where the date is set as text, but
   kept in source/ (along with 2028.svg) in case the year returns to the title.
   Where masks are unsupported the real text shows in the dance script face. */

.hero-copy h1 {
  --logo-w: min(430px, 100%);
  margin-bottom: .25rem;
  font: 580 clamp(2.3rem, 5.4vw, 3.3rem) / 1 dance;
  font-weight: 580;
  color: var(--ink);
}

.hero-logo {
  display: block;
  white-space: nowrap;
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .hero-logo {
    /* logo.svg carries generous padding inside its box — the ink is only ~54%
       of the height, with 20% empty above and 26% below. These pull most of
       that back so the lockup sits where it looks like it should. */
    width: var(--logo-w);
    margin-top: calc(var(--logo-w) * -.115);
    margin-bottom: calc(var(--logo-w) * -.15);
    aspect-ratio: 632 / 451;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: url("/logo.svg") no-repeat left center / contain;
    mask: url("/logo.svg") no-repeat left center / contain;
  }
}

.hero-rule {
  width: min(100%, 15rem);
  height: 0;
  margin: 0 0 .35rem;
  border: 0;
  border-top: 1px solid #33312759;
}

.hero-kicker {
  margin-bottom: .25rem;
  font-family: vollkorn;
  font-size: clamp(.9rem, 1.7vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hover-green);
}

.hero-where {
  margin-bottom: 1.4rem;
  font-family: vollkorn;
  font-size: clamp(.95rem, 1.85vw, 1.1rem);
  line-height: 1.4;
  color: var(--ink);
}

/* hero signup */

.hero-form { max-width: 23rem }

.hero-form div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  box-shadow: none;
  border-radius: 0;
}

.hero-form input[type="email"] {
  flex: 1 1 9rem;
  min-width: 0;
  padding: .62em .8em;
  font-size: .92em;
  border: 1px solid #3331273d;
  border-radius: var(--radius);
  background: #fffff6f2;
  box-shadow: 0 1px 3px #00000012;
}

.hero-form input[type="email"]:focus-visible {
  outline: 2px solid var(--med-green);
  outline-offset: -1px;
}

.hero-form input[type="submit"] {
  flex: 0 0 auto;
  padding: .72em 1.15em;
  border: 0;
  border-radius: var(--radius);
  background: var(--hover-green);
  color: var(--background);
  font: inherit;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease;
}

.hero-form input[type="submit"]:hover,
.hero-form input[type="submit"]:focus-visible { background: var(--med-green) }

@media (max-width: 900px) {
  .hero-content { width: min(440px, 100%) }
  .hero-copy h1 { --logo-w: min(390px, 100%) }
}

@media (max-width: 700px) {
  /* the copy is narrower and the crop is tighter here, so the same haze is
     retuned rather than replaced — the form ends at about 19rem */
  .hero {
    --haze-x1: 1.5rem;
    --haze-x2: 18rem;
    --haze-x3: 22rem;
    --haze-x4: 26rem;
    --haze-y1: 19.5rem;
    --haze-y2: 23.5rem;
    --haze2-y0: 10.5rem;
    --haze2-y1: 13rem;
  }

  .hero-copy { padding-top: 2.2rem }
  .hero-inner { width: calc(100% - 44px) }
  .hero-content { width: 100%; margin-left: 0 }
  .hero-copy h1 { --logo-w: min(320px, 100%) }
}

/* ---------------------------------------------------------------- about -- */

.about {
  max-width: none;
  margin: 0;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  background: var(--background);
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 58rem;
  margin: 0 auto;
}

.about h2,
.signup h2,
.past h2 {
  font-family: vollkorn;
  font-weight: 700;
  color: var(--med-green);
}

.about h2 { margin-bottom: .5rem; font-size: clamp(1.7rem, 3.4vw, 2.3rem) }
.about p { margin-bottom: .8rem; line-height: 1.6 }
.about p:last-child { margin-bottom: 0 }

.about img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px #33312714, 0 8px 24px #33312714;
}

@media (max-width: 700px) {
  .about-inner { grid-template-columns: 1fr }
  .about img { order: -1 }
}

/* Teacher call. The markup is commented out in index.html until it is needed;
   these rules sit here ready so switching it on is a one-line change. Photo on
   the left, text on the right — the mirror of the About section above. */

.teach .about-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.teach .lede {
  font-weight: 700;
  color: var(--ink);
}

.teach p { max-width: 34em }

.button {
  display: inline-block;
  margin-top: .6rem;
  padding: .72em 1.5em;
  border-radius: var(--radius);
  background: var(--hover-green);
  color: var(--background);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--med-green);
  color: var(--background);
}

@media (max-width: 700px) {
  .teach .about-inner { grid-template-columns: 1fr }
}

/* --------------------------------------------------------------- signup -- */

.signup {
  position: relative;
  max-width: none;
  margin: 0;
  padding: clamp(3rem, 7vw, 4.5rem) var(--gutter);
  overflow: hidden;
  background: var(--bg-light);
  text-align: center;
}

.signup-inner {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0 auto;
}

.signup h2 {
  margin-bottom: .6rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.signup p {
  margin-bottom: 1.4rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* newsletter form */

.signup form { max-width: 30rem; margin: 0 auto }

.signup form div {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  box-shadow: none;
  border-radius: 0;
}

.signup input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .75em .9em;
  border: 1px solid #00000024;
  border-radius: var(--radius);
  background: var(--background);
  box-shadow: 0 1px 3px #0000000f;
}

.signup input[type="email"]:focus-visible {
  outline: 2px solid var(--med-green);
  outline-offset: -1px;
}

.signup input[type="submit"] {
  flex: 0 0 auto;
  display: inline-block;
  padding: .75em 1.6em;
  border: 0;
  border-radius: var(--radius);
  background: var(--med-green);
  color: var(--background);
  font: inherit;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}

.signup input[type="submit"]:hover,
.signup input[type="submit"]:focus-visible {
  background: var(--hover-green);
  color: var(--background);
}

/* ----------------------------------------------------------------- past -- */

.past {
  max-width: none;
  margin: 0;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  background: var(--sage);
  text-align: center;
}

.past h2 {
  margin-bottom: .5rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--hover-green);
}

.past > p {
  max-width: 38rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.past-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 54rem;
  margin: 0 auto;
}

.past-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* the photographs are the objects here — nothing sits on top of them.
   --zoom and the focal point let a card crop in on its subject: the image is
   sized to --zoom and offset so the point (--fx, --fy) lands in the middle. */

.past-card {
  --zoom: 100%;
  --fx: .5;
  --fy: .5;
}

.past-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px #33312724, 0 10px 28px #3331271f;
}

.past-photo img {
  position: absolute;
  display: block;
  /* style.css caps images at max-width:100%, which would undo the zoom */
  max-width: none;
  width: var(--zoom);
  height: var(--zoom);
  left: calc(50% - var(--fx) * var(--zoom));
  top: calc(50% - var(--fy) * var(--zoom));
  object-fit: cover;
}

/* 2025: the basket sits small and low in the frame, so this crops in on it.
   the focal point can only go as low as the zoom allows before the crop runs
   off the bottom of the box — at 185% the limit is about .73 */
.past-card.framed {
  --zoom: 185%;
  --fx: .56;
  --fy: .71;
}

.past-year {
  margin: 1.1rem 0 .15rem;
  font: 700 clamp(1.4rem, 3vw, 1.9rem) / 1 vollkorn;
  color: var(--hover-green);
}

.past-link {
  color: var(--ink);
  font-weight: 400;
  font-size: .95em;
  text-decoration: none;
  border-bottom: 1px solid #33312733;
  padding-bottom: .1em;
}

.past-link span {
  display: inline-block;
  transition: transform .15s ease;
}

.past-link:hover,
.past-link:focus-visible {
  color: var(--hover-green);
  border-bottom-color: var(--med-green);
}

.past-link:hover span { transform: translateX(.2em) }

/* -------------------------------------------------------------- contact -- */

.site-footer {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  background: var(--background-dark);
  text-align: center;
}

.site-footer h2 {
  margin-bottom: .6rem;
  font: 700 clamp(1.4rem, 3vw, 1.9rem) / 1.3 vollkorn;
  color: var(--med-green);
}

.site-footer p {
  margin-bottom: .5rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.6rem;
  margin-top: 1.6rem;
  font-size: .85em;
}

/* links inside the footer and contact block sit in the garden palette,
   not the default blue used by the archive pages */
.site-footer a {
  color: var(--hover-green);
  text-decoration-color: #53563f66;
  text-underline-offset: .2em;
}

.site-footer a:hover,
.site-footer a:focus-visible { color: var(--med-green) }

/* ---------------------------------------------------------------- phones --
   Not the desktop page at 60%: larger type, calmer margins, bigger targets.
   ------------------------------------------------------------------------ */

@media (max-width: 639px) {
  /* the home footer already carries terms and instagram, so the bar can drop
     them here. the other pages keep them — they have no footer that lists them */
  .nav-aside { display: none }

  body.home {
    font-size: 16px;
    line-height: 1.5;
    --gutter: 24px;
    /* a touch lighter — there is a lot of this band at phone width */
    --sage: #eeeee2;
  }

  /* section rhythm */
  .about { padding-block: 60px }

  /* less sage below the last link before the contact band begins */
  .past { padding-block: 60px 26px }

  .signup { padding-block: 50px }

  .site-footer { padding-block: 56px }

  /* about: photo first, with room before the heading */
  .about-inner { gap: 46px }

  .about h2 { font-size: 1.75rem }
  .about p { margin-bottom: 1rem }

  /* newsletter: the action should look like one */
  .signup h2,
  .past h2 { font-size: 1.75rem }

  .signup p { margin-bottom: 1.6rem }

  .signup form div { gap: .7rem }

  .signup input[type="email"] {
    flex: 1 1 100%;
    min-height: 48px;
  }

  .signup input[type="submit"] {
    width: 100%;
    min-height: 48px;
    font-size: .9em;
  }

  /* past gatherings */
  .past-grid { gap: 72px }
  .past-year { margin-top: 1.15rem; font-size: 2rem }

  .past-link {
    font-size: 17px;
    padding-bottom: .28em;
  }

  /* contact is already at body size; what it needed was room between the parts */
  .site-footer h2 { margin-bottom: 1.1rem }
  .site-footer p { margin-bottom: 1.35rem }
  /* the email sits closer to the address it belongs with */
  .site-footer p:nth-of-type(2) { margin-bottom: .85rem }
  .site-footer p:last-of-type { margin-bottom: 0 }

  .site-footer .footer-links {
    margin-top: 2rem;
    gap: .6rem 1.6rem;
    font-size: .92em;
  }
}