/* ============================================================================
   Patterns of Everyday Care — design system
   Tokens, shell, and components. Recreated from the design handoff (high-fi).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --canvas:#E7EAEF; --surface:#FFFFFF; --surface-2:#F4F6F9; --text:#16181F;
  --muted:#5C6573; --faint:#8A93A3; --border:#E2E6EC; --hairline:#EEF1F5;
  --shadow:0 1px 2px rgba(16,18,31,.04), 0 8px 28px rgba(16,18,31,.06);
  --accent:#3B82F6;           /* link/accent — light */
}
[data-theme="dark"] {
  --canvas:#0A0B0E; --surface:#15171D; --surface-2:#1D2027; --text:#F1F3F8;
  --muted:#9BA4B3; --faint:#6C7686; --border:#2A2F39; --hairline:#23262F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.45);
  --accent:#8B5CF6;           /* link/accent — dark */
}

/* Semantic accents that do NOT switch with theme. */
:root { --care:#10B981; --risk:#F43F5E; }

html { background:var(--canvas); }   /* seeded pre-paint to avoid theme flash */
body {
  min-height:100vh;
  background:var(--canvas);
  color:var(--text);
  font-family:'Atkinson Hyperlegible', system-ui, sans-serif;
  line-height:1.6;
  transition:background .35s ease, color .35s ease;
}

::selection { background:#8B5CF6; color:#fff; }
a { color:inherit; }

.display { font-family:'Geologica', system-ui, sans-serif; }

@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
  body { transition:none; }
  .hero-mark { animation:none !important; }
  * { scroll-behavior:auto !important; }
}

html { scroll-behavior:smooth; }

/* ---- layout widths ------------------------------------------------------- */
.wrap        { max-width:1180px; margin:0 auto; padding-left:1.6rem; padding-right:1.6rem; }
.wrap-1040   { max-width:1040px; margin:0 auto; padding-left:1.6rem; padding-right:1.6rem; }
.wrap-880    { max-width:880px;  margin:0 auto; padding-left:1.6rem; padding-right:1.6rem; }
.wrap-760    { max-width:760px;  margin:0 auto; padding-left:1.6rem; padding-right:1.6rem; }

/* ============================================================================
   NAV
   ========================================================================== */
.nav {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.6rem;
  background:color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.nav-logo svg { flex-shrink:0; color:var(--text); }
.nav-logo .lockup { display:flex; flex-direction:column; line-height:1.12; }
.nav-logo .title { font-family:'Geologica'; font-weight:700; font-size:.92rem; letter-spacing:-.01em; }
.nav-logo .sub   { font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); font-weight:700; }

.nav-right { display:flex; align-items:center; gap:.4rem; }
.nav-links { display:flex; align-items:center; gap:.1rem; }
.nav-link {
  padding:.45rem .7rem; border-radius:8px; text-decoration:none;
  font-size:.84rem; font-weight:500; color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.nav-link:hover { background:color-mix(in srgb, var(--text) 5%, transparent); color:var(--text); }
.nav-link[aria-current="page"] {
  font-weight:700; color:var(--text);
  background:color-mix(in srgb, var(--text) 7%, transparent);
}
.nav-ext { display:inline-flex; align-items:center; gap:.35rem; }
.nav-ext .arr { font-size:.82em; opacity:.7; }
.nav-divider { width:1px; height:18px; background:var(--border); margin:0 .3rem; }

.theme-toggle {
  display:flex; align-items:center; gap:.45rem;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:.45rem .7rem; border-radius:999px;
  font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; margin-left:.3rem;
  transition:border-color .15s ease;
}
.theme-toggle:hover { border-color:var(--faint); }
.theme-toggle .dot { width:9px; height:9px; border-radius:50%; background:var(--theme-dot, #F59E0B); }

/* ============================================================================
   SHARED PRIMITIVES
   ========================================================================== */
.eyebrow {
  display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--faint);
}
.pip { display:inline-block; flex-shrink:0; }

.section-head {
  display:flex; align-items:baseline; gap:.8rem;
  margin-bottom:1.8rem; padding-bottom:.9rem; border-bottom:2px solid var(--text);
  flex-wrap:wrap;
}
.section-head .h { font-family:'Geologica'; font-weight:900; font-size:1.6rem; letter-spacing:-.01em; }
.section-head .meta { font-size:.92rem; color:var(--muted); }

.btn-solid {
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  background:var(--text); color:var(--surface);
  padding:.7rem 1.2rem; border-radius:999px; font-weight:700; font-size:.9rem;
}
.btn-outline {
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  padding:.7rem 1.2rem; border-radius:999px; font-weight:700; font-size:.9rem;
  transition:border-color .15s ease;
}
.btn-outline:hover { border-color:var(--faint); }
.btn-text {
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--muted); padding:.7rem .6rem; border-radius:999px; font-weight:700; font-size:.9rem;
  transition:color .15s ease;
}
.btn-text:hover { color:var(--text); }

.inline-link { color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.accent-link { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================================
   HOME — hero
   ========================================================================== */
.hero { padding-top:3.4rem; padding-bottom:1rem; }
.hero-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:2.6rem; align-items:end; }
.hero h1 {
  font-family:'Geologica'; font-weight:900; font-size:clamp(2.3rem,5.2vw,3.9rem);
  line-height:1.02; letter-spacing:-.025em; margin:1.1rem 0 1.2rem;
}
.hero-lead { font-size:1.18rem; color:var(--text); max-width:46ch; margin-bottom:1.3rem; line-height:1.5; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:.7rem; }
.hero-mark-wrap { position:relative; height:230px; display:flex; align-items:center; justify-content:center; }
.hero-mark { opacity:.9; animation:floaty 13s ease-in-out infinite; }

.intro-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1.8rem;
  margin-top:2.4rem; padding-top:2.4rem; border-top:1px solid var(--border);
}
.intro-grid p { font-size:1rem; color:var(--muted); line-height:1.65; }
.intro-grid strong { color:var(--text); }
.intro-grid em { color:var(--text); }

/* ============================================================================
   HOME — how to read
   ========================================================================== */
.section { padding-top:3.6rem; padding-bottom:1rem; }
#how-to-read { scroll-margin-top:80px; }
#browse { scroll-margin-top:72px; }

.htr-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:2.4rem; align-items:start; }
.htr-prose { font-size:1.02rem; color:var(--muted); line-height:1.7; }
.htr-prose p { margin-bottom:1rem; }
.htr-prose p:last-child { margin-bottom:0; }
.htr-prose strong { color:var(--text); font-style:italic; }

.anatomy {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:1.4rem 1.5rem; box-shadow:var(--shadow);
}
.anatomy .label {
  display:block; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--faint); margin-bottom:1rem;
}
.anatomy ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; font-size:.88rem; }
.anatomy .term { color:var(--text); font-family:'Geologica'; font-weight:600; }
.anatomy .gloss { color:var(--muted); }

