/* Art Speaks — art-speaks.org
   Design: Adobe XD mockup by previous designer (Art-Speaks_webpage_design_vFinal)
   Palette and type sampled from the design PDF. */

:root {
  --blue: #0b5394;
  --ink: #1f1f1f;
  --bg: #f8f7f5;
  --paper: #f9f7f5;
  --green: #548935;
  --steel: #508dae;
  --gold: #e0a440;
  --gold-dark: #c98f2d;
  --red: #c0504d;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --brand: "Comfortaa", var(--sans);
  --content: 72rem;
  --bio-gap: clamp(1.8rem, 5vw, 4rem);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip; /* swatches overhang the left viewport edge by design */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); }

/* Inline "Art Speaks" wordmark */
.as {
  font-family: var(--brand);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.as.blue { color: var(--blue); }

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(248, 247, 245, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(11, 83, 148, 0.08);
  transition: box-shadow 0.25s ease;
}
.site-nav.scrolled { box-shadow: 0 2px 14px rgba(31, 31, 31, 0.1); }

.nav-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--blue);
  font-size: 1.05rem;
}
.nav-brand img { width: 34px; height: 34px; }

.nav-links {
  list-style: none;
  display: flex;
  gap: clamp(0.9rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--blue); }

/* ---------- Hero (proportions measured from the original mockup) ----------
   At the 1400px artboard: bubble 277px at x250/y28; Comfortaa 54px wordmark
   starting 112px left of the bubble, "Speaks" running under the tail; title
   stack at 40px/1.25 centered on the bubble; everything scales off --bubble. */

.hero { padding: clamp(0.8rem, 2vw, 1.9rem) 1rem clamp(1rem, 2.6vw, 2.4rem); }

.hero-inner {
  --bubble: clamp(225px, 24.75vw, 375px);
  max-width: 82rem; /* roomier than the content column for the large title */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* title block bottom-aligned with Art Speaks */
  gap: clamp(0.75rem, 2.2vw, 2.25rem);
}

.hero-logo {
  /* single designer lockup image; bubble = 70.6% of its width */
  width: calc(var(--bubble) * 1.416);
}
.hero-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-title {
  /* lowered 20% from the bubble-bottom alignment */
  margin: 0 0 calc(var(--bubble) * 0.51);
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--blue);
  font-size: clamp(1.35rem, 2.74vw, 2.79rem);
  line-height: 1.25;
}
.celebrating {
  width: 5.78em; /* 231px at the mockup's 40px type */
  max-width: 100%;
  margin: 0 auto;
}
.hero-title-the,
.hero-title-rest { display: block; }

@media (min-width: 48rem) {
  .hero-title-rest { white-space: nowrap; }
}

/* ---------- Painted dividers & rules ---------- */

.divider {
  height: clamp(13px, 1.8vw, 25px);
  background: url("../images/art_speaks_paint_line.png") center / 100% 100% no-repeat;
}

/* alternate dividers flip upside down so the stroke varies */
.divider-flip { transform: scaleY(-1); }

/* bio separators keep the thin rainbow line */
.divider-thin {
  background-image: url("../images/divider-rainbow.png");
}

/* Between-section stripes are content-width and centered in the mockup;
   only the header stripe runs full-bleed */
.divider-content {
  max-width: min(calc(100% - 2rem), calc(var(--content) - 2rem));
  margin-left: auto;
  margin-right: auto;
}

/* Bio separators align with the bio text column, like the mockup */
.divider-thin {
  width: calc((100% - var(--bio-gap)) * 0.75 + 1rem);
  margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3.5rem) auto;
  height: 8px;
}

.rule-red {
  height: clamp(9px, 1vw, 13px);
  background: url("../images/rule-red.png") center / 100% 100% no-repeat;
  margin: clamp(1.8rem, 4vw, 2.8rem) auto;
  max-width: 58rem; /* mockup rules are narrower than the content box */
}

/* ---------- Sections ---------- */

section {
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
}

/* ---------- About ---------- */

.about-lead {
  grid-column: 2;
  grid-row: 1;
  color: var(--blue);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

/* Each swatch shares a grid row with its paragraph, so they stay lined up */
.about-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) 3fr;
  column-gap: clamp(1.8rem, 5vw, 4rem);
  row-gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items: center;
}
.about-p { grid-column: 2; margin: 0; }
.callout { grid-column: 1; }
.callout-1 { grid-row: 2; }
.callout-2 { grid-row: 3; }
.callout-3 { grid-row: 4; }

