/* Aaro Mind — reading-page stylesheet (/learn/, /faq/, /privacy/, /accessibility/)
   Homepage keeps its own inline styles; this is only the reading layer. */

:root{
  --paper:#F7F3EC;
  --ink:#211E1A;
  --accent:#D9744B;
  --accent-strong:#C0623C;
  --accent-soft:rgba(217,116,75,.14);
  --measure:46rem;
  /* body links must clear WCAG AA 4.5:1 on cream; terracotta itself does not,
     so text links use a darkened terracotta (5.1:1). */
  --link:#A54E2A;
  --muted:#6F675C;   /* 5.0:1 */
  --meta:#615A50;    /* 6.2:1 */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:1.125rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.25rem}

/* ---- skip link ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:20;text-decoration:none}
.skip:focus{left:0}

/* ---- header ---- */
.site-header{border-bottom:1px solid rgba(33,30,26,.10)}
.site-header .wrap{max-width:46rem;display:flex;align-items:center;justify-content:space-between;
  padding-top:1.1rem;padding-bottom:1.1rem;position:relative}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand span{font-family:'Instrument Serif',Georgia,serif;font-size:1.4rem;line-height:1}
.brand-logo{height:26px;width:auto;display:block}
.site-header nav a{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;margin-left:1.4rem}
.site-header nav a:hover{color:var(--link)}

/* ---- mobile hamburger menu (CSS-only, no JS) ---- */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.nav-btn{display:none;cursor:pointer;color:var(--ink);padding:6px;margin:-6px;line-height:0;align-items:center}
.nav-btn .nav-icon-close{display:none}
.nav-toggle:focus-visible ~ .nav-btn{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
@media (max-width:720px){
  .nav-btn{display:inline-flex}
  .site-header nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid rgba(33,30,26,.10);box-shadow:0 22px 44px -30px rgba(33,30,26,.4);
    display:flex;flex-direction:column;max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .3s ease;z-index:30}
  .site-header nav a{margin-left:0;padding:15px 1.25rem;font-size:.95rem;
    border-top:1px solid rgba(33,30,26,.07)}
  .nav-toggle:checked ~ nav{max-height:70vh;opacity:1;pointer-events:auto}
  .nav-toggle:checked ~ .nav-btn .nav-icon-open{display:none}
  .nav-toggle:checked ~ .nav-btn .nav-icon-close{display:inline}
}

/* ---- reading body ---- */
main{padding:clamp(2.6rem,7vh,5rem) 0 clamp(3.5rem,9vh,6rem)}
h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;letter-spacing:-.015em;margin:0 0 1rem}
h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,3.5vw,2.2rem);line-height:1.14;margin:3.5rem 0 1rem}
h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.4rem;line-height:1.2;margin:2rem 0 .4rem}
p{margin:0 0 1.3rem;text-wrap:pretty}
strong{font-weight:600}
a{color:var(--link);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.06em}
a:hover{color:var(--accent-strong)}

.meta{font-family:'JetBrains Mono',monospace;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--meta);margin:0 0 2.4rem}

/* extractable lead paragraph on /learn/ pages */
.answer{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.4rem;line-height:1.45;letter-spacing:-.005em;color:var(--ink);margin:0 0 1.6rem}

ol,ul{margin:0 0 1.3rem;padding-left:1.35rem}
li{margin:0 0 .7rem}
li::marker{color:var(--meta)}

/* bottom FAQ block */
.faq{margin-top:1rem}
.faq h3{margin:1.8rem 0 .3rem}
.faq p{margin:0 0 1rem;color:var(--ink)}

/* closing CTA */
.cta{font-style:italic;color:var(--ink);border-top:1px solid rgba(33,30,26,.14);
  margin-top:3.5rem;padding-top:1.6rem}
.cta a{font-style:italic}

/* ---- footer ---- */
.site-footer{border-top:1px solid rgba(33,30,26,.12);
  padding:clamp(3rem,7vh,5rem) 0 2.6rem;margin-top:clamp(3rem,8vh,6rem)}
.site-footer .wrap{max-width:1100px;padding:0 clamp(20px,5vw,64px)}
.foot-top{display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:space-between}
.foot-brand{max-width:22rem}
.foot-brand .brand span{font-size:1.5rem}
.foot-tag{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.02em;
  color:var(--meta);margin-top:.8rem;line-height:1.6}
.foot-cols{display:flex;flex-wrap:wrap;gap:2.4rem}
.foot-col h2{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin:0 0 .8rem}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0 0 .55rem}
.foot-col a{font-size:.92rem;color:var(--ink);text-decoration:none;line-height:1.4}
.foot-col a:hover{color:var(--link);text-decoration:underline}
.foot-legal{margin-top:clamp(2.2rem,5vh,3.4rem);font-family:'JetBrains Mono',monospace;
  font-size:.72rem;letter-spacing:.02em;color:var(--meta);line-height:1.7}
.foot-legal div{max-width:80ch}
.site-footer .brand-logo{height:auto}

:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:2px}

@media (max-width:640px){
  .foot-cols{gap:1.8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}