/* =================================================================
   Time to Grow · library site styles
   Extends colors_and_type.css. Library room only.
   ================================================================= */

@import url("./colors_and_type.css");

/* tweakable variables · defaults match "standard density" + "soft" funnel */
:root {
  --density-stack: 56px;   /* gap between top-level sections */
  --density-row:   18px;   /* row padding in archive table */
  --density-card:  28px;   /* card / collection inner padding */
  --funnel-visibility: 1;  /* 0 quiet · 1 soft · 2 present */
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--library-paper);
  color: var(--library-ink);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feat);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--library-ink); color: var(--library-paper); }

/* layout containers */
.container { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
.container--reader { max-width: 720px; margin: 0 auto; padding: 0 32px; }
.container--wide { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) {
  .container, .container--wide { padding: 0 24px; }
  .container--reader { padding: 0 22px; }
}

/* Top nav (shared across pages) */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--library-paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--library-rule);
}
nav.top .row {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 32px;
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em;
}
.wordmark .mk { width: 7px; height: 7px; border-radius: 50%; background: var(--library-accent); display: inline-block; transform: translateY(-1px); }
.nav-links { display: flex; gap: 22px; font-size: 13.5px; color: var(--library-ink-2); font-weight: 500; }
.nav-links a { transition: color 250ms var(--ease-out); }
.nav-links a:hover, .nav-links a.is-active { color: var(--library-accent); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-search {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--library-muted); font-weight: 500;
  padding: 8px 12px; border-radius: 999px; background: var(--library-paper-2);
  cursor: pointer; border: none; font-family: inherit;
}
.nav-search:hover { color: var(--library-ink); }
.nav-counsel {
  font-size: 12.5px; font-weight: 500; color: var(--library-ink-2);
  display: inline-flex; align-items: baseline; gap: 7px;
  opacity: calc(var(--funnel-visibility) * 0.5);  /* hidden when 0, soft at 1, full at 2 */
  transition: opacity 250ms var(--ease-out);
}
.nav-counsel[data-force-show] { opacity: 1; }
.nav-counsel .sq { width: 6px; height: 6px; border-radius: 50%; background: var(--counsel-accent); display: inline-block; transform: translateY(-1px); }
.nav-counsel:hover { color: var(--library-ink); }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-counsel { display: none; }
}

/* Family footer */
footer.foot { padding: 56px 0 48px; border-top: 1px solid var(--library-rule); margin-top: var(--density-stack); }
.foot-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; font-weight: 500; color: var(--library-muted); flex-wrap: wrap; gap: 18px; }
.foot-row .family { display: flex; gap: 14px; flex-wrap: wrap; }
.foot-row .ff { display: inline-flex; align-items: baseline; gap: 6px; }
.foot-row .ff.other { opacity: 0.55; }
.foot-row .ff.self { color: var(--library-ink); }
.foot-row .sq { width: 6px; height: 6px; border-radius: 50%; display: inline-block; transform: translateY(-1px); }
.foot-row .sq-c { background: var(--counsel-accent); }
.foot-row .sq-l { background: var(--library-accent); }
.foot-row .sq-p { background: var(--practice-accent); }
.foot-meta { margin-top: 24px; font-size: 11.5px; color: var(--library-muted); display: flex; gap: 18px; flex-wrap: wrap; }
.foot-meta a { border-bottom: 1px solid var(--library-rule); padding-bottom: 1px; }
.foot-meta a:hover { color: var(--library-ink); border-bottom-color: var(--library-ink); }

/* Author identity (the personal-brand spine) */
.author-strip {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--library-ink-2); font-weight: 500;
}
.author-strip .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background-image: url("./portrait.png");
  background-size: cover; background-position: 50% 12%;
  filter: grayscale(0.15) contrast(1.02);
  flex-shrink: 0;
}
.author-strip .name { color: var(--library-ink); }
.author-strip .role { color: var(--library-muted); font-size: 12px; }

/* Counsel funnel module (appears on essays + about) */
.funnel {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--library-rule);
  border-radius: 8px;
  background: var(--library-paper-2);
  display: grid; grid-template-columns: 1fr 220px; gap: 32px; align-items: end;
  display: none;  /* hidden when funnel-visibility is 0 */
}
.funnel.is-shown { display: grid; }
.funnel.is-shown[data-intensity="present"] {
  background: color-mix(in oklch, var(--counsel-accent) 6%, var(--library-paper-2));
}
.funnel .lbl { font-size: 11.5px; font-weight: 500; color: var(--library-muted); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.funnel .lbl::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--counsel-accent); display: inline-block; }
.funnel h4 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 10px; max-width: 22ch; }
.funnel h4 em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: var(--counsel-accent); letter-spacing: -0.02em; }
.funnel p { font-size: 14px; line-height: 1.55; color: var(--library-ink-2); margin: 0; max-width: 50ch; }
.funnel .cta { text-align: right; }
.funnel .cta a { font-size: 13.5px; font-weight: 500; color: var(--library-ink); border-bottom: 1px solid var(--library-ink); padding-bottom: 3px; }
.funnel .cta a:hover { color: var(--counsel-accent); border-bottom-color: var(--counsel-accent); }
.funnel .cta .meta { display: block; font-size: 11.5px; color: var(--library-muted); margin-top: 10px; }

@media (max-width: 720px) {
  .funnel { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .funnel .cta { text-align: left; }
}

/* Pillar chips (5 content pillars) */
.pillar-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
  padding: 5px 11px; border-radius: 999px;
  background: var(--library-paper-2); color: var(--library-ink);
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}
.pillar-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--library-accent); display: inline-block; }
.pillar-chip:hover { background: var(--library-clay); }
.pillar-chip.is-active { background: var(--library-ink); color: var(--library-paper); }
.pillar-chip.is-active::before { background: var(--library-accent); }

/* Shared section eyebrow */
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--library-muted);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--library-accent); display: inline-block; }

/* Italic emphasis (reused everywhere) */
.em-i {
  font-family: var(--font-italic); font-style: italic; font-weight: 400;
  color: var(--library-accent); letter-spacing: -0.02em;
}

/* Tag pill (used on essay meta + topic page) */
.tag {
  display: inline-block; font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  background: var(--library-paper-2); color: var(--library-ink-2);
  letter-spacing: 0.01em;
}
.tag:hover { color: var(--library-ink); }

/* Number / numeral (Hanken lining, in accent) */
.numeral {
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}