/* Obsidian Principles (from "Obsidian Principles.dc.html") */
.overview { padding: 0 var(--gutter) clamp(96px, 11vw, 160px); }
.overview-label { font-size: 14px; font-weight: 500; color: var(--fg-dim); margin-bottom: 32px; }
.track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 44px; }
/* 6 across on wide rows, 3 across in the middle, 2 across on phones */
.track li {
  box-sizing: border-box; min-width: 0;
  width: max(16.666%, min(33.333%, (960px - 100%) * 999), min(50%, (560px - 100%) * 999));
}
.track a { display: flex; flex-direction: column; gap: 18px; color: inherit; }
.track-mark { position: relative; display: block; height: 11px; }
.track-line { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(255, 255, 255, .18); transform-origin: 0 50%; }
.track li:last-child .track-line { background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)); }
.track-node {
  position: absolute; left: 0; top: 0; width: 11px; height: 11px; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--link-hover); background: var(--ink);
  transition: background .45s var(--ease-out), transform .45s var(--ease-out);
}
.track-text { display: flex; flex-direction: column; gap: 8px; padding-right: clamp(16px, 2vw, 28px); }
.stage-name { font-size: 14px; font-weight: 500; color: var(--link-hover); }
.track-title { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.35; color: var(--fg); text-wrap: pretty; transition: color .45s var(--ease-out); }
.track a:hover .track-node, .track a:focus-visible .track-node { background: var(--link-hover); transform: scale(1.3); }
.track a:hover .track-title, .track a:focus-visible .track-title { color: var(--link-hover); }

.principles { padding: 0 var(--gutter); }
.principle { scroll-margin-top: 104px; padding-bottom: clamp(88px, 10vw, 144px); }
.rule { display: block; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02)); }
.principle-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(28px, 3.5vw, 44px); padding-top: clamp(40px, 5vw, 64px);
}
.stage-chip {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: 14px; font-weight: 500; line-height: 1; color: var(--link-hover);
}
.ticks { display: flex; gap: 3px; }
.ticks span { display: block; width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.ticks .done { background: rgba(159, 182, 242, .38); }
.ticks .now { background: var(--link-hover); }

.principle-row { align-self: stretch; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px clamp(48px, 7vw, 112px); }
.principle-copy { flex: 1.15 1 360px; max-width: 620px; min-width: 0; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }
.principle-copy h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.05; color: #fff; max-width: 16ch; text-wrap: balance; }
.principle-copy h2:focus { outline: none; }
.principle-copy p { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--fg-nav); max-width: 52ch; text-wrap: pretty; }

.principle-cards { flex: 1 1 340px; max-width: 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.shell {
  display: flex; padding: 6px; border-radius: 26px; color: inherit;
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow .45s var(--ease-out);
}
.shell-inner {
  flex: 1 1 auto; border-radius: 20px; background: #0c0c0d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 14px;
}
.shell-label { font-size: 14px; font-weight: 500; color: var(--fg-dim); }
.ask { font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; color: #fff; text-wrap: pretty; }
.practice .shell-inner { padding-bottom: 22px; }
.fact { font-size: 16px; line-height: 1.5; color: var(--fg-nav); text-wrap: pretty; }
.practice-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 12px; }
.practice-project { font-size: 15px; font-weight: 500; color: #fff; }
.practice-arrow {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center; flex: none; color: #fff;
  transition: transform .45s var(--ease-out);
}
a.practice:hover, a.practice:focus-visible { color: inherit; box-shadow: inset 0 0 0 1px rgba(159, 182, 242, .5); }
a.practice:hover .practice-arrow, a.practice:focus-visible .practice-arrow { transform: translateX(3px); }

.closing { padding: 0 var(--gutter) clamp(104px, 12vw, 168px); }
.closing-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-top: clamp(40px, 5vw, 64px); }
.closing h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.05; color: #fff; max-width: 18ch; text-wrap: balance; }
.closing .actions { padding-top: 0; }