/* keep intrinsic sizes (brush aspect-ratios, long words) from blowing out
   grid tracks on narrow screens */
.about-grid > *,
.bio > *,
.timeline-row > * { min-width: 0; }

/* Each swatch overhangs its column to the left by --bleed. On typical
   widths the page margin is smaller than the overhang, so the stroke runs
   off the viewport edge like the mockup; stretch the window and the full
   painted end is revealed. (% paddings are relative to the column.) */
.callout {
  --bleed: clamp(3rem, 10vw, 9rem);
  margin: 0 0 0 calc(-1 * var(--bleed));
  width: calc(100% + var(--bleed));
  color: #fff;
  font-weight: 500;
  font-size: clamp(1.175rem, calc(1.8vw + 2px), 1.625rem);
  line-height: 1.4;
  align-content: center; /* centers block content; harmless no-op in old browsers */
  padding: 1.2rem 10% 1.2rem calc(var(--bleed) + 6%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
/* aspect-ratio matches each brush image so the stroke never distorts
   far enough to leave text on a ragged edge */
.callout-1 { background-image: url("../images/gradient-brush-1.png"); aspect-ratio: 618 / 228; }
.callout-2 { background-image: url("../images/gradient-brush-2.png"); aspect-ratio: 618 / 192; }
.callout-3 { background-image: url("../images/gradient-brush-3.png"); aspect-ratio: 627 / 182; }

/* Once the viewport is wide enough that the whole swatch is revealed
   (page margin > --bleed), center the label in the stroke on two
   balanced lines */
@media (min-width: 86rem) {
  .callout {
    text-align: center;
    text-wrap: balance;
    padding: 1.2rem 9%;
  }
}

@media (max-width: 47.9rem) {
  /* interleaved: swatch strip above its paragraph, one-line label */
  .about-grid { grid-template-columns: 1fr; }
  .about-lead,
  .about-p,
  .callout { grid-column: 1; }
  .callout-1, .callout-2, .callout-3 { grid-row: auto; aspect-ratio: auto; }
  .callout {
    --bleed: 0rem; /* no left bleed on phones: strip centers with the titles */
    white-space: nowrap;
    text-align: center;
    font-size: min(2.7vw, 0.95rem);
    padding: 1.1em 1rem;
  }
  .about-p { margin-bottom: 0.75rem; }
}

/* ---------- Board ---------- */

/* Aligned with the bio text column, per the mockup */
.board-lead {
  color: var(--blue);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  margin: 0 0 3rem;
  margin-left: calc((100% - var(--bio-gap)) / 4 + var(--bio-gap));
}

.bio {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) 3fr;
  gap: var(--bio-gap);
  align-items: start;
}

.bio-card { text-align: center; }
.bio-card img {
  width: clamp(170px, 18vw, 240px);
  height: auto;
  border-radius: 50%;
  margin: 0 auto 1.1rem;
}
.bio-card h3 {
  margin: 0 0 0.2rem;
  font-size: clamp(1.3rem, 1.5vw, 1.45rem);
  font-weight: 700;
}
.bio-role {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
}

.bio-text { font-size: inherit; }
.bio-text p { margin: 0 0 1.3em; }
.bio-text p:last-child { margin-bottom: 0; }

/* ---------- Timeline ---------- */

.timeline h2 {
  text-align: center;
  color: var(--blue);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  margin: 0 0 1rem;
}

.timeline-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 2.2fr;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: start;
  padding: 0 clamp(0.5rem, 4vw, 3rem);
}

.timeline-date {
  margin: 0;
  color: var(--blue);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  text-align: right;
}

.timeline-row ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: inherit;
}
.timeline-row li { margin-bottom: 0.45em; }
.timeline-row li:last-child { margin-bottom: 0; }


