/* Fieldnotes home, section cards and the section navigation. Theme tokens only, so all four themes apply. */
.home-hero{grid-template-columns:minmax(0,1fr)}
:root .brand .brand-mark { background:linear-gradient(135deg,#19151f,#100e14); color:#d7b0ff; border:1px solid #493755; box-shadow:0 0 10px #a855f70d; }
:root[data-theme] .brand .brand-mark { color:#d7b0ff; }
:root[data-theme='vercel-light'] .brand .brand-mark { background:linear-gradient(135deg,#f5efff,#eee6f7); color:#6d28d9; border-color:#cdb8e8; box-shadow:none; }
.home-hero p{max-width:620px}
.section-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.section-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:16px;min-height:385px;transition:transform .2s cubic-bezier(0.16,1,0.3,1),border-color .18s,box-shadow .2s cubic-bezier(0.16,1,0.3,1)}
.section-card:hover{border-color:var(--muted);transform:translateY(-2px);box-shadow:0 6px 20px -4px rgba(0,0,0,0.22),0 1px 4px rgba(0,0,0,0.12)}
.section-card:active{transform:translateY(0) scale(0.992);transition:transform .06s ease-out,box-shadow .06s ease-out}
.section-card:focus-within{border-color:var(--accent)}
.section-card:hover .card-icon{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);transform:translateY(-1px)}
.section-card:hover .section-cta span{transform:translate(2px,-2px)}
/* Section card image container: cropped, well-fitted, responsive, and themed */
.card-image-wrap{position:relative;width:100%;height:104px;border-radius:6px;overflow:hidden;margin-bottom:12px;border:1px solid var(--line);background:var(--raised);flex-shrink:0}
.card-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .35s cubic-bezier(0.16,1,0.3,1),filter .35s ease;filter:brightness(0.92) contrast(1.05)}
.section-card:hover .card-image{transform:scale(1.04);filter:brightness(1.04) contrast(1.1)}
.card-image-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,17,19,0.08) 0%,rgba(16,17,19,0.7) 100%);pointer-events:none}
.card-image-meta{position:absolute;inset:0;padding:8px 9px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2;pointer-events:none}
.card-image-meta .card-category-badge{margin-right:0}
.card-header-eyebrow{font:600 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.2px;color:var(--faint);text-transform:uppercase;margin-bottom:6px}
/* The whole card is one link; sub-section links sit above it. */
.section-card-link{position:absolute;inset:0;border-radius:inherit;z-index:1}
.section-card .card-top .number{font-size:9px;letter-spacing:1.3px}
.section-card h3{font-size:20px;font-weight:500;letter-spacing:-.5px;margin:0 0 8px;color:var(--text)}
.section-card p{font-size:12px;color:var(--muted);line-height:1.75;margin:0 0 12px}
.section-tracks{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;margin-top:auto;margin-bottom:8px;max-height:120px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-right:3px}
.section-tracks::-webkit-scrollbar{width:4px}
.section-tracks::-webkit-scrollbar-track{background:transparent}
.section-tracks::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.section-tracks::-webkit-scrollbar-thumb:hover{background:var(--faint)}
.section-track{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:5px;padding:6px 10px;font-size:12px;color:var(--text);flex-shrink:0;transition:border-color .15s,background .15s,color .15s,transform .12s}
.section-track:hover{border-color:var(--accent);color:var(--accent);background:var(--raised)}
.section-track:active{transform:scale(0.985);transition:transform .06s ease-out}
.section-track-count{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--faint)}
.section-track:hover .section-track-count{color:var(--accent)}
.section-card .card-bottom{margin-top:auto}
.card-category-badge{display:inline-block;padding:2px 7px;border-radius:4px;font:600 8.5px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1px;background:#c8b5fb18;color:var(--accent);margin-right:6px}
.card-category-badge.card-category-curricula{background:#c8b5fb18;color:var(--accent);border:1px solid #c8b5fb30}
.card-category-badge.card-category-workbench{background:#e5c07b18;color:#dfbe88;border:1px solid #e5c07b30}
.card-category-badge.card-category-research{background:#7fd5ea18;color:#7fd5ea;border:1px solid #7fd5ea30}
:root[data-theme='vercel-light'] .card-category-badge.card-category-workbench{color:#855a00;border-color:#d4a01740;background:#d4a01712}
:root[data-theme='vercel-light'] .card-category-badge.card-category-research{color:#006677;border-color:#00889940;background:#00889912}
.section-title-wrap{display:flex;flex-direction:column;gap:3px}
.section-title-desc{font-size:11px;color:var(--muted);font-weight:400}
.home-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:0}
.section-card[hidden]{display:none!important}
.section-cta{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font:500 11px var(--theme-sans,"Avenir Next","Segoe UI",sans-serif);white-space:nowrap}
.section-cta span{display:inline-block;transition:transform .18s cubic-bezier(0.16,1,0.3,1)}
/* Sidebar: sleek scrollbar, clean hierarchy, sharp active selection and tree lines. */
.sidebar{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--faint)}
.side-home,.side-link{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 9px;border-radius:6px;color:var(--muted);font-size:13px;line-height:1.3;transition:background .15s,color .15s,box-shadow .15s}
.side-home:hover,.side-link:hover{background:var(--raised);color:var(--text)}
.side-home.active,.side-link.active{background:var(--raised);color:var(--text)}
.side-home[aria-current="page"],.side-link[aria-current="page"]{background:var(--raised);color:var(--text);box-shadow:inset 3px 0 0 var(--accent);font-weight:500}
.side-link[aria-current="location"]{color:var(--text);font-weight:500;background:transparent}
.side-link[aria-current="location"]:hover{background:var(--raised)}
.side-nav{display:flex;flex-direction:column;margin-top:12px}
.side-category-header{padding:16px 10px 6px;font:700 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.5px;color:var(--faint);text-transform:uppercase}
.side-category-header:first-child{padding-top:4px}
.side-category-header:not(:first-child){border-top:1px solid var(--line);margin-top:10px;padding-top:14px}
.side-group{display:flex;flex-direction:column;gap:2px;padding:6px 0 10px}
.side-group + .side-group{border-top:1px dashed color-mix(in srgb, var(--line) 70%, transparent);margin-top:4px;padding-top:8px}
.side-heading{display:block;padding:0 10px 8px;font:600 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.3px;text-transform:uppercase;color:var(--faint)}
a.side-heading:hover{color:var(--text)}
.side-heading.active{color:var(--accent)}
.side-icon{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:5px;font-size:11px;line-height:1;color:var(--muted);transition:border-color .15s,color .15s}
.side-link.active .side-icon,.side-home.active .side-icon,.side-link[aria-current="location"] .side-icon{color:var(--accent);border-color:var(--accent)}
.side-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-count{flex:none;font:600 10px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--faint);letter-spacing:0.3px}
.side-row{display:flex;align-items:center;gap:2px}
.side-row .side-link{flex:1}
.side-toggle{flex:none;display:grid;place-items:center;width:24px;height:26px;border-radius:5px;color:var(--faint);cursor:pointer;transition:background .15s,color .15s}
.side-toggle:hover{background:var(--raised);color:var(--text)}
.side-toggle span{display:inline-block;font-size:14px;line-height:1;transition:transform .18s cubic-bezier(0.16,1,0.3,1)}
.side-toggle[aria-expanded="true"] span{transform:rotate(90deg);color:var(--text)}
.side-lessons{display:flex;flex-direction:column;gap:2px;margin:4px 0 8px 18px;padding-left:8px;border-left:1px solid var(--line)}
.side-lessons[hidden]{display:none!important}
.side-lessons .chapter-link{padding:6px 9px;font-size:12px;line-height:1.4;display:flex;align-items:baseline;gap:9px;border-radius:5px;white-space:normal;min-height:30px;color:var(--muted);text-decoration:none;transition:background .12s,color .12s,box-shadow .12s}
.side-lessons .chapter-link:hover{background:var(--raised);color:var(--text)}
.side-lessons .chapter-link:hover .chapter-number{color:var(--text)}
.side-lessons .chapter-link.active{background:var(--raised);color:var(--text);box-shadow:inset 3px 0 0 var(--accent);font-weight:500}
.side-lessons .chapter-link .chapter-number{min-width:28px;flex-shrink:0;font:600 11px/1.4 var(--theme-mono,ui-monospace,SFMono-Regular,Consolas,monospace);color:var(--faint);letter-spacing:0.5px}
.side-lessons .chapter-link.active .chapter-number{color:var(--accent);font-weight:700}
.side-home:active,.side-link:active,.side-lessons .chapter-link:active{transform:scale(0.985);transition:transform .06s ease-out}
.side-toggle:active{transform:scale(0.92);transition:transform .06s ease-out}
.side-heading{padding-left:8px}
@media(prefers-reduced-motion:reduce){.side-toggle span,.side-home,.side-link,.side-lessons .chapter-link,.section-card,.section-track,.section-cta span{transition:none!important;transform:none!important}}
.drawer-sections{display:grid;gap:5px;margin-bottom:6px}
/* Section hero art illustration container: responsive, cropped, and well-fitted */
.hero-section-art{width:280px;height:180px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--raised);box-shadow:0 4px 20px rgba(0,0,0,0.3);display:flex;align-self:center}
.hero-section-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(max-width:900px){.hero-section-art{display:none}}
@media(max-width:1050px){.section-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.section-grid{grid-template-columns:1fr}.section-card{min-height:0;padding:14px}.card-image-wrap{height:88px;margin-bottom:10px}.section-card h3{font-size:18px;margin-bottom:6px}.section-card p{margin-bottom:10px}.section-tracks{max-height:105px}.section-card .card-bottom{flex-wrap:wrap;gap:8px}}


/* Follow a request - Home hero action card */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 440px);
  gap: var(--space-6);
  align-items: center;
}
.home-follow-card-wrap {
  display: flex;
  justify-content: flex-end;
}
.home-follow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 440px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s, box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-follow-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}
.home-follow-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.home-follow-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 4px;
  font: 600 8.5px/1.2 var(--theme-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  letter-spacing: 1px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.home-follow-heading {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
}
.home-follow-journey {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.home-follow-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0;
  margin: 2px 0;
}
.home-follow-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--raised);
  border: 1px solid var(--line);
  font: 500 11px/1.2 var(--theme-sans, system-ui, sans-serif);
  color: var(--text);
}
.home-follow-chip .ui-icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
}
.home-follow-sep {
  font-size: 11px;
  color: var(--faint);
}
.home-follow-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 4px;
}
@media (max-width: 960px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .home-follow-card-wrap {
    justify-content: stretch;
  }
  .home-follow-card {
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-follow-card {
    transition: none !important;
    transform: none !important;
  }
}