/* About (/about.html): what the name means, why Kasane exists, the founder story and what we believe.
   Built on v3.css and kasane.css; only the layouts this page adds live here. Static: no motion script. */
.eyebrow{font:500 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* The name: 重ね beside what it means. */
.about-hero{padding-block:clamp(40px,6vw,96px) clamp(80px,10vw,150px)}
.about-hero-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,7vw,120px);align-items:center}
.kanji{font-size:clamp(132px,19vw,288px);font-weight:300;line-height:1;letter-spacing:.02em;color:var(--k-cobalt)}
.about-hero h1{margin-top:18px;max-width:11ch}
.about-hero .lede{margin-top:28px;max-width:40ch}

/* Why Kasane exists: one marigold moment, like the homepage's "Find what helps". */
.about-why{padding-block:var(--section);background:var(--k-marigold);color:var(--night)}
.about-why .eyebrow{color:var(--night)}
.about-why .statement{margin-top:24px;max-width:22ch}
.about-why-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);margin-top:clamp(40px,5vw,72px);max-width:1040px}
.about-why-cols p{margin:0;font-size:18px;line-height:1.6;color:var(--ink)}

/* The founder story: the photo holds its place while the letter scrolls. */
.about-story{padding-block:var(--section)}
.about-story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:start}
.about-photo{position:sticky;top:32px;margin:0}
.about-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28px}
.about-photo figcaption{margin-top:14px;font-size:15px;color:var(--muted)}
.about-letter .h2{margin-top:20px;max-width:16ch}
.about-letter .letter{margin-top:clamp(32px,4vw,48px);max-width:62ch}
.about-letter .letter p{font-size:18px;line-height:1.65}
.about-letter .letter p+p{margin-top:20px}
.about-letter .sig{margin-top:32px;font-size:18px;font-weight:500;line-height:1.4}
.about-letter .sig span{display:block;font-weight:400;font-size:15px;color:var(--muted)}

/* What we believe: the sand grid. */
.about-beliefs .lede{margin-top:24px;max-width:none}
.about-beliefs .testing-grid{row-gap:clamp(40px,5vw,64px)}
.belief-emoji{display:block;margin-bottom:14px;font-size:28px;line-height:1}

/* Layer by layer, then the download. */
.about-close{padding-block:var(--section)}
.about-close .copy{max-width:58ch}
.about-close .copy p{margin-top:24px;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--on-dark)}
.about-close .store-badge{margin-top:44px}

@media (max-width:760px){
  .about-hero-grid,.about-story-grid,.about-why-cols{grid-template-columns:1fr}
  .about-hero-grid{gap:8px}
  .kanji{font-size:clamp(112px,34vw,160px)}
  .about-photo{position:static;max-width:320px}
}