.rind-divider { width: 100%; height: clamp(26px, 4vw, 44px); display: block; }
.rind-divider.flip { transform: scaleY(-1); }

section { padding: var(--space-xl) var(--gutter); }
section > .section-head, .story-grid, .gallery-grid, .community-list,
.locations-grid, .locations-note { max-width: 74rem; margin-inline: auto; }

/* ---- story */
#story { background: var(--white); }
.story-grid {
  display: grid; gap: var(--space-l);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}
.story-copy h2 { font-size: var(--step-2); margin-bottom: var(--space-m); }
.story-copy h2 .script { color: var(--red); font-size: 1.2em; }
.story-copy p { max-width: var(--measure); margin-bottom: var(--space-m); }
.story-copy .pull {
  font-family: var(--font-script); font-size: var(--step-1);
  color: var(--red); line-height: 1.3; padding-left: var(--space-m);
  border-left: 5px solid var(--green);
}
.story-figure picture { display: block; }
.story-figure img.round { width: 100%; border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.story-figure figcaption {
  text-align: center; margin-top: var(--space-s);
  font-size: var(--step--1); color: #4a463f;
}

/* ---- gallery */
#gallery { background: var(--white); }
.gallery-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(3, 1fr); }
/* <picture> is display:inline by default, which gives the grid item no
   definite box — the img's height:100% then resolves to nothing and the
   gallery collapses. Making it a block fixes the sizing chain. */
.gallery-grid picture { display: block; height: 100%; }
.gallery-grid picture:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-grid img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  aspect-ratio: 4 / 3;
}
.gallery-grid picture:first-child img { height: 100%; aspect-ratio: auto; min-height: 20rem; }

/* ---- community */
#community { background: var(--rind); color: var(--ink-on-rind); }
#community .section-head h2 .script { color: var(--yellow); }  /* 8.17:1 on rind */
#community .section-sub { color: #d8e2d6; }
.community-list { display: grid; gap: var(--space-l); grid-template-columns: repeat(3, 1fr); }
.community-list h3 { font-size: var(--step-1); margin-bottom: var(--space-s); color: var(--yellow); }
.community-list p { color: #e6ede4; }

/* ---- locations */
#locations { background: var(--white); }
#locations .section-head h2 .script { color: var(--red); }
.locations-grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(2, 1fr); }
.location {
  border: 3px solid var(--rind); border-radius: 14px; padding: var(--space-l) var(--space-m);
}
.location h3 { font-size: var(--step-1); margin-bottom: var(--space-s); }
.location .addr { font-size: var(--step-1); font-weight: 600; }
.location .hours { color: #4a463f; margin: var(--space-s) 0 var(--space-m); }
.location .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.6rem;
  border-radius: 999px; background: var(--red); color: var(--ink-on-red);
  font-family: var(--font-display); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
}
.btn.ghost { background: var(--white); color: var(--ink-on-white); border: 3px solid var(--rind); }
.locations-note { text-align: center; margin-top: var(--space-l); }

/* ---- footer */
#site-footer { background: var(--seed); color: var(--white); padding: 0 0 var(--space-l); }
.footer-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s) var(--space-l);
  background: var(--rind); padding: var(--space-m) var(--gutter);
  font-size: var(--step--1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.footer-facts li::before { content: '· '; color: var(--green); }
.footer-cols {
  display: grid; gap: var(--space-l); grid-template-columns: repeat(3, 1fr);
  max-width: 74rem; margin: var(--space-xl) auto var(--space-l); padding: 0 var(--gutter);
}
.footer-cols h2 { font-size: var(--step-0); margin-bottom: var(--space-s); color: var(--yellow); }
.footer-cols a { color: var(--white); }
.copyright { text-align: center; font-size: var(--step--1); color: #b9b2a8; padding: 0 var(--gutter); }

@media (max-width: 800px) {
  .story-grid, .gallery-grid, .community-list, .locations-grid, .footer-cols {
    grid-template-columns: 1fr;
  }
  .gallery-grid picture:first-child { grid-column: auto; grid-row: auto; }
  section { padding: var(--space-l) var(--gutter); }
}

.footer-logo { max-width: 18rem; width: 100%; height: auto; margin-bottom: var(--space-s); }

.hours-closed { color: var(--red); font-weight: 700; }