/* =================================================================
   Willow — guide hub pages

   Shared by guide-six-pillars, guide-personal-branding and
   guide-social-media-fundamentals. The last two carried byte-identical
   <style> blocks; six-pillars carried the same component plus its own
   chapter and pillars rules, which live in page-guide-six-pillars.css.
   ================================================================= */
/* ---- Guide hub ---- */
  .guide-meta-row {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    text-transform: uppercase;
  }
  .guide-meta-row .item { display: inline-flex; align-items: center; gap: 8px; }
  .guide-meta-row .item b { color: var(--ink); font-weight: 600; }
  .guide-meta-row .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); }

  /* Authors */
  .guide-authors { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
  .guide-authors .who { display: flex; gap: 12px; align-items: center; }
  .guide-authors .av {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--blue-soft); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 13px; font-weight: 600;
  }
  .guide-authors .nm { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.25; }
  .guide-authors .rl { font-size: 12px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.02em; }

  /* What you'll learn */
  .learn-list { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
  .learn-list li { list-style: none; padding-left: 26px; position: relative; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
  .learn-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 1px; background: var(--blue); }

  /* Course content — modules */
  .chapters { margin-top: 72px; }
  .chapters .lead {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px; flex-wrap: wrap;
    padding-bottom: 22px; border-bottom: 1px solid var(--rule);
  }
  .chapters .lead h2 { font-size: 34px; letter-spacing: -0.022em; line-height: 1.08; }
  .chapters .lead .note { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; }

  .module { margin-top: 4px; }
  .mod-head {
    display: flex; align-items: baseline; gap: 16px;
    padding: 34px 8px 4px;
  }
  .module:first-of-type .mod-head { padding-top: 22px; }
  .mod-head .mod-n { font-family: var(--mono); font-size: 13px; color: var(--blue); letter-spacing: 0.06em; }
  .mod-head h3 { font-size: 22px; letter-spacing: -0.016em; line-height: 1.15; }
  .mod-head .mod-count { margin-left: auto; font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); letter-spacing: 0.04em; white-space: nowrap; }

  .lesson {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 15px 8px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, padding 0.12s;
  }
  .module .lesson:first-of-type { border-top: 1px solid var(--rule); }
  a.lesson:hover { background: var(--cream-2); padding-left: 16px; padding-right: 16px; }
  a.lesson:hover .l-title { color: var(--blue); }
  a.lesson:hover .ord { color: var(--blue); }
  .lesson .ord { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--ink-4); letter-spacing: -0.01em; }
  .lesson .l-title { font-size: 17px; letter-spacing: -0.01em; line-height: 1.25; transition: color 0.12s; }
  .lesson .l-go { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--blue); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

  @media (max-width: 720px) {
    .learn-list { grid-template-columns: 1fr; }
    .lesson { grid-template-columns: 38px 1fr; gap: 14px; }
    .lesson .l-go { display: none; }
  }