/* ══════════════════════════════════════════════════════════════════════════
   COZY — about page (about.html)                      created 2026-09-13
   ─────────────────────────────────────────────────────────────────────────
   Deliberately small. about.html loads cozy-home.css first and takes the nav,
   the section system (.section-inner/-label/-title/-sub), the founder card
   (.dev-*), the CTA band and the footer from it unchanged — this file only
   adds what the homepage has no use for. If a rule here would be useful on
   the homepage too, it belongs in cozy-home.css instead, not in both.

   Its own file rather than more lines in cozy-home.css for one reason: every
   homepage visitor would otherwise download about-only rules. A new file also
   self-busts the CDN cache (CLAUDE.md: new filename = a URL nothing has
   cached), so it ships without a ?v= on its first deploy.
   ══════════════════════════════════════════════════════════════════════════ */

/* Section hues. Craft rule 9 — no two ADJACENT sections may share one, so the
   caption underlines thread a colour down the page instead of striping it.
   Reading order: clay · ochre · teal · moss · sky · olive · teal · clay — eight sections
   from six hues, so two repeat, but never next to themselves. */
#who{ --cz-hue:var(--cz-clay); }
#why{ --cz-hue:var(--cz-ochre); }
#what{ --cz-hue:var(--cz-teal); }
#how{ --cz-hue:var(--cz-moss); }
#money{ --cz-hue:var(--cz-sky); }
#future{ --cz-hue:var(--cz-olive); }
#safe{ --cz-hue:var(--cz-teal); }
#contact{ --cz-hue:var(--cz-clay); }

/* 66ch, not the section default's 64 — this page is the one surface on the
   site that asks to be READ rather than scanned, so its measure is set for
   paragraphs rather than for one-line captions. */
.ab-p{
  font-size:var(--cz-t-md); color:var(--cz-muted);
  line-height:var(--cz-lh); max-width:66ch;
}

.ab-list{ display:flex; flex-direction:column; gap:var(--cz-s2); list-style:none; }
.ab-list li{
  display:flex; align-items:flex-start; gap:var(--cz-s2);
  font-size:var(--cz-t-md); color:var(--cz-ink); line-height:var(--cz-lh); max-width:64ch;
}
/* flex:none so a long line cannot squeeze the tick out of shape — a flex item
   defaults to min-width:auto and this one has nothing to shrink to */
.ab-tick{
  flex:none; width:24px; height:24px; margin-top:1px;
  display:grid; place-items:center; border-radius:8px;
  background:var(--cz-hue, var(--cz-teal)); color:var(--cz-on-fill);
}
.ab-tick svg{ width:15px; height:15px; }

.ab-link{
  align-self:flex-start;
  font-size:var(--cz-t-sm); font-weight:800; color:var(--cz-hue, var(--cz-teal));
}
.ab-btn{ align-self:flex-start; text-decoration:none; }

/* The two-column split IS the argument of #how: automatic on one side, me on
   the other, so neither can be read as the other (Registry pattern 31). Both
   columns are the same shape on purpose — this is not a comparison where one
   side wins, it is a division of labour. */
.ab-split{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--cz-s3);
}
.ab-col{
  display:flex; flex-direction:column; gap:var(--cz-s2);
  padding:var(--cz-s4);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-top:4px solid var(--cz-col-hue, var(--cz-moss));
  border-radius:var(--cz-r); box-shadow:var(--cz-e1);
}
/* A LOCAL variable per column, not the app's .h-teal/.h-moss helpers: those
   are scoped to #view-dashboard/#view-shop in the app CSS and are inert on
   marketing pages — the homepage's #anyone cards are still quietly rendering
   one hue for that exact reason. */
.ab-col--auto{ --cz-col-hue:var(--cz-moss); }
.ab-col--me{ --cz-col-hue:var(--cz-clay); }
.ab-col h3{
  display:flex; align-items:center; gap:var(--cz-s2);
  font-size:var(--cz-t-lg); font-weight:800; color:var(--cz-ink);
  line-height:var(--cz-lh-tight);
}
.ab-col-ico{
  flex:none; width:30px; height:30px; display:grid; place-items:center;
  border-radius:9px; border:1px solid var(--cz-line);
  background:var(--cz-col-hue, var(--cz-moss)); color:var(--cz-on-fill);
}
.ab-col-ico svg{ width:17px; height:17px; }
.ab-col ul{ display:flex; flex-direction:column; gap:var(--cz-s1); list-style:none; }
.ab-col li{
  position:relative; padding-left:var(--cz-s3);
  font-size:var(--cz-t-sm); color:var(--cz-muted); line-height:var(--cz-lh);
}
/* A real bullet, not a list-style marker, so its colour follows the column's
   hue. Kept to a token — Registry pattern 23 is a pseudo-element carrying a
   hard-coded theme colour, which no audit sweep can see. */
.ab-col li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--cz-col-hue, var(--cz-moss));
}

/* h1 on this page is the section title, and .section-title's 2xl is tuned for
   an h2 further down a long page. The page's opening line can carry more. */
#who .section-title{ font-size:var(--cz-t-3xl); }
@media (max-width:640px){
  #who .section-title{ font-size:var(--cz-t-2xl); }
}

/* The studying disclosure and the publishing pledge are the two lines on this
   page a wary reader weighs hardest, so both get a left rail that marks them
   as the author speaking rather than the page describing. Same device, two
   hues, and NOT a warning box: a bordered panel would frame honesty as a
   caveat, which is the apology register pattern 31 warns about. */
.ab-note, .ab-pledge{
  padding-left:var(--cz-s3);
  border-left:4px solid var(--cz-hue, var(--cz-clay));
  color:var(--cz-ink);
}
.ab-h3{
  margin-top:var(--cz-s2);
  font-size:var(--cz-t-lg); font-weight:800; color:var(--cz-ink);
  line-height:var(--cz-lh-tight);
}