/* ==========================================================================
   Love Meets Coffee CIC — LoveMeetsCoffee.org
   Shared stylesheet for all pages.

   Layout note (the fix in this version)
   ------------------------------------
   The previous stylesheet capped EVERY paragraph at 62 characters
   (p { max-width: 62ch }) while the page itself was 1120px wide. Any section
   with a single column of text therefore stopped about two thirds of the way
   across and left a wide empty margin down the right of the page.

   Now the reading measure is applied only to the places that genuinely need
   it — long prose on the privacy and accessibility pages, and the right-hand
   column of a two-column section. Everywhere else the content is laid out in
   real columns that reach both edges of the container.
   ========================================================================== */

:root {
  /* Colour ---------------------------------------------------------------- */
  --sage:        #a9bfa6;  /* main colour: soft sage green                   */
  --sage-mist:   #e7eee3;  /* pale sage, used for alternating page bands     */
  --cream:       #f6f1e7;  /* warm cream                                     */
  --white:       #ffffff;
  --forest:      #33513e;  /* deeper green: headings and buttons             */
  --forest-deep: #243b2d;  /* button hover / footer                          */
  --ink:         #2c3830;  /* body text                                      */
  --muted:       #5f6e63;  /* quieter text, captions, footer detail          */
  --rule:        #d5ddd0;  /* hairline dividers                              */
  --red:         #a51b21;  /* the logo red, used only for brand marks        */

  /* Type ------------------------------------------------------------------ */
  --font-head: "Petrona", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.9rem;
  --step-0:  1.0625rem;
  --step-1:  1.2rem;
  --step-2:  1.5rem;
  --step-3:  clamp(1.7rem, 1.35rem + 1.3vw, 2.2rem);
  --step-4:  clamp(2rem, 1.5rem + 2vw, 2.8rem);
  --step-5:  clamp(2.4rem, 1.7rem + 3.2vw, 3.6rem);

  /* Layout ---------------------------------------------------------------- */
  --measure: 64ch;         /* used deliberately, never globally             */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 1180px;
  --radius: 16px;
}

/* Reset / base ------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--forest);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--forest); text-underline-offset: 0.22em; }
a:hover { color: var(--forest-deep); }

:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--forest :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 50;
  text-decoration: none;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; color: var(--white); }

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

/* Layout helpers ---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--mist   { background: var(--sage-mist); }
.section--white  { background: var(--white); }
.section--forest { background: var(--forest); color: var(--white); }
.section--forest h2,
.section--forest h3 { color: var(--white); }

/* The reading measure, applied only where a column of prose needs it. */
.measure { max-width: var(--measure); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}
.section--forest .lede { color: var(--sage-mist); }

/* A section heading with an introduction, sitting above a full-width grid. */
.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head h2 { margin-bottom: 0.35em; }
.section-head .lede { margin-bottom: 0; }

/* Header ------------------------------------------------------------------ */

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1rem;
}

/* Brand lockup: the cup mark, then the name and strapline as live text so
   the header stays legible at every width. */
.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  text-decoration: none;
  color: inherit;
}
.brand img {
  width: auto;
  height: clamp(44px, 6vw, 58px);
}
.brand__name {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--red);
  margin: 0;
}
.brand__strap {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(0.82rem, 0.76rem + 0.25vw, 0.95rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--muted);
  margin: 0.25rem 0 0;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--sage); }
.nav a[aria-current="page"] {
  color: var(--forest);
  border-bottom-color: var(--forest);
}

@media (max-width: 560px) {
  .brand__strap { display: none; }
}

/* Buttons ----------------------------------------------------------------- */

.button {
  display: inline-block;
  background: var(--forest);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border: 2px solid var(--forest);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.button:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: var(--white);
}

.button--quiet {
  background: transparent;
  color: var(--forest);
  border-color: var(--sage);
}
.button--quiet:hover {
  background: var(--sage-mist);
  color: var(--forest-deep);
  border-color: var(--forest);
}

.button--light {
  background: var(--white);
  color: var(--forest);
  border-color: var(--white);
}
.button--light:hover { background: var(--cream); color: var(--forest-deep); border-color: var(--cream); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: center;
  margin-top: 1.75rem;
}

/* Photographs ------------------------------------------------------------- */

