/* Shared palette, taken from Sophia's watercolor hero. Each idea adds its own layout. */
:root{
  /* Sampled from the hero image itself (Oct 18), so the page and the painting are the same paper */
  --cream:#FCF6EA; --paper:#FEFBF4; --ink:#374331; --ink-soft:#5E6652;
  --sun:#ECBA6C; --sage:#B4B59A; --sage-deep:#9EA184; --sage-pale:#E7E7DA; --mist:#C8CEC1; --mist-pale:#E8EBE2;
  --clay:#ECB696; --clay-deep:#E2A380; --clay-pale:#F7E2D2; --leaf:#667054;
  --display:"Cormorant Garamond",Georgia,serif; --body:"Karla",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 17px/1.7 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h2,.display{font-family:var(--display);font-weight:500;letter-spacing:.005em;line-height:1.15}
.btn{display:inline-block;font:500 15px/1 var(--body);letter-spacing:.04em;text-decoration:none;padding:15px 24px;border-radius:999px;background:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.idea-tag{position:fixed;left:12px;bottom:12px;z-index:50;font:500 12px/1 var(--body);letter-spacing:.06em;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:999px;text-decoration:none;opacity:.85}
a[href^="mailto"]{overflow-wrap:anywhere}
.ph{color:#8E9282;font-style:italic}
.practice{font-size:15px;color:var(--ink-soft);margin-bottom:12px}
.practice a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sage)}
.about-line{max-width:46ch}
/* Focus in three groups; each group carries one of the hero's colors, so the color tells you which kind of list you're reading */
.focus3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;text-align:left}
.fg{--g:var(--sage-deep);--gp:var(--sage-pale)}
.fg-drawn{--g:#A3AE9B;--gp:var(--mist-pale)}
.fg-brings{--g:var(--clay-deep);--gp:var(--clay-pale)}
.fg h3{font:500 13px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.fg h3:before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--g)}
.fg ul{list-style:none}
.fg li{font-family:var(--display);font-size:22px;font-weight:500;line-height:1.3}
.fg li+li{margin-top:8px}
.fg li.ph{font-family:var(--body);font-size:14px;font-weight:400}
/* pills: groups stacked, each group's pills in its own pale color */
.focus3.chips{grid-template-columns:1fr;gap:28px}
.focus3.chips ul{display:flex;flex-wrap:wrap;gap:10px}
.focus3.chips li{font:400 15px/1.3 var(--body);background:var(--gp);padding:8px 16px;border-radius:999px;margin:0}
.focus3.chips li.ph{background:none;padding-left:4px}
/* cards: each group on paper, for colored backgrounds */
.focus3.cards .fg{background:var(--paper);border-radius:14px;padding:22px 22px 24px}
@media (max-width:760px){.focus3{grid-template-columns:1fr;gap:28px}}
/* Her portrait echoes the hero: an arched top like the rising sun, and a soft hill line along the bottom */
.photo-arch{border-radius:999px 999px 0 0;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(88% + 1px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V5 C 86 11, 70 13, 54 8 C 40 4, 22 13, 0 9 Z'/%3E%3C/svg%3E") bottom/100% 12% no-repeat;
  mask:linear-gradient(#000,#000) top/100% calc(88% + 1px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V5 C 86 11, 70 13, 54 8 C 40 4, 22 13, 0 9 Z'/%3E%3C/svg%3E") bottom/100% 12% no-repeat}
footer .crisis{margin-bottom:6px}
