/* ============================================================
   The Human Questions Project — stylesheet
   Visual language: clean, typographic, lots of air. Inspired by
   Apple's marketing/editorial pages — SF system type, big tight
   headlines, soft grey fills instead of borders, restrained color.
   Class names are unchanged so every page restyles at once.
   ============================================================ */

:root{
  --bg:#ffffff;
  --bg-soft:#eef3f8;       /* soft Columbia-tinted grey */
  --ink:#1d1d1f;           /* Apple near-black text */
  --muted:#6e6e73;
  --muted-2:#86868b;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --accent:#0b3c61;        /* Columbia deep academic blue */
  --accent-soft:#3f7fb0;   /* Columbia mid blue */
  --colblue:#9bcbeb;       /* Columbia blue */
  --ink-blue:#0a1a2e;      /* nebula night */
  --link:#0b3c61;
  --link-hover:#3f7fb0;
  --radius:18px;
  --radius-lg:24px;
  --maxw:860px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.47 var(--font);
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover); text-decoration:underline}

/* the old colored rule bar is gone in this look */
.topbar{display:none}

/* ---- primary navigation (translucent, blurred, thin) ---- */
.topnav{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 26px;
  padding:0 22px; min-height:48px;
}
.topnav .brand{
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  color:var(--ink); margin-right:auto; padding:13px 0;
}
.topnav .brand:hover{text-decoration:none; color:var(--ink)}
.topnav .navlinks{display:flex; flex-wrap:wrap; gap:2px 24px}
.topnav .navlinks a{
  color:var(--muted); font-size:13px; padding:13px 0; letter-spacing:-.01em;
}
.topnav .navlinks a:hover{color:var(--ink); text-decoration:none}
.topnav .navlinks a[aria-current="page"]{color:var(--ink); font-weight:500}

/* ---- layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:72px 22px 120px}
.wrap.wide{max-width:1060px}

header h1{
  font-size:clamp(40px,6vw,60px); line-height:1.06; font-weight:600;
  letter-spacing:-.025em; margin:0 0 14px; color:var(--ink);
}
header .tag{
  font-size:clamp(20px,2.6vw,25px); line-height:1.3; font-weight:400;
  color:var(--muted); letter-spacing:-.012em; margin:0;
}

.lede{
  font-size:23px; line-height:1.45; font-weight:400; letter-spacing:-.014em;
  color:#424245; margin:34px 0 0; max-width:42ch;
}

.crumb{font-size:13px; color:var(--muted-2); margin:0 0 22px; letter-spacing:0}
.crumb a{color:var(--muted-2)}
.crumb a:hover{color:var(--ink); text-decoration:none}

h2{
  font-size:clamp(26px,3.4vw,34px); line-height:1.12; font-weight:600;
  letter-spacing:-.02em; color:var(--ink); margin:80px 0 8px;
}
h3{font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.015em; margin:38px 0 6px; color:var(--ink)}
.sub{color:var(--muted); font-size:18px; line-height:1.4; letter-spacing:-.01em; margin:8px 0 26px; max-width:46ch}

p{margin:16px 0}

/* ---- soft cards ---- */
.card{background:var(--bg-soft); border:none; border-radius:var(--radius); padding:26px 30px; margin:18px 0}
.soon{font-size:16px; line-height:1.5; color:var(--muted); margin:0}

.placeholder{
  background:#f0f7ff; border:none; border-radius:var(--radius);
  padding:20px 26px; margin:22px 0; color:var(--muted); font-size:15px; line-height:1.5;
}
.placeholder strong{color:var(--ink)}

/* ---- card grids ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:20px; margin-top:30px}
.tile{
  display:block; background:var(--bg-soft); border:none; border-radius:var(--radius);
  padding:26px 26px 28px; color:inherit;
  transition:transform .25s cubic-bezier(.25,.1,.25,1), box-shadow .25s;
}
.tile:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.08); text-decoration:none}
.tile .kicker{font-size:12px; font-weight:600; letter-spacing:.01em; text-transform:uppercase; color:var(--accent); margin:0 0 10px}
.tile .ttl{font-size:21px; font-weight:600; letter-spacing:-.015em; color:var(--ink); margin:0 0 8px; line-height:1.2}
.tile .desc{font-size:15px; line-height:1.5; color:var(--muted); margin:0; letter-spacing:-.006em}

/* ---- faculty / thinker grid ---- */
.faculty{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:40px 22px; margin-top:34px}
.prof{text-align:center}
.prof .shot{
  width:120px; height:120px; margin:0 auto 16px; border:none; border-radius:50%;
  background:var(--bg-soft); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); font:300 42px var(--font);
}
.prof .shot img{width:100%; height:100%; object-fit:cover; display:block}
.prof .name{font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--ink); margin:0}
.prof .role{color:var(--muted-2); font-size:13px; margin:4px 0 0}