/* ===== V2 spine timeline port ===== */
.eyebrow {
  margin: 0 0 0.6rem;
  text-align: center;
  font-family: var(--brand);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.section-title {
  margin: 0 auto;
  text-align: center;
  color: var(--blue);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  max-width: 30em;
}

.title-stroke {
  width: 110px;
  height: 9px;
  margin: 1.4rem auto clamp(2.5rem, 5vw, 4rem);
  background: url("../images/divider-rainbow.png") center / 100% 100% no-repeat;
}
.title-stroke-red {
  background-image: url("../images/rule-red.png");
}


.phases {
  width: fit-content;
  max-width: 46rem;
  margin: 0 auto;
}

.phase {
  position: relative;
  padding-left: clamp(2.4rem, 5vw, 3.4rem);
  padding-bottom: clamp(3rem, 5.5vw, 4.25rem);
}
.phase:last-child { padding-bottom: 0.5rem; }

/* spine segment per phase; none after the last dot */
.phase::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.4em;
  height: 100%;
  width: 3px;
  background: #e4ded4;
}
.phase:last-child::after { display: none; }

.phase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--phase-color, var(--blue));
  box-shadow: 0 0 0 4px var(--bg);
  z-index: 1;
}
.phase:nth-child(1) { --phase-color: #579044; }
.phase:nth-child(2) { --phase-color: #f2b23e; }
.phase:nth-child(3) { --phase-color: #a61631; }
.phase:nth-child(4) { --phase-color: #508dae; }
.phase:nth-child(5) { --phase-color: #1b74c0; }

/* Painted strip behind each date, matching its phase dot */
.phase-date {
  display: inline-block;
  margin: 0 0 1.1rem;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  padding: 0.7em 1.6em 0.75em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.phase:nth-child(1) .phase-date { background-image: url("../images/swatches/green-brush-3.png"); }
.phase:nth-child(2) .phase-date { background-image: url("../images/swatches/gold-brush-3.png"); }
.phase:nth-child(3) .phase-date { background-image: url("../images/swatches/red-brush-3.png"); }
.phase:nth-child(4) .phase-date { background-image: url("../images/swatches/steel-brush-3.png"); }
.phase:nth-child(5) .phase-date { background-image: url("../images/swatches/blue-brush-3.png"); }

.phase ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: inherit;
}
.phase li { margin-bottom: 0.45em; }
.phase li:last-child { margin-bottom: 0; }


@media (max-width: 47.9rem) {
  .phase { padding-left: 2rem; }
  .phase::before { width: 14px; height: 14px; }
  .phase::after { left: 5.5px; }
}

/* ---------- Support ---------- */

.support { padding-left: 0; padding-right: 0; max-width: none; }

.support-swash {
  background: url("../images/swash-blue.png") center / 100% 100% no-repeat;
  /* side padding scales with the swash: its ragged margins are a % of width */
  padding: clamp(5rem, 11vw, 8rem) 13vw;
}

.support-content {
  max-width: 56rem;
  margin: 0 auto;
  color: var(--paper);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); /* same pop as the swatch labels */
}
.support-content .btn-donate { text-shadow: none; }

.support-content h2 {
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0 0 1.2rem;
}

.support-lead {
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.5;
}

.support-content p { margin: 0 0 1.2em; }

.support-contact { font-weight: 700; }
.support-contact a {
  color: inherit;
  text-decoration: none;
}
.support-contact a:hover,
.support-contact a:focus-visible { text-decoration: underline; }

.btn-donate {
  display: inline-block;
  margin-top: 0.8rem;
  background: var(--gold);
  color: var(--paper);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  text-decoration: none;
  padding: 0.55em 1.7em;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.btn-donate:hover,
.btn-donate:focus-visible { background: var(--gold-dark); }

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

.site-footer {
  text-align: center;
  padding: 2rem 1rem 2.5rem;
  font-size: 0.85rem;
  color: #666;
}
.site-footer a { color: inherit; }

/* ---------- Focus visibility ---------- */

a:focus-visible,
.btn-donate:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Mobile ---------- */

@media (max-width: 47.9rem) {
  .hero-inner { flex-direction: column; align-items: center; gap: 1.25rem; }
  .hero-title { margin-bottom: 0; } /* desktop bubble-alignment offset not needed stacked */

  .bio,
  .timeline-row { grid-template-columns: 1fr; }

  .board-lead { margin-left: 0; }

  /* center titles on phones; body text stays left-aligned */
  .about-lead,
  .board-lead,
  .support-content h2 { text-align: center; }

  .divider-thin { width: min(100%, 22rem); margin-left: auto; margin-right: auto; }

  .bio-card img { width: 190px; }

  .timeline-date { text-align: left; }

  .support-swash {
    background-color: var(--steel);
    background-size: auto 100%;
    background-position: center;
  }
}

@media (max-width: 30rem) {
  .nav-brand span { display: none; }
}