/* Premium refinement: editorial learning desk, quiet hierarchy, visible navigation. */
:root {
  --paper: #f5f2ec;
  --ink: #202421;
  --muted: #70756f;
  --green: #2d5a47;
  --line: #d8d5ce;
  --surface: #fbfaf7;
  --accent: #b86e45;
  --radius: 12px;
}

html { scrollbar-color: #9aada1 #eef1eb; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef1eb; }
::-webkit-scrollbar-thumb { background: #9aada1; border: 3px solid #eef1eb; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #6e8979; }

body { background: var(--paper); }
.site-header { height: 70px; padding-inline: max(20px, calc((100vw - 1180px) / 2)); background: rgba(245,242,236,.96); border-bottom-color: #cbc8c0; backdrop-filter: none; }
.brand-mark { border-radius: 7px; background: var(--ink); }
.brand small { color: #7f837d; }
.desktop-nav a { color: #5f655f; }
.desktop-nav a:hover { color: var(--ink); }
.header-cta { border-radius: 7px; background: var(--ink); }
.project-card { display: block; }
.article-card { display: block; color: inherit; }
.filter-button, .tool-action { display: inline-flex; align-items: center; cursor: pointer; }
.desktop-nav { display: flex !important; order: 2; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.desktop-nav::-webkit-scrollbar { display: none; }
.desktop-nav a { white-space: nowrap; }
.header-cta { order: 3; }
.menu-button { display: none !important; }

.hero { min-height: 485px; padding-top: 24px; padding-bottom: 38px; gap: 58px; }
.hero h1 { font-size: clamp(40px, 5.4vw, 68px); }
.hero-text { max-width: 500px; }
.hero-meta { margin-top: 32px; }
.hero-visual { min-height: 325px; }
.hero-visual:before, .orb-one, .orb-two { display: none; }
.route-card { transform: none; width: min(390px, 92%); padding: 26px; border: 1px solid #c8c9c2; border-radius: 10px; background: var(--surface); box-shadow: 12px 12px 0 #e3ded4; backdrop-filter: none; }
.route-card h3 { font-size: 23px; }
.route-card .pill { border-radius: 4px; background: #e8eee7; }
.route-line span:not(.route-node) { background: #c8cbc5; }
.route-node { border-color: #adb6ad; }
.route-node.active { border-color: var(--accent); background: var(--accent); }
.floating-card { border-radius: 6px; box-shadow: 4px 5px 0 rgba(32,36,33,.09); }
.code-card { opacity: 1; color: #5f655f; background: #eeebe4; }
.code-dot { background: var(--accent); }
.note-card { color: #5f655f; }
.note-icon { color: var(--accent); }

.intent-section, .content-section { padding-block: 52px; }
.intent-section { padding-top: 25px; }
.section-heading { margin-bottom: 23px; }
.section-heading.split { padding-bottom: 13px; }
.intent-card { min-height: 145px; padding: 19px; border-radius: 9px; background: var(--surface); }
.intent-card h3 { margin-top: 22px; }
.intent-card:hover { box-shadow: 7px 7px 0 #e5e0d8; }
.intent-card.intent-highlight { background: var(--ink); border-color: var(--ink); }
.path-card { min-height: 220px; border-radius: 9px; }
.path-card h3 { margin-top: 22px; }
.article-card { min-height: 205px; padding: 20px; border-radius: 9px; }
.article-card h3 { margin-top: 25px; }
.article-card p { min-height: 34px; }
.article-card:hover, .path-card:hover { box-shadow: 7px 7px 0 #e5e0d8; }
.project-section { padding-block: 62px; background: #202823; }
.project-visual { height: 140px; }
.project-card { border-radius: 9px; }
.project-card-body { padding: 18px 20px 20px; }
.project-card h3 { margin-top: 14px; }
.tool-card { padding: 18px; border-radius: 9px; }
.tool-card p { min-height: 43px; }
.job-section { padding-block: 64px; }
.job-card { border-radius: 9px; }
.newsletter { padding-block: 58px; }
.button, .filter-button { border-radius: 7px; }
.text-link { border-bottom-color: var(--accent); }
.tag { border-radius: 3px; background: #eceae4; }

/* Keep the signature route card, remove the extra “AI demo” ornaments. */
.code-card { top: 73px; right: 8px; opacity: .78; }
.note-card { bottom: 45px; left: 8px; }
.floating-card { border-radius: 7px; box-shadow: 0 7px 15px rgba(29,37,33,.07); }

@media (max-width: 900px) {
  .site-header { gap: 16px; }
  .desktop-nav { gap: 15px; font-size: 11px; }
  .header-cta { display: none; }
  .hero { min-height: 440px; }
}

@media (max-width: 680px) {
  .site-header { height: 64px; gap: 14px; overflow: hidden; }
  .brand { flex: 0 0 auto; }
  .desktop-nav { flex: 1 1 auto; justify-content: flex-end; gap: 16px; margin-left: 0; }
  .desktop-nav a { padding: 8px 0; }
  .hero { padding-top: 42px; padding-bottom: 30px; }
  .hero h1 { font-size: 40px; }
  .hero-meta { gap: 8px; flex-wrap: wrap; }
  .hero-visual { min-height: 285px; margin-top: 18px; }
  .route-card { width: 88%; }
  .code-card { top: 30px; right: -4px; }
  .note-card { bottom: 18px; left: -3px; }
  .intent-section, .content-section { padding-block: 45px; }
  .project-section, .job-section { padding-block: 52px; }
  .newsletter { padding-block: 52px; }
}