/* ---- editorial-standard source tags ---- */
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.badge{
  font-size:12px; font-weight:500; letter-spacing:-.005em; padding:4px 12px;
  border-radius:980px; background:var(--bg-soft); color:var(--muted); border:none;
}
.badge.primary{background:#fdf3e3; color:#9a6a16}
.badge.secondary{background:#eaf2fb; color:#1a5fb4}
.badge.student{background:#eaf7ee; color:#1f7a3d}
.badge.open{background:#fbeef4; color:#9c3a6e}

.source{background:var(--bg-soft); border:none; border-radius:var(--radius); padding:20px 26px; margin:18px 0; font-size:17px; line-height:1.5}
.source .cite{font-size:13px; color:var(--muted-2); margin-top:10px}

/* ============================================================
   AI Dictionary
   ============================================================ */
.dict-intro{font-size:21px; line-height:1.45; letter-spacing:-.012em; color:#424245; border:none; padding:0; margin:30px 0; max-width:48ch}

.filter{margin:30px 0 6px}
.filter input{
  width:100%; padding:13px 18px; font-size:16px; font-family:var(--font);
  border:1px solid var(--line); border-radius:980px; background:var(--bg); color:var(--ink);
}
.filter input:focus{outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 4px rgba(63,127,176,.18)}
.filter .count{font-size:13px; color:var(--muted-2); margin-top:10px}

.toc{font-size:15px; margin:26px 0 0; columns:2; column-gap:40px}
.toc a{display:block; color:var(--muted); padding:4px 0}
.toc a:hover{color:var(--ink); text-decoration:none}
@media(max-width:560px){.toc{columns:1}}

.dict-group{margin:64px 0 0}
.dict-group > h2{margin-top:0}
.dict-group .glabel{font-size:15px; color:var(--muted); margin:10px 0 6px}

.entry{padding:30px 0; border-bottom:1px solid var(--line-soft)}
.entry:target{background:var(--bg-soft); border-radius:var(--radius); padding:26px 24px; margin:0 -24px; border-bottom:none}
.entry .term{font-size:25px; font-weight:600; letter-spacing:-.018em; color:var(--ink); margin:0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.entry .term .also{font-size:14px; font-weight:400; color:var(--muted-2)}
.entry .gloss{font-size:18px; line-height:1.4; color:var(--accent-soft); margin:6px 0 14px; letter-spacing:-.01em}
.entry p{margin:14px 0; line-height:1.55}
.entry .seealso{font-size:14px; color:var(--muted); margin-top:14px}
.entry .seealso a:hover{text-decoration:none}
.backtotop{font-size:12px; color:var(--muted-2); margin-left:8px}
.backtotop:hover{text-decoration:none}

/* ---- footer ---- */
footer.site{margin-top:96px; color:var(--muted-2); font-size:13px; line-height:1.5; border-top:1px solid var(--line-soft); padding-top:24px}
footer.site a{color:var(--muted-2)}
footer.site a:hover{color:var(--ink); text-decoration:none}

@media(max-width:620px){
  .wrap{padding:48px 20px 84px}
  .lede{font-size:20px}
  h2{margin-top:60px}
}

/* ============================================================
   Concept Nebula — home-page hero
   ============================================================ */
.nebula-hero{
  position:relative; width:100%; height:clamp(420px,70vh,680px);
  background:radial-gradient(120% 100% at 50% 18%, #14365c 0%, #0a1a2e 55%, #050d18 100%);
  overflow:hidden;
}
.nebula-hero canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
/* legibility scrim behind the caption */
.nebula-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,13,24,0) 46%, rgba(5,13,24,.78) 100%);
}
.nebula-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 22px 46px; text-align:center; pointer-events:none;
}
.nebula-caption > *{pointer-events:auto}
.nebula-caption h1{
  color:#fff; font-size:clamp(34px,5.4vw,60px); font-weight:600; letter-spacing:-.025em;
  margin:0 0 12px; text-shadow:0 2px 34px rgba(0,0,0,.55);
}
.nebula-caption .tag{
  color:#cfe3f3; font-size:clamp(17px,2.3vw,22px); line-height:1.35; font-weight:400;
  margin:0 auto 24px; max-width:36ch; text-shadow:0 1px 20px rgba(0,0,0,.55);
}
.nebula-caption .nebula-enter{
  display:inline-block; pointer-events:auto; cursor:pointer;
  font:500 15px var(--font); letter-spacing:-.01em;
  color:var(--accent); background:var(--colblue); border:none;
  padding:11px 22px; border-radius:980px; transition:background .2s, transform .2s;
}
.nebula-caption .nebula-enter:hover{background:#b6dbf2; transform:translateY(-1px); text-decoration:none; color:var(--accent)}
.nebula-hint{
  position:absolute; top:16px; left:0; right:0; z-index:2; text-align:center; pointer-events:none;
  color:rgba(207,227,243,.62); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
}
@media(max-width:620px){
  .nebula-hero{height:clamp(360px,62vh,520px)}
}
@media(prefers-reduced-motion:reduce){
  .nebula-caption .nebula-enter{transition:none}
}