/* ================================================================
   MOD: ABOUT — split media + text layout
   Requires: core.css tokens. No JS dependency.
   HTML needed: <section class="about" id="about">
     <div class="container"><div class="about-inner">
       <div class="about-media reveal">
         <div class="about-mark-card"><img src="..." alt="..." /></div>
         <div class="about-badge">Est. [year]</div>
       </div>
       <div class="about-content reveal">
         ...eyebrow, section-heading, accent-bar, .about-body paragraphs...
         <div class="about-stats">
           <div class="stat"><div class="stat-number">...</div><div class="stat-label">...</div></div>
         </div>
       </div>
     </div></div>
   </section>

   NOTE: .about-mark-card is a stand-in for a real photo (brand mark
   floating on a gradient card). Swap its contents for a real <img>
   once site photography exists — no CSS change needed either way.
================================================================ */

.about { background: var(--color-bg); padding: var(--section-pad); scroll-margin-top: 32px; }
.about-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }

.about-body { font-size: 0.95rem; color: rgba(var(--fg-rgb), 0.68); line-height: 1.85; margin-bottom: 20px; }

.about-stats { display: flex; gap: 32px; margin-top: 36px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-number { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: var(--accent1); line-height: 1; }
.stat-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--fg-rgb), 0.5); }

.about-media { position: relative; width: 100%; aspect-ratio: 5 / 4; max-height: 420px; display: flex; align-items: center; justify-content: center; }
.about-mark-card {
  width: 100%; height: 100%; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--accent1-deep) 0%, var(--accent1) 25%, var(--accent2) 95%, var(--accent2-soft) 120%);
  box-shadow: var(--shadow-hover);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.about-mark-card img { width: clamp(140px, 100%, 420px); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25)); }
.about-mark-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.18), transparent 55%);
}
.about-badge {
  position: absolute; bottom: 24px; left: 24px; background: var(--paper); color: var(--accent1);
  border-radius: var(--radius-sm); padding: 10px 18px; font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: var(--shadow-sm); z-index: 2;
}

[data-theme="dark"] .about-badge { background: var(--color-card); color: var(--accent1); }