.photo {
  margin: 0;
  background: var(--sage-mist);
  border-radius: var(--radius);
  overflow: hidden;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo--arch { border-radius: 220px 220px 20px 20px; }
.photo--arch img { aspect-ratio: 4 / 5; }
.photo--tall img  { aspect-ratio: 4 / 5; }
.photo--wide img  { aspect-ratio: 4 / 3; }

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

.hero {
  background: var(--cream);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__title { margin-bottom: 0.35em; }

.hero__intro {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 44ch;
}

.hero__invite {
  font-family: var(--font-head);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--red);
  line-height: 1.35;
  margin: 0 0 1.4rem;
}

@media (min-width: 880px) {
  .hero__inner { grid-template-columns: 1.02fr 0.98fr; }
}

/* One gentle, orchestrated arrival, on the home page only. */
@media (prefers-reduced-motion: no-preference) {
  .hero__invite,
  .hero__title,
  .hero__intro,
  .hero__actions,
  .hero__figure {
    animation: rise 0.7s ease-out both;
  }
  .hero__title   { animation-delay: 0.06s; }
  .hero__intro   { animation-delay: 0.14s; }
  .hero__actions { animation-delay: 0.22s; }
  .hero__figure  { animation-delay: 0.15s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Vision and mission ------------------------------------------------------ */

.purpose {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 800px) {
  .purpose { grid-template-columns: 1fr 1fr; }
}

.purpose > div { border-top: 2px solid var(--sage); padding-top: 1.4rem; }
.purpose h2 { font-size: var(--step-3); margin-bottom: 0.45em; }

.statement {
  font-family: var(--font-head);
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--forest);
  margin-bottom: 0.9em;
}

/* Split: heading on the left, the body of the text on the right ----------- */

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.split__intro h1,
.split__intro h2 { margin-bottom: 0.4em; }
.split__intro .lede { margin-bottom: 0; }
.split__body > p,
.split__body > .note { max-width: var(--measure); }

@media (min-width: 820px) {
  .split { grid-template-columns: 0.8fr 1.2fr; }
}

/* Story: text beside a photograph ----------------------------------------- */

.duo {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.duo__text > :last-child { margin-bottom: 0; }

@media (min-width: 820px) {
  .duo { grid-template-columns: 1.1fr 0.9fr; }
  .duo--flip .duo__figure { order: -1; }
}

/* Beat lines (the short lines in Our story) ------------------------------- */

.beats {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}
.beats li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--forest);
  line-height: 1.7;
}
.beats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
}
.section--forest .beats li { color: var(--white); }

/* Cards: the four things that happen (home page) -------------------------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cards a {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.cards .photo { margin-bottom: 1rem; }
.cards .photo img { aspect-ratio: 5 / 4; transition: transform 0.4s ease; }
.cards a:hover .photo img { transform: scale(1.03); }
.cards h3 {
  font-size: var(--step-1);
  margin-bottom: 0.3em;
}
.cards a:hover h3 { color: var(--forest-deep); text-decoration: underline; }
.cards p {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0;
}

/* Values grid ------------------------------------------------------------- */

.values {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.value {
  border-top: 2px solid var(--sage);
  padding-top: 1.1rem;
}
.value h2 {
  font-size: var(--step-2);
  margin-bottom: 0.4em;
}
.value p {
  font-size: var(--step-0);
  margin-bottom: 0.9em;
}
.value .beats { margin-bottom: 0; }
.value .beats li { font-size: var(--step-0); line-height: 1.6; }
.value .beats li::before { top: 0.72em; }

/* Activity sections (what we do) ------------------------------------------ */

.activity {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--rule);
}
.activity:first-of-type { border-top: 0; padding-top: 0; }
.activity:last-of-type { padding-bottom: 0; }

@media (min-width: 820px) {
  .activity { grid-template-columns: 1fr 1fr; }
  .activity--flip .activity__figure { order: -1; }
}

.tick-list {
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.35rem 1.5rem;
}
.tick-list li {
  position: relative;
  padding-left: 1.4rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
}

.note {
  font-size: var(--step-0);
  color: var(--muted);
  border-left: 3px solid var(--sage);
  padding-left: 1rem;
  margin-block: 1.5rem;
}

/* Row list (who we work alongside) ---------------------------------------- */

.row-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 2.5rem;
}
.row-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

/* Invitation band --------------------------------------------------------- */

.invitation { text-align: center; }
.invitation .lede,
.invitation p { margin-inline: auto; }
.invitation .lede { max-width: 52ch; }

.invitation__line {
  font-family: var(--font-head);
  font-size: var(--step-4);
  font-style: italic;
  line-height: 1.2;
  color: var(--forest);
  max-width: 20ch;
  margin: 0 auto 1.25rem;
}
.section--forest .invitation__line { color: var(--white); }
.invitation__line--long { max-width: 34ch; font-size: var(--step-2); }

.invitation .actions { justify-content: center; }

.promise {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 2.5rem;
  text-align: left;
}
.promise li {
  font-family: var(--font-head);
  font-size: var(--step-1);
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.keywords {
  font-family: var(--font-head);
  font-size: var(--step-1);
  color: var(--forest);
  margin-top: 2.5rem;
}
.keywords span { white-space: nowrap; }
.keywords span + span::before {
  content: "•";
  color: var(--sage);
  padding-inline: 0.6rem;
}
.section--forest .keywords { color: var(--sage-mist); }

/* Contact form ------------------------------------------------------------ */

.contact {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 840px) {
  .contact { grid-template-columns: 1.1fr 0.9fr; }
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--forest);
}
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}
.field input:focus,
.field textarea:focus { border-color: var(--forest); }
.field textarea { min-height: 150px; resize: vertical; }

