/*
 * OPTION A - "Field guide": framed panels on a warm ground.
 * Preview only; loaded by spring-panels.html.
 *
 * Nothing here is imported from outside the site's existing vocabulary:
 *   - Oswald is already downloaded on every page and currently unused
 *   - pink #ee316c is the existing accent (the menu uses amber #ffa000,
 *     deliberately not reused on the page itself)
 *   - 2px black frames echo the bordered boxes in the Events dropdown
 *
 * The idea: each Nitty Gritty topic becomes a physical card with a solid
 * heading bar, so the long scroll reads as a stack of discrete things
 * rather than one column of text.
 */

:root {
  --ink: #1a1b1f;
  --pink: #ee316c;
  --cream: #fdf7ef;
  --hair: #e6ded3;
}

body { background: var(--cream); }

/* ---------- intro ---------- */
.intro-block { max-width: 780px; }

/* Set at body size rather than display size -- at 25px it dominated the
   page. Centred, with balanced wrapping so the last line is not left as
   an orphan. Browsers without text-wrap:balance just centre normally. */
.lede {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 700;
  margin: 0 0 26px;
  text-align: center;
  text-wrap: balance;
}

/* key facts as a framed table rather than run-on lines */
.facts {
  margin: 0 0 26px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.fact {
  display: grid;
  grid-template-columns: 116px 1fr;
  border-bottom: 1px solid #f0eae2;
}
.fact:last-child { border-bottom: 0; }

.fact dt {
  background: var(--pink);
  color: #fff;
  font-family: Oswald, "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 16px;
  line-height: 1.3;
  padding: 15px 14px;
}

.fact dd {
  margin: 0;
  padding: 14px 18px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}

.soft {
  display: block;
  font-size: 16px;
  color: #6f6a64;
  margin-top: 3px;
}

.team { max-width: 720px; font-size: 19px; line-height: 1.55; }

/* ---------- programme list ---------- */
.programme {
  max-width: 780px;
  font-size: 19px;
  line-height: 1.75;
}

/* ---------- nitty gritty ---------- */
.nitty-title {
  font-family: "Changa One", Impact, sans-serif;
  color: var(--pink);
  font-size: 40px;
  line-height: 1.1;
  margin: 54px 0 20px;
}

.nitty {
  width: 100%;
  max-width: 880px;
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
}

.nitty-h {
  margin: 0;
  background: var(--pink);
  color: #fff;
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 18px;
  /* These bars inherit a 50px line-height from Webflow, invisible while a
     heading fits on one line and a chasm between the lines when it does
     not. Tighten it and give the difference back as padding, so one-line
     bars keep the exact height they have always had. */
  line-height: 24px;
  padding: 26px 18px;
}

.nitty-body {
  padding: 18px 20px 22px;
  font-size: 19px;
  line-height: 1.62;
}

/* ---------- shared details ---------- */
.bullet {
  display: inline-block;
  width: 1.4em;
  color: var(--ink);
  font-weight: 700;
}

br.gap { display: block; content: ""; margin-top: 0.95em; }

@media (max-width: 600px) {
  .fact { grid-template-columns: 1fr; }
  .fact dt { padding: 9px 14px; }
  .lede { font-size: 17px; }
  .nitty-title { font-size: 32px; }

}

/* Webflow centres .container at 767px and below, and that cascades into
   everything inside it, so running text and bullet lists came out centred.
   Pull those back to the left. The tagline and the When/Where/Who table are
   centred on purpose and stay that way.

   This has to match Webflow's own 767px breakpoint, not the 600px one the
   layout tweaks above use: between the two is phone-landscape width, where
   the text was centred with nothing correcting it. */
@media (max-width: 767px) {
  .programme,
  .offerings,
  .offerings li,
  .nitty-body,
  .nitty-body p,
  .list,
  .list li,
  .gatherings,
  .gatherings li,
  .g-note,
  .note,
  .team {
    text-align: left;
  }
}

/* ================= elements introduced by the rewritten copy ============= */

/* programme list: emoji in its own column so the text block aligns */
.offerings { list-style: none; margin: 0 0 22px; padding: 0; }
.offerings li {
  display: grid;
  grid-template-columns: 1.7em 1fr;
  gap: 0;
  align-items: start;
  padding: 0;
  font-size: 18px;
  line-height: 1.38;
  margin-bottom: 7px;
}
.offerings .em { font-size: 20px; line-height: 1.45; }

.note {
  max-width: 780px;
  font-size: 17px;
  line-height: 1.55;
  color: #5c5750;
  border-left: 3px solid var(--hair);
  padding-left: 14px;
  margin: 0 0 10px;
}

/* sub-headings inside a panel (day names, "Amenities include") */
.dayhead {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 20px 0 6px;
}
.nitty-body > .dayhead:first-child { margin-top: 0; }

.nitty-body p { margin: 0 0 12px; }
.nitty-body p:last-child { margin-bottom: 0; }

.list { margin: 0 0 14px; padding-left: 0; list-style: none; }
.list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 5px;
  line-height: 1.5;
}
.list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--ink);
  font-weight: 700;
}

.venue-addr { color: #6f6a64; font-size: 17px; }
.fineprint { font-size: 16px; color: #6f6a64; }

/* Webflow sets links to display:block, which breaks a sentence containing
   one onto three lines. Keep them inline so they sit in running text. */
.nitty-body a,
.closing a { color: var(--pink); display: inline; }

.closing {
  max-width: 780px;
  margin: 34px 0 0;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 600;
}

/* Applications buttons -- the one after the team line and the one at the
   foot of the page. Targeting .button-6 catches both: the footer button
   carries the site's original classes, not the one added in the mock.
   A raised white box with pink type, so it reads as a control rather
   than another pink panel like the facts labels. */
.button-6 {
  display: block;
  width: 300px;
  margin: 34px auto;
  padding: 12px 18px;
  background: #fff;
  color: var(--pink);
  border: 2px solid var(--pink);
  border-radius: 14px;
  box-shadow: 0 3px 0 #c22a5d, 0 6px 14px rgba(0, 0, 0, 0.13);
  text-align: center;
  line-height: 1.25;
}
.button-6 strong { color: var(--pink); }

/* clearance from the team paragraph directly above */
.intro-block .applications { margin: 34px auto 38px; }


/* ---------------------------------------------------------------- *
 * Other Gatherings
 *
 * Not event listings -- just links out to the organisations, with a
 * short line beside each. Two columns on desktop so the names form a
 * scannable edge; stacked on phones.
 * ---------------------------------------------------------------- */
.gatherings { list-style: none; margin: 0; padding: 0; }

.gatherings li {
  display: grid;
  grid-template-columns: minmax(190px, 17em) 1fr;
  gap: 3px 22px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid #f0eae2;
}
.gatherings li:first-child { padding-top: 0; }
.gatherings li:last-child { padding-bottom: 0; border-bottom: 0; }

.gatherings a { font-weight: 700; }

.g-note { color: #5c5750; font-size: 17px; line-height: 1.5; }

@media (max-width: 600px) {
  .gatherings li { grid-template-columns: 1fr; }
}

/* The Other Gatherings banner carries the page title in the artwork, so it
   sits inside the h1 -- the wording lives in the alt text. The two images
   are the same pair of classes the event-page banners use, so Webflow
   swaps desktop for mobile at the same breakpoint. */
.og-banner {
  margin: 0;
  padding: 0;
  line-height: 0;
  text-align: center;
}

@media (max-width: 767px) {
  /* The mobile banner has no bottom margin of its own; match the 14px of
     air the event pages leave between banner and first paragraph. */
  .og-intro { margin-top: 9px; }
}