/* Honest Junk — Our Story page.
   Loaded after hj-home.css (tokens, buttons, nav, footer) and hj-cheese-barks.css
   (breadcrumb and claims strip). */

/* ── Hero ────────────────────────────────────────────────── */
.story-hero { background: var(--paper-warm); padding: var(--sp9) 0 var(--sp8); }
.story-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp8); align-items: center; }
.story-hero__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.94; color: var(--ink); font-size: clamp(38px, 5.4vw, 68px); margin-bottom: var(--sp5); }
.story-hero__title .accent { color: var(--rose); }
.story-hero__body { font-family: var(--font-body); font-size: 18px; color: var(--ink-soft); line-height: 1.75; max-width: 480px; }
.story-hero__figure { margin: 0; }
.story-hero__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sticker-lg); border: 1.5px solid var(--cloud); }
.story-hero__photo img { width: 100%; height: auto; display: block; }
.story-hero__caption { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.03em; margin-top: var(--sp3); text-align: right; }

/* ── The thread (timeline) ───────────────────────────────── */
.thread { background: var(--paper); padding: var(--sp7) 0; border-bottom: 1px solid var(--cloud); }
.thread__inner { display: flex; align-items: flex-start; position: relative; list-style: none; gap: var(--sp5); }
.thread__inner::before { content: ''; position: absolute; top: 7px; left: var(--pad-x); right: var(--pad-x); height: 2px; background: var(--cloud); }
.thread__point { flex: 1; position: relative; padding-left: var(--sp5); }
.thread__point::before { content: ''; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--rose); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--rose); }
.thread__year { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; color: var(--rose); margin-bottom: 4px; }
.thread__label { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); line-height: 1.5; max-width: 260px; }

/* ── Origin ──────────────────────────────────────────────── */
.origin { max-width: 780px; }
.origin p { font-family: var(--font-body); font-size: 19px; line-height: 1.8; color: var(--ink-soft); margin-bottom: var(--sp5); }
.origin p:first-child { font-size: 22px; color: var(--ink); }

.quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp5); margin-top: var(--sp7); }
.quote-card { margin: 0; border-radius: var(--r-lg); border: 1.5px solid var(--ink); padding: var(--sp6) var(--sp5); box-shadow: var(--shadow-sticker); display: flex; flex-direction: column; }
.quote-card--tina { background: var(--mint); }
.quote-card--celine { background: var(--blush); }
.quote-card__text { margin: 0 0 var(--sp5); font-family: var(--font-mono); font-style: italic; font-size: 15px; line-height: 1.75; color: var(--ink); flex: 1; }
.quote-card__by { display: flex; align-items: center; gap: var(--sp3); border-top: 1.5px solid rgba(26,26,26,0.15); padding-top: var(--sp4); }
.quote-card__av { width: 38px; height: 38px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--ink); flex-shrink: 0; }
.quote-card__name { font-family: var(--font-display); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); }
.quote-card__role { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

/* ── Belief band ─────────────────────────────────────────── */
.belief-band { background: var(--rose); padding: var(--sp9) 0; text-align: center; }
.belief-band__text { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.08; color: var(--paper); font-size: clamp(26px, 3.6vw, 44px); max-width: 900px; margin: 0 auto; }

/* ── How we decide ───────────────────────────────────────── */
.decisions-body { font-family: var(--font-body); font-size: 18px; line-height: 1.8; color: var(--ink-soft); max-width: 820px; margin-bottom: var(--sp7); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp5); }
.proof-card { background: var(--paper); border: 1.5px solid var(--cloud); border-radius: var(--r-lg); padding: var(--sp5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.proof-card__label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose); margin-bottom: var(--sp3); }
.proof-card__title { font-family: var(--font-display); font-size: 19px; font-weight: 900; text-transform: uppercase; color: var(--ink); margin-bottom: var(--sp2); line-height: 1.05; }
.proof-card__desc { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); line-height: 1.6; flex: 1; }
.proof-card__link { align-self: flex-start; margin-top: var(--sp4); font-family: var(--font-display); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 1px; display: inline-flex; gap: 4px; transition: gap .15s; }
.proof-card__link::after { content: '→'; }
.proof-card__link:hover { gap: 8px; }

/* ── Proudly Filipino ────────────────────────────────────── */
.story-flavours { background: var(--paper-warm); padding-bottom: var(--sp6); }
.story-flavours__body { font-family: var(--font-body); font-size: 16px; color: var(--ink-soft); max-width: 600px; line-height: 1.65; }
.story-claims .claims-strip__inner { height: 60px; }
.story-claims .claims-strip__item { font-size: 12px; color: rgba(255,255,255,0.8); }
.story-claims .claims-strip__item .dot { background: var(--rose); }

/* ── Who this is for ─────────────────────────────────────── */
.section--ink .section__title { color: var(--paper); }
.eyebrow-label--white { color: rgba(255,255,255,0.75); }
.eyebrow-label--white::before { background: rgba(255,255,255,0.5); }
.for-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp4); margin-top: var(--sp7); }
.for-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-lg); padding: var(--sp5) var(--sp4); }
.for-card__title { font-family: var(--font-display); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--paper); margin-bottom: var(--sp3); }
.for-card__desc { font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,0.68); line-height: 1.6; }

/* ── Closing ─────────────────────────────────────────────── */
.closing { background: var(--paper); padding: var(--sp10) 0; text-align: center; }
.closing__tagline { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; color: var(--ink); font-size: clamp(40px, 6vw, 88px); margin-bottom: var(--sp6); }
.closing__body { font-family: var(--font-body); font-size: 18px; color: var(--ink-soft); line-height: 1.75; max-width: 640px; margin: 0 auto var(--sp7); }
.closing__btns { display: flex; gap: var(--sp3); justify-content: center; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  .story-hero__inner { grid-template-columns: 1fr; }
  .story-hero__figure { max-width: 420px; margin: 0 auto; width: 100%; }
  .quote-pair { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .for-grid { grid-template-columns: 1fr 1fr; }
  .thread__inner { flex-direction: column; gap: var(--sp5); }
  .thread__inner::before { display: none; }
  .thread__label { max-width: none; }
}
@media (max-width: 640px) {
  .story-hero { padding-top: var(--sp7); }
  .origin p { font-size: 17px; }
  .origin p:first-child { font-size: 19px; }
  .decisions-body { font-size: 16px; }
  .proof-grid { grid-template-columns: 1fr; }
  .for-grid { grid-template-columns: 1fr; }
  .closing__btns { flex-direction: column; align-items: stretch; }
  .closing__btns .btn { justify-content: center; }
}