.field-pair {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-help { font-size: var(--step--1); color: var(--muted); }

.contact__aside p { max-width: 42ch; }

/* Footer ------------------------------------------------------------------ */

.site-footer {
  background: var(--forest-deep);
  color: var(--sage-mist);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--step--1);
  line-height: 1.75;
}
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--sage); }

.site-footer h2 {
  font-size: var(--step-0);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--sage);
  margin-bottom: 0.5rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 2.5rem; }
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid p { margin-bottom: 0.4em; }

.footer-brand img { width: clamp(120px, 14vw, 158px); height: auto; }
.footer-brand p { margin-top: 1rem; color: var(--sage-mist); }

.footer-base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* Simple content pages (privacy, accessibility) --------------------------- */
/* Centred, so the page reads as a deliberate column rather than text pushed
   against the left edge with a gap beside it.                              */

.prose {
  max-width: 68ch;
  margin-inline: auto;
}
.prose .lede { max-width: none; }
.prose h2 { font-size: var(--step-3); margin-top: 2.25rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Social links -------------------------------------------------------------
   Icon links in the footer, each in its own platform colour so they read at a
   glance against the dark green. The mark sits in a cream disc by default and
   the disc fills with the brand colour on hover or keyboard focus.
   Facebook, Instagram, LinkedIn and YouTube icons are inline SVG, so there is
   nothing extra to upload to /images.
   ------------------------------------------------------------------------- */

.social__heading {
  margin-top: 1.75rem;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* Guard against the generic footer list rules adding bullets or spacing. */
.social li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Centred row, used on the privacy and accessibility pages where the footer
   has no column grid. */
.social--centre {
  justify-content: center;
  margin: 0 0 2rem;
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;              /* 44px keeps the tap target comfortable on phones */
  height: 44px;
  background: var(--cream);
  border-radius: 50%;
  color: var(--brand, var(--forest));
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social__link svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  display: block;
}

/* Platform colours ------------------------------------------------------- */
.social__link--facebook  { --brand: #1877f2; }
.social__link--instagram { --brand: #dd2a7b; }
.social__link--linkedin  { --brand: #0a66c2; }
.social__link--youtube   { --brand: #ff0000; }

.social__link:hover,
.social__link:focus-visible {
  background: var(--brand);
  color: var(--white);
  transform: translateY(-3px);
}

/* Instagram has no single flat colour, so its hover uses the familiar
   warm-to-violet wash rather than one swatch. */
.social__link--instagram:hover,
.social__link--instagram:focus-visible {
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}

/* The footer sets link colours globally; keep ours. */
.site-footer .social__link { color: var(--brand); }
.site-footer .social__link:hover,
.site-footer .social__link:focus-visible { color: var(--white); }

.social__link:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* Rotating strapline ------------------------------------------------------
   The two lines sit in the same grid cell, so the header height is stable and
   they cross-fade in place. One full cycle is 14 seconds: long enough to read
   each line twice over without it becoming a distraction.
   ------------------------------------------------------------------------- */

.brand__strap {
  display: grid;
  margin: 0.25rem 0 0;
}

.brand__strap-line {
  grid-area: 1 / 1;          /* stack both lines on top of each other */
  font-family: var(--font-head);
  font-size: clamp(0.82rem, 0.76rem + 0.25vw, 0.95rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--muted);
  animation-duration: 14s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.brand__strap-line--a { animation-name: strapFadeA; }
.brand__strap-line--b { animation-name: strapFadeB; }

@keyframes strapFadeA {
  0%, 42%   { opacity: 1; transform: translateY(0); }
  50%, 92%  { opacity: 0; transform: translateY(-3px); }
  100%      { opacity: 1; transform: translateY(0); }
}

@keyframes strapFadeB {
  0%, 42%   { opacity: 0; transform: translateY(3px); }
  50%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(3px); }
}

/* If the visitor's device asks for reduced motion, no fading: the first line
   simply stays put. */
@media (prefers-reduced-motion: reduce) {
  .brand__strap-line { animation: none; }
  .brand__strap-line--a { opacity: 1; }
  .brand__strap-line--b { display: none; }
  .social__link { transition: none; }
  .social__link:hover,
  .social__link:focus-visible { transform: none; }
}

/* Keeps the existing behaviour of hiding the strapline on small phones, where
   the header needs the width for the name. Repeated here because this block
   comes after the original rule in the file. */
@media (max-width: 560px) {
  .brand__strap { display: none; }
}