/* Endless Autumn back rooms — the 2024 Wix look, rebuilt.
   Colours sampled from the Wix pages on 2026-09-28. Only the ea layout loads
   this file; nothing here can reach the main site. */

:root {
  --ea-bg: #c7dfe1;
  --ea-text: #5f6f6f;
  --ea-ink: #3e4245;
  --ea-white: #fff;
  --ea-btn: #7fccf6;
  --ea-btn-line: #226b8e;
  --ea-foot: #a5b9ba;
  --ea-cooper: "cooper-black-std", "Cooper Black", Georgia, serif;
  --ea-franklin: "franklin-gothic-atf", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.ea {
  margin: 0;
  background: var(--ea-bg);
  color: var(--ea-text);
  font: 700 17px/1.45 var(--ea-franklin);
  overflow-wrap: anywhere; /* "thoughts/photos/ideas/questions/journal" is one word */
  -webkit-font-smoothing: antialiased;
}

.ea a { color: inherit; }
.ea img { max-width: 100%; height: auto; display: block; }

/* --- Masthead: social left, four buttons right, as on Wix ------------- */
.ea-mast {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.ea .social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.ea .social a { display: block; width: 18px; height: 18px; color: #7d8b8c; }
.ea .social svg { width: 100%; height: 100%; fill: currentColor; }
.ea-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ea-nav a {
  border-top: 1px solid var(--ea-ink);
  padding: 8px 8px 0;
  font: 700 13px/1 var(--ea-franklin);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ea-ink);
  text-decoration: none;
}

/* --- Page ------------------------------------------------------------- */
.ea-main { max-width: 880px; margin: 0 auto; padding: 56px 16px 96px; }

.ea-kicker, .ea-title {
  font-family: var(--ea-cooper);
  font-style: italic;
  font-weight: 400;
  color: var(--ea-white);
  text-align: center;
  margin: 0;
  line-height: 1.1;
}
.ea-kicker { font-size: 25px; }
.ea-title { font-size: clamp(44px, 9vw, 60px); margin-bottom: 20px; }

.ea-h {
  font: italic 400 clamp(28px, 5vw, 40px)/1.15 var(--ea-cooper);
  color: var(--ea-ink);
  text-align: center;
  margin: 72px 0 24px;
}
.ea-h--big { font-size: clamp(34px, 7vw, 60px); }
.ea-h--small { font-size: 25px; text-align: left; }
.ea-h--white { color: var(--ea-white); }
.ea-h small { display: block; font: 700 17px/1.4 var(--ea-franklin); font-style: normal; }

.ea p { margin: 0 0 1em; }
.ea-center { text-align: center; }
.ea-lead { font-size: 24px; line-height: 1.3; }
.ea-big { font-size: clamp(26px, 4.5vw, 40px); line-height: 1.2; }
.ea-small { font-size: 13px; }

/* Lyrics, set white in Cooper as on Day 2's journaling prompt. */
.ea-lyric {
  font: italic 400 15px/1.5 var(--ea-cooper);
  color: var(--ea-white);
  text-align: center;
}
.ea-lyric--ink { color: var(--ea-ink); text-align: left; }

.ea-intro { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.ea-intro p { margin: 0 0 .75em; }

/* The at-a-glance list next to the welcome video. */
.ea-glance { list-style: none; margin: -.75em 0 0; padding: 0; }
.ea-glance li + li { margin-top: 2px; }

/* Two columns that stack on a phone. */
.ea-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 32px;
  align-items: start;
  margin: 40px 0;
}
.ea-row--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) {
  .ea-row, .ea-row--even { grid-template-columns: 1fr; }
}

/* --- Embeds ----------------------------------------------------------- */
.ea-video { position: relative; aspect-ratio: 16 / 9; max-width: 560px; margin: 24px auto; background: #000; }
.ea-row .ea-video { margin: 0; max-width: none; }
.ea-video--wide { max-width: 780px; }
.ea-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ea-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ea-videos .ea-video { margin: 0; max-width: none; }
@media (max-width: 700px) { .ea-videos { grid-template-columns: 1fr; } }

.ea-sc iframe { display: block; width: 100%; border: 0; }

/* --- Pictures --------------------------------------------------------- */
.ea-fig { margin: 0; }
.ea-fig figcaption { font-size: 13px; margin-top: 6px; }
.ea-fig--center { max-width: 440px; margin: 0 auto; }

/* Day 1's lyric drafts were a Wix slideshow; three pages side by side. */
.ea-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ea-pages a { display: block; background: #fff; }

/* Day 2's galleries: fixed-proportion cells, cropped to fill, as on Wix. */
.ea-grid { display: grid; gap: 16px; margin: 24px 0; }
.ea-grid--wood { grid-template-columns: 1fr 2fr; }
.ea-grid--wood-b { grid-template-columns: 2fr 1fr; }
.ea-grid img { width: 100%; aspect-ratio: var(--ar, 3 / 4); object-fit: cover; }
.ea-grid--nw { grid-template-columns: 36fr 64fr; }
.ea-grid--wn { grid-template-columns: 64fr 36fr; }
.ea-grid--nw img, .ea-grid--wn img { aspect-ratio: auto; height: clamp(220px, 45vw, 470px); }
@media (max-width: 700px) {
  .ea-grid--wood, .ea-grid--wood-b { grid-template-columns: 1fr 1fr; }
  .ea-grid--nw img, .ea-grid--wn img { height: 200px; }
}

/* --- Buttons ---------------------------------------------------------- */
.ea-btns { display: flex; justify-content: center; margin: 32px 0; }
.ea-btns--stack { flex-direction: column; align-items: center; gap: 14px; }
.ea-btn {
  display: inline-block;
  min-width: 248px;
  padding: 18px 28px;
  border: 1px solid var(--ea-btn-line);
  border-radius: 999px;
  background: var(--ea-btn);
  color: var(--ea-white) !important;
  font: 700 15px/1 var(--ea-franklin);
  letter-spacing: .12em;
  text-align: center;
  text-decoration: none;
}
.ea-btn--wide { min-width: 324px; }
a.ea-btn:hover, a.ea-btn:focus-visible { background: var(--ea-btn-line); }
.ea-btn--off { cursor: default; }
@media (max-width: 400px) { .ea-btn, .ea-btn--wide { min-width: 0; width: 100%; } }

/* --- Footer ----------------------------------------------------------- */
.ea-foot { background: var(--ea-foot); color: #3f4c4d; font: 400 14px/1.5 var(--ea-franklin); }
.ea-foot__inner { max-width: 1000px; margin: 0 auto; padding: 32px 16px 40px; }
.ea-foot .social { gap: 18px; margin-bottom: 24px; }
.ea .ea-foot .social a { width: 30px; height: 30px; color: #6b7a7b; }
.ea-foot p { margin: 0 0 16px; }
.ea-foot span { text-transform: uppercase; }