/* =================================================================
   Willow — guide-six-pillars page

   Rules unique to this page. The shared guide-hub component it also uses
   lives in guide-hub.css.
   ================================================================= */
/* Pillars summary strip */
  .pillars-strip {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--white);
  }
.pillars-strip .p {
    padding: 22px 20px;
    border-right: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 8px;
  }
.pillars-strip .p:last-child { border-right: none; }
.pillars-strip .p .n { font-family: var(--mono); font-size: var(--t-micro); color: var(--blue); letter-spacing: 0.06em; }
.pillars-strip .p .t { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; }
/* Chapter list */
  .chapters { margin-top: 72px; }
.chapter {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 26px 8px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, padding 0.12s;
  }
a.chapter:hover { background: var(--cream-2); padding-left: 18px; padding-right: 18px; }
a.chapter:hover .ch-title { color: var(--blue); }
.chapter .ord {
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--ink-4);
    letter-spacing: -0.02em;
  }
a.chapter:hover .ord { color: var(--blue); }
.chapter .ch-pillar {
    font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
  }
.chapter .ch-title { font-size: 21px; letter-spacing: -0.014em; line-height: 1.2; transition: color 0.12s; }
.chapter .ch-ex { font-size: 13px; color: var(--ink-3); margin-top: 7px; line-height: 1.5; }
.chapter .ch-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;
  }
.chapter .ch-time { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
/* In-progress (not yet written) */
  .chapter.soon { cursor: default; }
.chapter.soon .ch-title { color: var(--ink-3); }
.chapter.soon:hover { background: transparent; padding-left: 8px; padding-right: 8px; }
.chapter.soon:hover .ch-title { color: var(--ink-3); }
.ch-flag {
    font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--clay); background: rgba(184,104,70,0.12);
    padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
  }
@media (max-width: 1100px) {
    .pillars-strip { grid-template-columns: 1fr 1fr 1fr; }
    .pillars-strip .p:nth-child(3) { border-right: none; }
    .pillars-strip .p:nth-child(1), .pillars-strip .p:nth-child(2), .pillars-strip .p:nth-child(3) { border-bottom: 1px solid var(--rule); }
  }
@media (max-width: 720px) {
    .pillars-strip { grid-template-columns: 1fr 1fr; }
    .pillars-strip .p:nth-child(odd) { border-right: 1px solid var(--rule); }
    .pillars-strip .p:nth-child(even) { border-right: none; }
    .chapter { grid-template-columns: 44px 1fr; gap: 16px; }
    .chapter .ch-go, .chapter .ch-time, .ch-flag { display: none; }
  }