/* ==========================================================================
   direction.css — shared composition primitives from the Opus 5.5 design spec
   (docs/style-implementation/design-spec.md §1, §2 and the page decisions in §3).

   Loaded AFTER the existing page CSS on every static page that uses it, so its
   rules win only where the design intentionally overrides the earlier layers.
   Tokens are inherited from style.css :root (navy / ivory / stone / sage /
   brass / ink). Nothing here rewrites copy or figures.
   ========================================================================== */

:root{
  --dir-max:1268px;
  --dir-margin:max(6vw,40px);
  --dir-rhythm:96px;
  --dir-rhythm-tight:64px;
}

/* ---- 12-column frame: 1268 content, 24 gutters, side margin 86 @1440 ------ */
.dir-frame{width:100%;max-width:var(--dir-max);margin-inline:auto}
.dir-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.dir-c4{grid-column:span 4}
.dir-c5{grid-column:span 5}
.dir-c7{grid-column:span 7}
.dir-c8{grid-column:span 8}
.dir-c12{grid-column:span 12}

/* ---- Section rhythm (§1) -------------------------------------------------- */
.dir-rhythm{padding-block:var(--dir-rhythm)}
.dir-rhythm-tight{padding-block:var(--dir-rhythm-tight)}

/* ---- Callout levels (§1) -------------------------------------------------- */
/* L1 statement: navy full-bleed, 56–72 display type, one per page. */
.dir-l1{background:var(--navy);color:var(--ivory)}
.dir-l1 .dir-l1-display{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;line-height:1.03;letter-spacing:-.025em;font-size:clamp(56px,6vw,72px);margin:0}
.dir-l1 .eyebrow{color:var(--brass)}
/* L2 key point: 2px brass left rule, 24 indent, serif 26–30. */
.dir-l2{border-left:2px solid var(--brass);padding-left:24px}
.dir-l2 .dir-l2-text{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:clamp(26px,2.4vw,30px);line-height:1.2;letter-spacing:-.02em;margin:0}
.dir-l2-list{list-style:none;margin:0;padding:0}
.dir-l2-list>li{border-left:2px solid var(--brass);padding-left:24px;margin-bottom:24px}
.dir-l2-list>li:last-child{margin-bottom:0}
.dir-l2-list h4{font:clamp(22px,2vw,26px)/1.2 'Libre Caslon Display',Georgia,serif;font-weight:400;letter-spacing:-.02em;margin:0 0 8px}
.dir-l2-list p{font-size:15px;margin:0;color:var(--ink)}
/* L3 aside: ivory or stone panel, 15–16 body, no rule. */
.dir-l3{background:var(--ivory);border:1px solid #ddd8cc;padding:22px 24px;font-size:15px}
.dir-l3 h4{font:22px/1.2 'Libre Caslon Display',Georgia,serif;font-weight:400;margin:0 0 8px}
.dir-l3 p{font-size:15px;margin:0;color:var(--ink)}
.stone .dir-l3{background:#f3f0e8}

/* ---- Indexed selector row (§1) -------------------------------------------- */
.selector-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:24px;min-height:96px;padding:18px 6px;border-top:1px solid #c9c4b8;text-decoration:none;color:inherit;transition:background var(--control,280ms) var(--ease,cubic-bezier(.22,1,.36,1))}
.selector-rows>.selector-row:last-child,.selector-list>.selector-row:last-child{border-bottom:1px solid #c9c4b8}
.selector-index{font-size:11px;letter-spacing:.17em;font-weight:600;color:var(--brass);align-self:start;padding-top:6px}
.selector-body{min-width:0}
.selector-title{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:30px;line-height:1.12;letter-spacing:-.02em;margin:0}
.selector-desc{font-size:14px;line-height:1.6;color:var(--ink);margin:6px 0 0;max-width:62ch}
.selector-arrow{font-size:20px;color:var(--brass);line-height:1;transition:transform var(--control,280ms) var(--ease,cubic-bezier(.22,1,.36,1))}
.selector-row:hover,.selector-row:focus-visible{background:#00000006}
.selector-row:hover .selector-arrow,.selector-row:focus-visible .selector-arrow{transform:translateX(5px)}
.selector-row:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.selector-heading{max-width:34ch}
.selector-heading h2{font-size:clamp(34px,3.4vw,54px);margin-block:14px 18px}
.selector-heading .eyebrow{margin-bottom:8px}

/* ---- Chapter index (§1 mobile rule + §3.2) -------------------------------- */
.chapter-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #c9c4b8;border-bottom:1px solid #c9c4b8}
.chapter-index a{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:88px;padding:16px 20px;border-left:1px solid #c9c4b8;text-decoration:none;color:inherit;transition:background var(--control,280ms) var(--ease,cubic-bezier(.22,1,.36,1))}
.chapter-index a:first-child{border-left:0}
.chapter-index a:hover,.chapter-index a:focus-visible{background:#00000006}
.chapter-index a:focus-visible{outline:2px solid var(--brass);outline-offset:-3px}
.chapter-index .chapter-index-no{font-size:11px;letter-spacing:.17em;font-weight:600;color:var(--brass)}
.chapter-index .chapter-index-name{font-family:'Libre Caslon Display',Georgia,serif;font-size:24px;line-height:1.15}

/* ---- Shared mobile safety: no sideways scroll except the scroller --------- */
@media(max-width:760px){
  .dir-rhythm{padding-block:56px}
  .dir-rhythm-tight{padding-block:40px}
  .dir-12{display:block}
  .dir-c4,.dir-c5,.dir-c7,.dir-c8{grid-column:auto}
  .selector-row{grid-template-columns:44px minmax(0,1fr) auto;gap:16px;min-height:72px;padding:14px 4px}
  .selector-title{font-size:24px}
  .dir-l2{padding-left:16px}
  /* The explicit chapter index is the only horizontal scroller in the spec. */
  .chapter-index{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:0;position:relative;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .chapter-index::-webkit-scrollbar{display:none}
  .chapter-index a{min-width:260px;scroll-snap-align:start;border-left:1px solid #c9c4b8}
  .chapter-index a:last-child{margin-right:24px}
}

/* ==========================================================================
   §3.1 HOME
   ========================================================================== */

/* 2. #planning — compact selector beside a 4-col heading block (D 4/8). */
#planning.dir-home-selector .dir-12{align-items:center}
#planning.dir-home-selector{padding-block:var(--dir-rhythm-tight)}
#planning.dir-home-selector .path{grid-template-columns:64px minmax(0,1fr) auto;gap:24px;align-items:center;padding:18px 6px;border-top:1px solid #c9c4b8}
#planning.dir-home-selector .path:last-child{border-bottom:1px solid #c9c4b8}
#planning.dir-home-selector .path>span{font-size:11px;letter-spacing:.17em;font-weight:600;color:var(--brass);align-self:start;padding-top:6px}
#planning.dir-home-selector .path>h3{font-size:30px;max-width:none;margin:0}
#planning.dir-home-selector .path>div{grid-column:auto}
#planning.dir-home-selector .path p{font-size:14px;color:var(--ink);max-width:62ch;margin:6px 0 10px}
#planning.dir-home-selector .path .text-link{font-size:13px}
#planning.dir-home-selector .path{padding-block:18px}
#planning.dir-home-selector .path>h3{grid-column:2;grid-row:1}
#planning.dir-home-selector .path>div{grid-column:2;grid-row:2;padding-left:0}

/* 3. #strategies — lead card 7 col @560, three supporting cards stacked in 5 col. */
#strategies.dir-lead-three{padding-block:var(--dir-rhythm)}
#strategies.dir-lead-three .dir-lead-cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:34px}
#strategies.dir-lead-three .dir-lead-card{grid-column:span 7;display:flex;flex-direction:column;background:var(--stone);color:var(--navy);text-decoration:none;border-top:2px solid var(--brass);min-height:560px}
#strategies.dir-lead-three .dir-lead-card figure{margin:0;flex:1;min-height:0;overflow:hidden;background:var(--stone)}
#strategies.dir-lead-three .dir-lead-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
#strategies.dir-lead-three .dir-lead-card:hover img{transform:scale(1.02)}
#strategies.dir-lead-three .dir-lead-card .dir-card-body{display:flex;flex-direction:column;gap:12px;padding:26px 28px}
#strategies.dir-lead-three .dir-lead-card h3{font-size:34px;line-height:1.1;margin:0}
#strategies.dir-lead-three .dir-support{grid-column:span 5;display:flex;flex-direction:column;gap:16px}
#strategies.dir-lead-three .dir-support-card{flex:1;display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center;min-height:170px;background:var(--stone);color:var(--navy);text-decoration:none;border-top:2px solid var(--brass);overflow:hidden}
#strategies.dir-lead-three .dir-support-card figure{margin:0;height:100%;min-height:170px;overflow:hidden;background:var(--stone)}
#strategies.dir-lead-three .dir-support-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
#strategies.dir-lead-three .dir-support-card:hover img{transform:scale(1.03)}
#strategies.dir-lead-three .dir-support-card .dir-card-body{display:flex;flex-direction:column;gap:8px;padding:18px 22px 18px 0}
#strategies.dir-lead-three .dir-support-card h3{font-size:24px;line-height:1.15;margin:0}
#strategies.dir-lead-three .dir-support-card p{font-size:13px;color:var(--ink);margin:0}
#strategies.dir-lead-three .dir-support-card .selector-arrow{font-size:17px}
#strategies.dir-lead-three .launch-index,#strategies.dir-lead-three .dir-card-body>p:first-child{font-size:11px;letter-spacing:.17em;font-weight:600;color:var(--brass);margin:0}
#strategies.dir-lead-three .dir-card-body>.text-link{font-size:13px;margin-top:auto;color:var(--navy)}
#strategies.dir-lead-three .dir-lead-card:focus-visible,#strategies.dir-lead-three .dir-support-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* 4. #retirement — full-bleed image break (edge to edge at every width; the
   reading panel carries the single content inset). */
#retirement.dir-image-break{padding-block:0;padding-inline:0;background:var(--stone)}
#retirement.dir-image-break .dir-break-frame{position:relative;background:var(--stone)}
#retirement.dir-image-break .dir-break-media{width:100%;height:640px;overflow:hidden;background:var(--stone);display:block}
#retirement.dir-image-break .dir-break-media img{width:100%;height:100%;object-fit:cover}
#retirement.dir-image-break .dir-break-panel{width:42%;min-width:360px;max-width:640px;background:var(--ivory);padding:44px 46px;margin-top:-120px;margin-left:var(--dir-margin);position:relative;z-index:2}
#retirement.dir-image-break .dir-break-panel .lead{font-size:17px;margin:0}
#retirement.dir-image-break .dir-break-question{padding:56px var(--dir-margin) 72px}
#retirement.dir-image-break .dir-break-question h2{font-size:clamp(30px,2.8vw,44px);max-width:30ch;margin:0 0 30px}
#retirement.dir-image-break .dir-break-questions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid #c9c4b8}
#retirement.dir-image-break .dir-break-questions>li{list-style:none;padding-top:24px;font-family:'Libre Caslon Display',Georgia,serif;font-size:24px;line-height:1.2;border-top:0;position:relative}
#retirement.dir-image-break .dir-break-questions>li:before{content:'';position:absolute;top:0;left:0;width:36px;height:2px;background:var(--brass)}

/* 5. #family — D 7/5, duplicate photo removed, right column an L2 list. */
#family.dir-pair{display:grid;grid-template-columns:7fr 5fr;gap:6vw;align-items:start}
#family.dir-pair .dir-pair-copy{max-width:60ch}
#family.dir-pair h2{margin-block:14px 22px}
#family.dir-pair .lead{font-size:17px;margin-bottom:26px}

/* 6. Founder — portrait 4 col (4:5), copy 7 col. */
#founder.dir-founder{display:grid;grid-template-columns:4fr 7fr;gap:6vw;align-items:center;padding-block:var(--dir-rhythm)}
#founder.dir-founder .dir-founder-portrait{margin:0;width:100%;height:auto;aspect-ratio:4/5;max-width:383px;overflow:hidden;background:var(--stone)}
#founder.dir-founder .dir-founder-portrait img{width:100%;height:100%;object-fit:cover}
#founder.dir-founder h2{margin-block:14px 22px}
#founder.dir-founder .founder-signature img{width:min(260px,62%);height:auto}

/* 8. #process — single stone band, D 7/5: steps left, coordination right. */
#process.dir-process{padding-block:var(--dir-rhythm);background:var(--stone)}
#process.dir-process .dir-process-grid{display:grid;grid-template-columns:7fr 5fr;gap:6vw;align-items:start}
#process.dir-process .dir-process-steps{display:grid;grid-template-columns:1fr;gap:34px;margin-top:34px}
#process.dir-process .dir-process-steps>div{border-top:1px solid #c9c4b8;padding-top:22px}
#process.dir-process .dir-process-steps h3{font-size:25px;margin-bottom:12px}
#process.dir-process .dir-process-steps p{font-size:14px;margin:0}
#process.dir-process .dir-process-aside .coordination-interactive{margin-top:0}
#process.dir-process .dir-process-aside .lead{font-size:16px;margin-block:0 16px}

@media(max-width:1000px){
  #strategies.dir-lead-three .dir-lead-card{min-height:420px}
  #strategies.dir-lead-three .dir-support-card{grid-template-columns:150px minmax(0,1fr)}
  #retirement.dir-image-break .dir-break-media{height:420px}
  #retirement.dir-image-break .dir-break-panel{width:min(560px,80%)}
}

@media(max-width:760px){
  #planning.dir-home-selector .dir-12{display:block}
  #planning.dir-home-selector .path{grid-template-columns:44px minmax(0,1fr);gap:12px 16px}
  #planning.dir-home-selector .path>h3{font-size:24px;grid-column:2}
  #planning.dir-home-selector .path>div{grid-column:2;grid-row:auto}

  #strategies.dir-lead-three .dir-lead-cards{display:block}
  #strategies.dir-lead-three .dir-lead-card{min-height:0;margin-bottom:20px}
  #strategies.dir-lead-three .dir-lead-card figure{height:230px;flex:none}
  #strategies.dir-lead-three .dir-support-card{display:flex;flex-direction:column;min-height:0;margin-bottom:16px}
  #strategies.dir-lead-three .dir-support-card figure{width:100%;height:190px;min-height:0}
  #strategies.dir-lead-three .dir-support-card .dir-card-body{padding:18px}

  #retirement.dir-image-break .dir-break-media{height:auto;aspect-ratio:4/5}
  #retirement.dir-image-break .dir-break-panel{width:auto;min-width:0;max-width:none;margin:-56px 0 0;padding:30px 24px}
  #retirement.dir-image-break .dir-break-question{padding:36px 24px 48px}
  #retirement.dir-image-break .dir-break-questions{display:block}
  #retirement.dir-image-break .dir-break-questions>li{margin-bottom:22px;font-size:22px}

  #family.dir-pair{display:block}
  #family.dir-pair .dir-pair-aside{margin-top:32px}

  #founder.dir-founder{display:block;padding-block:56px}
  #founder.dir-founder .dir-founder-portrait{max-width:342px;aspect-ratio:4/5;margin-bottom:26px}

  #process.dir-process .dir-process-grid{display:block}
  #process.dir-process .dir-process-aside{margin-top:38px}
}