/* Patterns of the Mind — minimal, phone-first, same look & spacing */
:root{
  --bg:#faf9f6; --ink:#0f1a14; --muted:#526055; --card:#ffffff; --border:#e6e2da;
  --accent:#2f7d4c; --accent-2:#3f8d5c; --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.05),0 6px 12px -8px rgba(0,0,0,.12);
  --maxw:72ch;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0d1310; --ink:#e7efe9; --muted:#a9b6ae; --card:#0f1713; --border:#203127; --accent:#4fa06b; --accent-2:#63b47e;}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100%;
  background:var(--bg); color:var(--ink);
  font:16px/1.7 "Palatino Linotype","Book Antiqua",Palatino,"TeX Gyre Pagella",Georgia,serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; flex-direction:column;
}
img, video{max-width:100%; height:auto; display:block; object-fit:contain}
figure{margin:0}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:color-mix(in oklab,var(--bg) 85%, transparent);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem}
.logo{width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#9ecfae); box-shadow:var(--shadow)}
.brand-text{display:flex; flex-direction:column}
.site-title{font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight:700; color:var(--ink); text-decoration:none}
.site-subtitle{color:var(--muted); font-size:.9rem}

/* Layout */
.layout{flex:1; display:grid; grid-template-columns:1fr; gap:1rem; padding:1rem}
.sidebar{border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow)}
.nav{list-style:none; margin:0; padding:.5rem}
.nav-link{
  display:block; padding:.6rem .75rem; border-radius:10px; text-decoration:none; color:var(--ink);
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.nav-link:hover{background:color-mix(in oklab,var(--card) 70%, var(--accent) 30%); color:#fff}
.nav-link.active{background:color-mix(in oklab,var(--card) 60%, var(--accent) 40%); color:#fff}

/* Page content frame (final intent = transparent card) */
.content{display:flex; flex-direction:column; padding:clamp(1rem,1vw + 1rem,2rem); background:transparent; border:0; box-shadow:none}

/* Sections */
.section{max-width:960px; margin:0 auto}
.section h1{font-size:clamp(1.6rem,2vw + 1rem,2.4rem); margin:.5rem 0 1rem}
.section p{margin:.8rem 0}

/* Two-column pattern */
.twocol{display:grid; grid-template-columns:1fr; gap:1rem; align-items:start}
.col.copy{max-width:var(--maxw)}
.col.media img{border-radius:12px; border:1px solid var(--border)}

@media (min-width:720px){
  .layout{grid-template-columns:260px 1fr; align-items:start}
  .sidebar{position:sticky; top:76px; height:fit-content}
  .twocol{grid-template-columns:1.1fr .9fr; gap:2rem}
}

/* Bottom CTA */
.bottom-cta{margin-top:auto; display:grid; place-items:center; padding:1.5rem 0}
.button{
  display:inline-block; padding:.7rem 1rem; border-radius:10px; text-decoration:none;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight:600;
  background:var(--accent); color:#fff;
}
.button:hover{background:var(--accent-2)}