/* ============================================================
   About This Project + So I Have Questions
   Shared stylesheet — editorial, policy, Q&A layouts.
   ============================================================ */

/* ── Page head (shared) ──────────────────────────────────── */
.about-head{
  background:var(--ink); color:var(--on-dark);
  padding-top:calc(74px + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);
  position:relative;
}
.about-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--moss), transparent 55%);
}
.about-head h1{ font-size:var(--step-4); margin:0 0 .8rem; max-width:20ch; }
.about-head p{
  font-size:var(--step-0); color:var(--on-dark-mute);
  max-width:52ch; margin:0; line-height:1.7;
}

/* ── In-page nav (About project) ────────────────────────── */
.about-nav{
  position:sticky; top:74px; z-index:90;
  background:var(--paper);
  border-bottom:1px solid var(--line-light);
  overflow-x:auto; scrollbar-width:none;
}
.about-nav::-webkit-scrollbar{ display:none; }
.about-nav__inner{
  display:flex; align-items:center;
  padding:0 var(--gutter); min-width:max-content;
}
.about-nav__link{
  display:inline-flex; align-items:center;
  padding:.85rem 1.1rem;
  font-family:var(--ui); font-size:.78rem; font-weight:600;
  color:var(--on-light-mute); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .22s var(--ease-out), border-color .22s var(--ease-out);
}
.about-nav__link:hover,.about-nav__link:focus-visible{
  color:var(--on-light); outline:none;
}
.about-nav__link.is-active{ color:var(--moss); border-bottom-color:var(--moss); }

/* ── Body ────────────────────────────────────────────────── */
.about-body{ padding-block:clamp(3rem,6vw,5rem); }

.about-section{
  max-width:min(820px,100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--line-light);
  scroll-margin-top:calc(74px + 52px + 1rem);
}
.about-section:last-child{ border-bottom:none; }
.about-section .channel{ margin-bottom:1.1rem; }
.about-section h2{ font-size:var(--step-3); margin:0 0 1.2rem; max-width:22ch; }
.about-section h3{ font-size:var(--step-1); margin:1.75rem 0 .5rem; }
.about-section h3:first-of-type{ margin-top:0; }
.about-section p{
  font-size:var(--step-0); line-height:1.75;
  color:var(--on-light); margin-bottom:1rem;
}
.about-section p:last-child{ margin-bottom:0; }
.about-section a{ color:var(--moss); text-underline-offset:3px; }
.about-section a:hover{ color:var(--moss-deep); }

/* Pull quote */
.about-pull{
  border-left:3px solid var(--moss);
  margin:1.75rem 0; padding:.75rem 0 .75rem 1.5rem;
}
.about-pull p{
  font-family:var(--display); font-size:var(--step-2);
  font-weight:600; letter-spacing:-0.025em;
  line-height:1.2; color:var(--on-light); margin:0;
}

/* Policy box — used for integrity, privacy, AI */
.policy-box{
  border:1px solid var(--line-light); border-radius:16px;
  overflow:hidden; margin:1.5rem 0;
}
.policy-box__head{
  background:var(--ink); color:var(--on-dark);
  padding:.75rem 1.15rem;
  font-family:var(--ui); font-size:.72rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
  display:flex; align-items:center; gap:.6rem;
}
.policy-box__head::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--moss-lt); flex:0 0 7px;
}
.policy-box__body{ padding:1.1rem 1.15rem; background:var(--paper-2); }
.policy-box__body p{
  font-size:var(--step--1); line-height:1.7; margin-bottom:.85rem;
}
.policy-box__body p:last-child{ margin-bottom:0; }
.policy-box__body ul{
  list-style:none; margin:.75rem 0; padding:0; display:grid; gap:.4rem;
}
.policy-box__body ul li{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:var(--step--1); line-height:1.6; color:var(--on-light-mute);
}
.policy-box__body ul li::before{
  content:''; flex:0 0 6px; width:6px; height:6px;
  border-radius:50%; background:var(--moss); margin-top:.5rem;
}

/* Principle list */
.principles-list{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.6rem; }
.principles-list li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(.75rem,3vw,2.5rem);
  padding:1rem 0; border-top:1px solid var(--line-light);
}
@media (max-width:620px){
  .principles-list li{ grid-template-columns:1fr; gap:.3rem; }
}
.principles-list li:last-child{ border-bottom:1px solid var(--line-light); }
.principles-list dt{
  font-family:var(--display); font-size:var(--step-1);
  font-weight:700; letter-spacing:-0.02em; color:var(--on-light); line-height:1.1;
}
.principles-list dd{
  margin:0; font-size:var(--step--1);
  color:var(--on-light-mute); line-height:1.65;
}

/* Link cards */
.about-links{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.85rem; margin-top:1.5rem;
}
.about-link{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.1rem 1.15rem; border-radius:14px;
  border:1px solid var(--line-light);
  text-decoration:none; color:inherit;
  background:var(--paper-2);
  transition:border-color .28s var(--ease-out), transform .25s var(--ease-out),
             background-color .28s var(--ease-out);
}
.about-link:hover,.about-link:focus-visible{
  border-color:var(--moss); transform:translateY(-3px);
  background:var(--paper); outline:none;
}
.about-link__label{
  font-family:var(--ui); font-size:.68rem; font-weight:700;
  letter-spacing:0.05em; color:var(--moss); text-transform:uppercase;
}
.about-link h3{ font-size:var(--step-0); margin:0; }
.about-link p{ font-size:.82rem; color:var(--on-light-mute); margin:0; line-height:1.5; }

/* ── Q&A layout ──────────────────────────────────────────── */
.qa-group{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.qa-group h2{
  font-size:var(--step-2); margin:0 0 1rem;
  padding-bottom:.65rem; border-bottom:1px solid var(--line-light);
}
.qa-item{
  padding:1.25rem 0; border-bottom:1px solid var(--line-light);
}
.qa-item:last-child{ border-bottom:none; }
.qa-q{
  font-family:var(--display); font-size:var(--step-1);
  font-weight:700; letter-spacing:-0.02em;
  color:var(--on-light); margin:0 0 .6rem; line-height:1.15;
  cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.qa-q__icon{
  flex:0 0 22px; width:22px; height:22px; border-radius:50%;
  background:var(--paper-2); border:1px solid var(--line-light);
  display:grid; place-items:center;
  font-family:var(--ui); font-size:.75rem; font-weight:700;
  color:var(--on-light-mute); margin-top:.1rem;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out),
             transform .3s var(--ease-out);
  flex-shrink:0;
}
.qa-item.is-open .qa-q__icon{
  background:var(--moss); color:#F3FBF7; border-color:var(--moss);
  transform:rotate(45deg);
}
.qa-a{
  display:none; padding-top:.35rem;
}
.qa-item.is-open .qa-a{ display:block; }
.qa-a p{
  font-size:var(--step--1); line-height:1.75;
  color:var(--on-light-mute); margin-bottom:.8rem;
}
.qa-a p:last-child{ margin-bottom:0; }
.qa-a a{ color:var(--moss); text-underline-offset:3px; }
.qa-a a:hover{ color:var(--moss-deep); }