/* ============================================================
   Our Story — Kona Poké brand page
   Reuses base reset, fonts, header + footer from styles.css.
   ============================================================ */

.story-page { background: var(--cream); color: var(--ink); }
.story-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.story-narrow { max-width: 760px; }

.story-eyebrow {
  display: inline-block; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}

/* ---- hero ---- */
.story-hero {
  padding: clamp(104px, 12vw, 150px) 0 clamp(36px, 5vw, 60px);
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  text-align: center;
}
.story-h1 {
  font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.0; color: var(--ink);
  font-size: clamp(46px, 8vw, 86px); letter-spacing: -0.01em;
}
.story-h1 .em { font-weight: 600; color: var(--accent); }
.story-lead {
  max-width: 740px; margin: 22px auto 0; font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6; color: #45605c;
}

/* ---- inline building photo — floated, copy wraps around it ---- */
.story-inline-photo {
  float: right; width: 44%; max-width: 360px; height: auto;
  margin: 6px 0 16px 30px; border-radius: 16px; box-shadow: 0 22px 50px -28px rgba(0,20,20,0.5);
}
@media (max-width: 600px) {
  .story-inline-photo { float: none; width: 100%; max-width: 100%; margin: 26px 0; }
}

/* ---- narrative body ---- */
.story-body { padding: clamp(16px, 3vw, 40px) 0 clamp(48px, 7vw, 80px); }
.story-body .story-narrow { margin: 0 auto; }
.story-body p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.78; color: #3a524f; }
.story-body p + p { margin-top: 22px; }

/* ---- mission ---- */
.story-mission {
  background: linear-gradient(160deg, #06403F 0%, #074a47 55%, #052e2d 100%);
  color: #fff; padding: clamp(56px, 8vw, 100px) 0;
}
.story-mission .story-narrow { margin: 0 auto; }
.story-mission .story-eyebrow { color: var(--teal-soft); }
.story-mission-statement {
  font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.18; color: #fff;
  font-size: clamp(28px, 3.8vw, 48px); letter-spacing: -0.01em; margin-top: 4px;
}
.story-mission-statement .em { font-weight: 600; color: var(--teal-soft); }
.story-mission-lead { margin-top: 22px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: rgba(255,255,255,0.86); }
.story-strive-head {
  margin-top: 30px; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-soft);
}
.story-checks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.story-checks li {
  position: relative; padding-left: 38px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.45; color: #fff;
}
.story-checks li::before {
  content: '✓'; position: absolute; left: 0; top: 1px;
  width: 25px; height: 25px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #06403F; background: var(--teal-soft);
}

/* ---- closing line ---- */
.story-close { padding: clamp(48px, 7vw, 86px) 0; text-align: center; background: var(--cream); }
.story-close-line {
  font-family: 'Jost', sans-serif; font-weight: 400; font-style: italic;
  font-size: clamp(22px, 3vw, 34px); line-height: 1.35; color: var(--accent);
  max-width: 820px; margin: 0 auto;
}

/* ---- narrative section heading ---- */
.story-body-h2 { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; color: var(--ink); margin-bottom: 16px; }
.story-body-h2 .em { font-weight: 600; color: var(--accent); }

/* ---- visit a location ---- */
.story-visit { padding: clamp(48px, 7vw, 80px) 0; background: var(--cream); text-align: center; }
.story-visit h2 { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(28px, 4vw, 44px); color: var(--ink); }
.story-visit h2 .em { font-weight: 600; color: var(--accent); }
.story-visit-lead { margin: 14px auto 0; max-width: 600px; font-size: clamp(16px, 1.5vw, 19px); color: #45605c; }
.story-visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 920px; margin: 30px auto 0; text-align: left; }
.story-visit-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid rgba(0,131,144,0.14); border-radius: 16px; padding: 20px 22px; text-decoration: none; transition: transform .12s ease, box-shadow .15s ease; }
.story-visit-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(0,72,71,0.5); }
.story-visit-card .city { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 19px; color: var(--accent); }
.story-visit-card .addr { font-size: 13.5px; color: #62786f; }
.story-visit-cater { margin-top: 26px; font-size: 16px; color: #45605c; }
.story-visit-cater a { color: var(--accent); font-weight: 600; text-decoration: none; }
.story-visit-cater a:hover { text-decoration: underline; }