/* ============================================
   ABOUT — "Story + Rope Timeline"
   Manifesto story, a vertical rope-spine timeline,
   mission/vision split, values, certifications.
   ============================================ */

/* ---- Story ---- */
.story { background: var(--paper); padding: var(--space-32) 0; }
.story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-16); align-items: start; }
.story-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.story-lead em { font-style: italic; color: var(--orange); }
.story-body p { font-size: var(--text-lg); color: var(--gray-600); line-height: 1.85; margin-bottom: var(--space-6); }
.story-body p:last-child { margin-bottom: 0; }
.story-sign { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); margin-top: var(--space-6); }
@media (max-width: 820px){ .story-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---- Timeline (rope spine) ---- */
.tl { background: var(--ink); color: #fff; padding: var(--space-32) 0; position: relative; overflow: hidden; }
.tl::before { content:''; position:absolute; top:-10%; left:-8%; width:40vw; height:40vw; background: radial-gradient(circle, rgba(47,87,214,0.16), transparent 65%); }
.tl-head { text-align: center; max-width: 620px; margin: 0 auto var(--space-20); position: relative; z-index: 2; }
.tl-track { position: relative; max-width: 760px; margin: 0 auto; z-index: 2; }
.tl-spine { position: absolute; left: 90px; top: 8px; bottom: 30px; width: 2px; background: linear-gradient(to bottom, var(--orange), rgba(242,106,27,0.15)); transform-origin: top; }
/* scroll-driven draw (progressive enhancement) */
@supports (animation-timeline: view()) {
  .tl-spine { transform: scaleY(0); animation: tlGrow linear both; animation-timeline: view(); animation-range: cover 0% cover 55%; }
  @keyframes tlGrow { to { transform: scaleY(1); } }
}
.tl-year::after { transition: box-shadow var(--duration-slow); }
.tl-item { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: var(--space-8); padding-bottom: var(--space-12); }
.tl-item:last-child { padding-bottom: 0; }
.tl-year { font-family: var(--font-mono); font-size: 0.95rem; color: var(--orange-light); letter-spacing: 0.06em; text-align: right; padding-top: 2px; position: relative; }
.tl-year::after { content:''; position:absolute; right: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(242,106,27,0.2); z-index: 3; }
.tl-body h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); color: #fff; margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.tl-body p { color: rgba(255,255,255,0.6); margin: 0; line-height: 1.7; max-width: 46ch; }
@media (max-width: 560px){
  .tl-item { grid-template-columns: 60px 1fr; gap: var(--space-5); }
  .tl-spine { left: 60px; }
  .tl-year { font-size: 0.8rem; }
  .tl-year::after { right: -19px; width: 10px; height: 10px; }
}

/* ---- Mission / Vision ---- */
.mv { background: var(--paper); padding: var(--space-32) 0; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.mv-card { border: 1px solid var(--gray-200); border-radius: 8px; padding: var(--space-10); background: #fff; position: relative; overflow: hidden; }
.mv-card::before { content:''; position:absolute; top:0; left:0; right:0; height: 3px; background: var(--grad-orange); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) var(--ease-out); }
.mv-card:hover::before { transform: scaleX(1); }
.mv-k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-dark); }
.mv-card h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); color: var(--navy); margin: var(--space-3) 0 var(--space-4); letter-spacing: -0.01em; }
.mv-card p { color: var(--gray-600); font-size: var(--text-lg); line-height: 1.75; margin: 0; }
@media (max-width: 760px){ .mv-grid { grid-template-columns: 1fr; } }

/* ---- Values ---- */
.vals { background: var(--navy); color: #fff; padding: var(--space-32) 0; }
.vals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--space-12); }
.val { padding: var(--space-8) var(--space-6); border-left: 1px solid rgba(255,255,255,0.1); }
.val:first-child { border-left: 0; }
.val-k { font-family: var(--font-mono); font-size: 0.66rem; color: var(--orange); letter-spacing: 0.14em; }
.val h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); color:#fff; margin: var(--space-3) 0 var(--space-2); }
.val p { font-size: var(--text-sm); color: rgba(255,255,255,0.6); margin: 0; line-height: 1.6; }
@media (max-width: 820px){ .vals-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8) 0; } .val:nth-child(3){ border-left:0; } }
@media (max-width: 460px){ .vals-grid { grid-template-columns: 1fr; } .val { border-left:0; border-top:1px solid rgba(255,255,255,0.1); } .val:first-child{ border-top:0; } }

/* ---- Certifications ---- */
.certs { background: var(--paper); padding: var(--space-32) 0; }
.certs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.cert { border: 1px solid var(--gray-200); border-radius: 8px; padding: var(--space-8); background: #fff; transition: border-color var(--duration-base), transform var(--duration-base), box-shadow var(--duration-base); }
.cert:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.cert-k { font-family: var(--font-mono); font-size: 0.66rem; color: var(--gray-400); letter-spacing: 0.14em; }
.cert h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--navy); margin: var(--space-3) 0 var(--space-2); }
.cert p { font-size: var(--text-sm); color: var(--gray-500); margin: 0; line-height: 1.6; }
@media (max-width: 760px){ .certs-grid { grid-template-columns: 1fr; } }

/* ---- CTA ---- */
.acta { background: var(--grad-hero); color:#fff; padding: var(--space-32) 0; position: relative; overflow:hidden; text-align:center; }
.acta::before { content:''; position:absolute; top:-10%; left:50%; width:2px; height:120%; transform:rotate(19deg); background:linear-gradient(to bottom,transparent,var(--orange),transparent); opacity:.5; }
.acta-inner { position: relative; z-index: 2; max-width: 660px; margin: 0 auto; }
.acta h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem,4vw,3.4rem); color:#fff; letter-spacing:-0.02em; margin-bottom: var(--space-5); }
.acta h2 em { font-style: italic; color: var(--orange-light); font-weight: 400; }
.acta p { color: rgba(255,255,255,0.65); font-size: var(--text-lg); margin-bottom: var(--space-8); }
.acta-actions { display:flex; gap: var(--space-4); justify-content:center; flex-wrap:wrap; }