.keepmind { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.8rem; }
.callout { border-radius:14px; padding:1.3rem 1.4rem; }
.callout .title { display:block; font-family:'Geologica'; font-weight:700; font-size:1rem; margin-bottom:.55rem; }
.callout p { font-size:.92rem; color:var(--muted); line-height:1.6; }
.callout p + p { margin-top:.8rem; }
.callout em { color:var(--text); }
.callout--purple { background:color-mix(in srgb,#8B5CF6 7%, var(--surface)); border:1px solid color-mix(in srgb,#8B5CF6 22%, var(--border)); }
.callout--coral  { background:color-mix(in srgb,#F43F5E 7%, var(--surface)); border:1px solid color-mix(in srgb,#F43F5E 22%, var(--border)); }

/* ============================================================================
   HOME — browse
   ========================================================================== */
.browse-head { margin-bottom:.5rem; }
.browse-panel {
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden;
}
.toolbar { display:flex; flex-direction:column; gap:.95rem; padding:1.1rem 1.2rem; border-bottom:1px solid var(--hairline); }
.toolbar-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.toolbar-group { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.toolbar-label { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--faint); }

.chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .72rem; border-radius:999px;
  font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
  transition:all .15s ease;
  border:1.5px solid var(--fam); background:transparent; color:var(--fam);
}
.chip[aria-pressed="true"] { background:var(--fam); color:#fff; }
.chip .pip { width:11px; height:11px; }

.segmented { display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.segmented button {
  border:none; background:transparent; color:var(--muted);
  padding:.44rem .95rem; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
}
.segmented button[aria-pressed="true"] { background:var(--text); color:var(--surface); }

.concern-select {
  font:inherit; font-size:.82rem; font-weight:600; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
  padding:.4rem .7rem; cursor:pointer; max-width:340px;
}
.link-clear {
  border:none; background:transparent; color:var(--faint);
  font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}

.showtoggle {
  border:1px solid var(--border); background:transparent; color:var(--muted);
  padding:.3rem .62rem; border-radius:7px; font:inherit; font-size:.74rem; font-weight:700; cursor:pointer;
}
.showtoggle[aria-pressed="true"] { border-color:var(--text); background:var(--text); color:var(--surface); }

.cards-grid {
  padding:1.4rem; background:var(--surface-2);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(256px,1fr)); gap:1.2rem;
}

.pcard {
  position:relative; overflow:hidden;
  background:color-mix(in srgb, var(--fam) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--fam) 26%, var(--border));
  border-radius:16px; padding:1.3rem 1.3rem 1.4rem; min-height:220px;
  display:flex; flex-direction:column; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  text-align:left; font:inherit; color:var(--text); width:100%;
}
.pcard:hover { transform:translateY(-8px); box-shadow:0 26px 52px rgba(16,18,31,.18); z-index:5; }
.pcard:focus-visible { outline:2px solid var(--fam); outline-offset:2px; }
.pcard .ghost {
  position:absolute; right:-.3rem; bottom:-2.2rem;
  font-family:'Geologica'; font-weight:900; font-size:5.4rem; line-height:1;
  color:color-mix(in srgb, var(--fam) 13%, transparent);
  pointer-events:none; letter-spacing:-.04em;
}
.pcard .top { position:relative; display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.pcard .fam { display:flex; align-items:center; gap:.55rem; }
.pcard .fam .pip { width:17px; height:17px; }
.pcard .fam .short { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--fam); }
.pcard .handle { font-family:'Geologica'; font-weight:900; font-size:.84rem; color:var(--fam); letter-spacing:.02em; }
.pcard h3 { position:relative; font-family:'Geologica'; font-weight:700; font-size:1.28rem; line-height:1.1; letter-spacing:-.015em; margin-bottom:.5rem; }
.pcard .desc { position:relative; font-size:.86rem; color:var(--muted); line-height:1.5; }
.pcard .field { position:relative; margin-top:.8rem; }
.pcard .field .flabel { display:block; font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:.3rem; }
.pcard .field .flabel.care { color:var(--care); }
.pcard .field .flabel.risk { color:var(--risk); }
.pcard .field .fval { font-size:.82rem; color:var(--text); }
.pcard .field ul { list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.pcard .field li { display:flex; gap:.5rem; font-size:.82rem; color:var(--text); line-height:1.4; }
.pcard .field li .dash { color:var(--fam); flex-shrink:0; }
.pcard .open { position:relative; display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-size:.76rem; font-weight:700; color:var(--fam); }

.list-view { padding:.6rem .5rem; background:var(--surface-2); }
.lrow {
  display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; border-radius:10px;
  cursor:pointer; transition:background .15s ease; width:100%; border:none; background:transparent;
  font:inherit; color:var(--text); text-align:left;
}
.lrow:hover { background:color-mix(in srgb, var(--text) 5%, transparent); }
.lrow:focus-visible { outline:2px solid var(--fam); outline-offset:-2px; }
.lrow .handle { font-family:'Geologica'; font-weight:900; font-size:.8rem; color:var(--fam); width:2.6rem; letter-spacing:.02em; flex-shrink:0; }
.lrow .pip { width:13px; height:13px; }
.lrow .name { font-family:'Geologica'; font-weight:600; font-size:.96rem; flex-shrink:0; min-width:13rem; }
.lrow .desc { font-size:.85rem; color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lrow .short { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--fam); flex-shrink:0; }

.no-results { text-align:center; padding:2.4rem; color:var(--muted); }
.no-results button { border:none; background:transparent; color:var(--text); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

/* ---- citation footer card ----------------------------------------------- */
.cite-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1.4rem 1.6rem; font-size:.86rem; color:var(--muted); line-height:1.7; box-shadow:var(--shadow);
}
.cite-card strong { color:var(--text); }

/* ============================================================================
   PATTERN DETAIL OVERLAY
   ========================================================================== */
.scrim {
  position:fixed; inset:0; z-index:60;
  background:color-mix(in srgb, #0A0B0E 55%, transparent);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:flex; justify-content:center; align-items:flex-start;
  overflow-y:auto; padding:2.4rem 1.4rem;
}
.detail {
  position:relative; width:100%; max-width:1080px;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.45); padding:1.8rem;
  display:grid; grid-template-columns:330px 1fr; gap:2rem; align-items:start;
  animation:fadeUp .25s ease;
}
.detail-close {
  position:absolute; top:1rem; right:1rem; z-index:3;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:1.1rem; line-height:1; cursor:pointer;
  transition:border-color .15s ease;
}
.detail-close:hover { border-color:var(--faint); }

.tcard {
  position:sticky; top:0; aspect-ratio:5/7; border-radius:18px; padding:1.5rem;
  background:linear-gradient(165deg, color-mix(in srgb, var(--fam) 17%, var(--surface)), var(--surface));
  border:2px solid var(--fam);
  box-shadow:0 22px 50px color-mix(in srgb, var(--fam) 28%, transparent);
  display:flex; flex-direction:column; overflow:hidden;
}
.tcard .tc-top { display:flex; align-items:flex-start; justify-content:space-between; }
.tcard .tc-handle { font-family:'Geologica'; font-weight:900; font-size:1.4rem; color:var(--fam); letter-spacing:.02em; }
.tcard .tc-pip { width:22px; height:22px; }
.tcard .tc-body { flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:.5rem 0; }
.tcard .tc-body svg { margin:0 auto 1rem; }
.tcard h2 { font-family:'Geologica'; font-weight:900; font-size:1.55rem; line-height:1.04; letter-spacing:-.02em; margin-bottom:.5rem; }
.tcard .tc-desc { font-size:.8rem; color:var(--muted); padding:0 .3rem; }
.tcard .tc-foot { display:flex; flex-direction:column; gap:.45rem; padding-top:.9rem; border-top:1px solid color-mix(in srgb, var(--fam) 30%, var(--border)); }
.tcard .tc-line { display:flex; align-items:center; gap:.5rem; font-size:.76rem; }
.tcard .tc-line .sym { font-weight:900; }
.tcard .tc-line .tag { font-weight:700; }
.tcard .tc-line .val { color:var(--muted); flex:1; text-align:right; font-size:.72rem; }
.tcard .tc-care .sym, .tcard .tc-care .tag { color:var(--care); }
.tcard .tc-risk .sym, .tcard .tc-risk .tag { color:var(--risk); }
.tcard .tc-meta { display:flex; align-items:center; justify-content:space-between; margin-top:.25rem; }
.tcard .tc-fam { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--fam); }
.tcard .tc-mh { font-family:'Geologica'; font-weight:900; font-size:.74rem; color:var(--faint); }

.notes .kicker { display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:.4rem; }
.notes > h3 { font-family:'Geologica'; font-weight:900; font-size:1.7rem; letter-spacing:-.02em; margin-bottom:1.4rem; }
.notes section { margin-bottom:1.4rem; }
.notes h4 { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--fam); margin-bottom:.6rem; }
.notes h4.neutral { color:var(--faint); }
.notes p { color:var(--text); font-size:.95rem; }

.cult-list { display:flex; flex-direction:column; gap:.5rem; }
.cult { background:var(--surface-2); border-radius:10px; padding:.6rem .85rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem; }
.cult .term { font-style:italic; font-family:'Geologica'; font-weight:600; }
.cult .script { font-size:.92rem; color:var(--text); }
.cult .lang { font-size:.8rem; color:var(--faint); }
.cult .gloss { font-size:.88rem; color:var(--muted); }

.qlist { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.qlist li { display:flex; gap:.7rem; font-size:.93rem; color:var(--text); }
.qlist li .q { color:var(--fam); font-weight:900; }

.impl { background:var(--surface-2); border-radius:10px; padding:.85rem 1rem; }

.care-box {
  background:color-mix(in srgb,#10B981 6%, var(--surface));
  border:1px solid color-mix(in srgb,#10B981 24%, var(--border));
  border-radius:12px; padding:1rem 1.1rem;
}
.care-box .row { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.care-box .row .dot { width:8px; height:8px; border-radius:50%; background:var(--care); }
.care-box .row .lab { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--care); }
.care-box p.statement { margin-bottom:.7rem; }
.care-box p.lens { font-size:.9rem; color:var(--muted); font-style:italic; border-left:2px solid color-mix(in srgb,#10B981 45%,transparent); padding-left:.7rem; }

.risk-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.risk-row .dot { width:8px; height:8px; border-radius:50%; background:var(--risk); }
.risk-row .lab { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--risk); }

.concern-list { display:flex; flex-direction:column; gap:.4rem; }
.concern-btn {
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  font:inherit; font-size:.9rem; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:.6rem .85rem; cursor:pointer; transition:border-color .15s ease, transform .15s ease;
}
.concern-btn:hover { border-color:var(--fam); transform:translateX(3px); }
.concern-btn .dash { color:var(--fam); flex-shrink:0; }
.concern-btn .lab { flex:1; line-height:1.35; }
.concern-btn .go { font-size:.72rem; font-weight:700; color:var(--fam); white-space:nowrap; }

.rel-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.rel {
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--fam);
  border-radius:9px; padding:.6rem .75rem; cursor:pointer; transition:transform .15s ease;
  font:inherit; text-align:left; width:100%;
}
.rel:hover { transform:translateX(3px); }
.rel.tension { border:1px dashed color-mix(in srgb, var(--fam) 55%, var(--border)); }
.rel .pip { width:12px; height:12px; }
.rel .rname { font-family:'Geologica'; font-weight:600; font-size:.85rem; flex:1; line-height:1.15; }
.rel .rhandle { font-family:'Geologica'; font-weight:900; font-size:.66rem; color:var(--fam); }
.tension-caption { font-size:.8rem; color:var(--faint); margin-bottom:.6rem; }

.reading-sec { border-top:1px solid var(--hairline); padding-top:1rem; }
.reading-sec ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.reading-sec li { font-size:.88rem; color:var(--text); }
.reading-sec p { font-size:.88rem; color:var(--muted); }

/* ============================================================================
   USING THE PATTERNS
   ========================================================================== */
.page-head { padding-top:3.4rem; padding-bottom:1rem; }
.page-head h1 { font-family:'Geologica'; font-weight:900; font-size:clamp(2rem,4.4vw,3rem); line-height:1.04; letter-spacing:-.025em; margin:1rem 0 1.1rem; }
.page-head .lead { font-size:1.1rem; color:var(--muted); line-height:1.6; max-width:62ch; }
.page-head .lead strong { color:var(--text); }

.anchor-pills { display:flex; gap:.7rem; margin-top:1.4rem; flex-wrap:wrap; }
.anchor-pill {
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--text);
  padding:.6rem 1.1rem; border-radius:999px; font-weight:700; font-size:.88rem;
}
.anchor-pill.blue  { background:color-mix(in srgb,#3B82F6 12%, var(--surface)); border:1px solid color-mix(in srgb,#3B82F6 35%,var(--border)); }
.anchor-pill.green { background:color-mix(in srgb,#10B981 12%, var(--surface)); border:1px solid color-mix(in srgb,#10B981 35%,var(--border)); }

.work-sec { padding-top:2.6rem; padding-bottom:1rem; scroll-margin-top:72px; }
.work-sec.analytical { padding-top:3rem; }
.work-head { display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem; padding-bottom:.9rem; }
.work-head .h { font-family:'Geologica'; font-weight:900; font-size:1.5rem; letter-spacing:-.01em; }
.work-sec.generative .work-head { border-bottom:2px solid #3B82F6; }
.work-sec.analytical .work-head { border-bottom:2px solid #10B981; }
.work-head .dot-blue { width:14px; height:14px; border-radius:50%; background:#3B82F6; }
.work-head .tri-green { width:14px; height:14px; background:#10B981; clip-path:polygon(50% 2%, 100% 100%, 0 100%); }
.work-intro { font-size:1.04rem; color:var(--muted); line-height:1.7; margin-bottom:1.4rem; }
.work-intro em, .work-intro strong { color:var(--text); }

.example {
  border-radius:14px; padding:1.2rem 1.4rem; margin-bottom:1.8rem;
}
.example .label { display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:.5rem; }
.example p { font-size:.98rem; color:var(--text); line-height:1.6; }
.example em { font-style:italic; }
.example.blue  { background:color-mix(in srgb,#3B82F6 6%, var(--surface)); border:1px solid color-mix(in srgb,#3B82F6 22%,var(--border)); }
.example.blue .label, .example.blue a { color:#3B82F6; }
.example.green { background:color-mix(in srgb,#10B981 6%, var(--surface)); border:1px solid color-mix(in srgb,#10B981 22%,var(--border)); }
.example.green .label, .example.green a { color:#10B981; }
.example a { text-decoration:underline; text-underline-offset:2px; font-weight:700; }

.step { display:grid; grid-template-columns:auto 1fr; gap:1.1rem; margin-bottom:1.5rem; }
.step .num {
  width:30px; height:30px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Geologica'; font-weight:900; font-size:.85rem;
}
.step.blue .num  { background:#3B82F6; }
.step.green .num { background:#10B981; }
.step h3 { font-family:'Geologica'; font-weight:700; font-size:1.12rem; margin-bottom:.4rem; letter-spacing:-.01em; }
.step p { font-size:.98rem; color:var(--muted); line-height:1.65; }
.step em { font-style:italic; }

.howwell {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:1.1rem 1.3rem; box-shadow:var(--shadow);
}
.howwell.blue  { border-left:4px solid #3B82F6; }
.howwell.green { border-left:4px solid #10B981; }
.howwell .label { display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:.45rem; }
.howwell p { font-size:.96rem; color:var(--text); line-height:1.6; }
.howwell em { font-style:italic; }

.footer-cta {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1.4rem 1.6rem; box-shadow:var(--shadow);
}
.footer-cta .t { font-family:'Geologica'; font-weight:700; font-size:1.05rem; }

/* ============================================================================
   MATERIALS
   ========================================================================== */
.materials-note {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-size:.8rem; color:var(--faint);
  background:var(--surface); border:1px dashed var(--border); border-radius:999px; padding:.35rem .8rem;
}
.materials-note .dot { width:8px; height:8px; border-radius:50%; background:#F59E0B; }
.materials-note em { font-style:italic; }

.mat-sec { padding-top:2.4rem; padding-bottom:1rem; }
.mat-sec .mhead { display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.2rem; }
.mat-sec .mhead .h { font-family:'Geologica'; font-weight:900; font-size:1.3rem; letter-spacing:-.01em; }
.res-grid { display:grid; gap:1rem; }
.res-grid.two   { grid-template-columns:1fr 1fr; }
.res-grid.three { grid-template-columns:1fr 1fr 1fr; }

.res-card {
  display:flex; flex-direction:column; gap:.5rem; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1.3rem 1.4rem; box-shadow:var(--shadow); transition:transform .16s ease;
}
.res-card:hover { transform:translateY(-3px); }
.res-card.soon { opacity:.78; }
.res-card .crow { display:flex; align-items:center; justify-content:space-between; }
.res-card .kind { font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--rc, var(--accent)); }
.res-card .status { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--faint); }
.res-card .rtitle { font-family:'Geologica'; font-weight:700; font-size:1.12rem; letter-spacing:-.01em; }
.res-grid.three .res-card .rtitle { font-size:1.05rem; }
.res-card .rdesc { font-size:.9rem; color:var(--muted); line-height:1.5; }
.res-grid.three .res-card .rdesc { font-size:.88rem; flex:1; }
.res-card .cta { font-size:.84rem; font-weight:700; color:var(--rc, var(--accent)); margin-top:.2rem; }
.printing { font-size:.9rem; color:var(--muted); line-height:1.6; margin-top:1.1rem; max-width:70ch; }
.printing strong { color:var(--text); }

.changelog-intro { font-size:.94rem; color:var(--muted); line-height:1.6; margin:1rem 0 1.4rem; max-width:70ch; }
code.handle { font-family:'Geologica'; font-weight:600; background:var(--surface-2); padding:.05rem .35rem; border-radius:4px; }
.changelog { display:flex; flex-direction:column; }
.cl-row { display:grid; grid-template-columns:140px 1fr; gap:1.2rem; padding:1.1rem 0; border-top:1px solid var(--hairline); }
.cl-row .v { font-family:'Geologica'; font-weight:900; font-size:1rem; }
.cl-row .d { font-size:.78rem; color:var(--faint); }
.cl-row ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.cl-row li { display:flex; gap:.6rem; font-size:.92rem; color:var(--text); }
.cl-row li .dash { color:var(--faint); }

/* ============================================================================
   ABOUT
   ========================================================================== */
.about-head { padding-top:3.4rem; padding-bottom:1rem; }
.about-head h1 { font-family:'Geologica'; font-weight:900; font-size:clamp(2rem,4.4vw,3rem); line-height:1.04; letter-spacing:-.025em; margin:1rem 0 1.2rem; }
.about-head .p1 { font-size:1.12rem; color:var(--text); line-height:1.6; margin-bottom:1rem; }
.about-head .p1 em { font-style:italic; }
.about-head .p2 { font-size:1.05rem; color:var(--muted); line-height:1.65; }
.about-head .p2 strong { color:var(--text); }

.about-sections { padding-top:1.6rem; padding-bottom:1rem; display:flex; flex-direction:column; gap:2rem; }
.about-sections h2 { font-family:'Geologica'; font-weight:900; font-size:1.3rem; letter-spacing:-.01em; margin-bottom:.7rem; }
.about-sections section > p { font-size:1rem; color:var(--muted); line-height:1.65; }
.about-sections section > p strong { color:var(--text); }
.about-sections section > p em { font-style:italic; }

.cite-block {
  background:var(--surface); border:1px solid var(--border); border-left:4px solid #3B82F6;
  border-radius:12px; padding:1.1rem 1.3rem; box-shadow:var(--shadow);
  font-size:.95rem; color:var(--text); line-height:1.6;
}
.cite-block em { font-style:italic; }
.cite-block-2 {
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:1.1rem 1.3rem; font-size:.92rem; color:var(--text); line-height:1.6; margin-top:.9rem;
}
.cite-block-2 em { font-style:italic; }

.credits-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.credit-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.3rem; box-shadow:var(--shadow); }
.credit-card .label { display:block; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:.55rem; }
.credit-card p { font-size:.96rem; color:var(--text); line-height:1.55; }

.living {
  background:color-mix(in srgb,#8B5CF6 7%, var(--surface));
  border:1px solid color-mix(in srgb,#8B5CF6 24%,var(--border));
  border-radius:14px; padding:1.4rem 1.5rem;
}
.living p { font-size:.98rem; line-height:1.65; }
.living .p1 { color:var(--text); margin-bottom:.9rem; }
.living .p2 { color:var(--muted); }
.living .p2 em { color:var(--text); font-style:italic; }
.living a { color:#8B5CF6; text-decoration:underline; text-underline-offset:2px; font-weight:700; }

.link-card {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1.3rem 1.6rem; box-shadow:var(--shadow);
}
.link-card .t { font-family:'Geologica'; font-weight:700; font-size:1.05rem; }
.link-card .arr { font-weight:700; color:var(--accent); }

/* footer paddings shared */
.foot-pad { padding-top:3rem; padding-bottom:4rem; }
.foot-pad-2 { padding-top:2.6rem; padding-bottom:4rem; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns:1fr; gap:1.4rem; }
  .hero-mark-wrap { order:-1; height:180px; }
  .htr-grid { grid-template-columns:1fr; gap:1.6rem; }
  .keepmind { grid-template-columns:1fr; }
  .intro-grid { grid-template-columns:1fr; gap:1.2rem; }
  .detail { grid-template-columns:1fr; }
  .tcard { position:static; max-width:330px; margin:0 auto; }
  .res-grid.two, .res-grid.three { grid-template-columns:1fr; }
  .credits-grid { grid-template-columns:1fr; }
  .rel-grid { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .nav-links .nav-link, .nav-divider { display:none; }
  .nav-links .nav-ext { display:none; }
  .cl-row { grid-template-columns:1fr; gap:.4rem; }
  .footer-cta { flex-direction:column; align-items:flex-start; }
  /* let the concern picker fill the toolbar instead of clipping at the panel edge */
  .toolbar-row { align-items:stretch; }
  .toolbar-group { width:100%; }
  .concern-select { max-width:none; flex:1 1 12rem; min-width:0; }
}