/* ============================================================
   Components. Everything is drawn from the supplied screenshots;
   the only genuinely new things are the navigation and the three
   diagrams, both marked below.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-body);
  line-height:var(--t-body-lh);letter-spacing:var(--t-body-ls);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--h-section);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---------- headers: Boldons, coloured by level ---------- */
.h-title,.h-section,.h-figure{font-family:var(--f-head);font-weight:400;margin:0;text-wrap:balance}
.h-title{font-size:var(--t-title);line-height:var(--t-title-lh);letter-spacing:var(--t-title-ls);color:var(--h-title)}
.h-section{font-size:var(--t-section);line-height:var(--t-section-lh);letter-spacing:var(--t-section-ls);color:var(--h-section)}
.h-figure{font-size:var(--t-figure);line-height:1.3;color:var(--h-figure)}
@media (max-width:720px){:root{--t-title:34px;--t-section:22px;--t-body:17px}}

/* ---------- page frame ---------- */
.wrap{width:100%;padding-inline:var(--pad)}
.topline{height:var(--hairline);background-image:repeating-linear-gradient(to right,
  var(--hair) 0 var(--dash),transparent var(--dash) calc(var(--dash)*2))}
.rule{border:0;height:var(--hairline);background:var(--hair);margin:var(--sp-64) 0 0}
.page-title{text-align:center;margin-top:var(--sp-64)}
.page-full{margin:var(--sp-16) auto 0;text-align:center;max-width:52ch;
  font-style:italic;font-size:17px;line-height:1.5;color:var(--muted)}

/* Chotu perches at the top of each tool page, straddling the dashed rule.
   He sits to the side of the centred title, so he never covers text. */
.tool-top{position:relative;padding-top:36px}
.peek{position:absolute;top:0;right:clamp(16px,6vw,150px);
  width:calc(clamp(96px,9.5vw,150px) * var(--pscale,1));height:auto;
  transform:rotate(var(--tilt,-5deg));transform-origin:bottom center;
  z-index:2;pointer-events:none;user-select:none}
@media (max-width:820px){.peek{width:calc(88px * var(--pscale,1));right:12px;top:6px}}
@media (max-width:520px){.peek{width:calc(70px * var(--pscale,1))}}
.stack{display:flex;flex-direction:column;gap:var(--sp-16)}
.p{margin:0;max-width:var(--measure-right)}
.p + .p,.p + .list,.list + .p,.list + .list,.p + .fig,.p + .figs,.list + .figs{margin-top:var(--sp-24)}
.list li + li{margin-top:10px}
.list li > .list{margin-top:10px;margin-bottom:6px}
ul.list,ul.list ul,ol.list ul{list-style-type:disc}
.p--wide{max-width:none}
.p--i{font-style:italic}
.gap{height:calc(var(--t-body) * var(--t-body-lh))}
.list{margin:0;padding-inline-start:30px}
.list li{margin:0}
.list .list{padding-inline-start:30px}
.p a,.list a{text-decoration:underline;text-underline-offset:2px}

/* ---------- two-column split with its divider ---------- */
.split{display:grid;grid-template-columns:413fr 775fr;column-gap:var(--col-gap);
       row-gap:var(--sp-64);position:relative;margin-top:var(--sp-64)}
.split::before{content:"";position:absolute;top:0;bottom:0;
  left:calc((100% - var(--col-gap)) * 413 / 1188);width:var(--hairline);background:var(--hair)}
.split__l{padding-right:var(--col-gap)}
.split__l .p,.split__l .list{max-width:var(--measure-left)}
.block + .block{margin-top:var(--sp-64)}
.block > .h-section + *{margin-top:var(--sp-24)}
@media (max-width:860px){
  .split{grid-template-columns:1fr;row-gap:var(--sp-40)}
  .split::before{display:none}
  .split__l{padding-right:0;padding-bottom:var(--sp-40);border-bottom:var(--hairline) solid var(--hair)}
}

/* ---------- dashed step box + connector ---------- */
.steps{display:flex;flex-direction:column;align-items:flex-start}
.step{width:var(--box-w);max-width:100%;border:var(--hairline) dashed var(--hair);
      padding:var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-16)}
.step__pair{display:flex;flex-direction:column;gap:var(--sp-16)}
.step__t{font-style:italic;margin:0;font-size:var(--t-sub);line-height:1.4}
.step__b{margin:0}
.step__list{padding-inline-start:22px}
.step__list li + li{margin-top:8px}
.connector{width:var(--hairline);height:var(--connector);margin-left:calc(var(--box-w) / 2);
  background-image:repeating-linear-gradient(to bottom,var(--hair) 0 var(--dash),
    transparent var(--dash) calc(var(--dash)*2))}
/* the small prompt lists that sit beside AOIIV's step boxes */
.synth-row{display:grid;grid-template-columns:var(--box-w) minmax(0,1fr);column-gap:var(--sp-40);align-items:start}
.aside{font-size:var(--t-aside);line-height:1.45;color:var(--aside);margin:0;padding-inline-start:16px;max-width:52ch}
.aside li{margin:0 0 2px}
@media (max-width:760px){.synth-row{grid-template-columns:1fr;row-gap:var(--sp-16)}}

/* ---------- figures ---------- */
.fig{margin:0;display:flex;flex-direction:column;gap:var(--sp-16)}
.fig img{display:block;border-radius:2px}
.fig__stack{display:flex;flex-direction:column;gap:20px}
.fig__stack img{width:100%;height:auto}
.fig figcaption{font-style:italic;font-size:var(--t-small)}
.figs{display:flex;flex-direction:column;gap:var(--sp-40)}

/* ---------- dashed callout ---------- */
.callout{grid-column:1 / -1;position:relative;z-index:1;width:min(var(--callout-w),100%);
  margin-inline:auto;background:var(--page);border:var(--hairline) dashed var(--hair);
  padding:var(--sp-24) var(--sp-40);display:flex;flex-direction:column;gap:var(--sp-16)}

/* ---------- intro: goal cards (rounded grey, from intro page 1) ---------- */
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);margin-top:var(--sp-40)}
@media (max-width:1000px){.goals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.goals{grid-template-columns:1fr}}
.goal{border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.goal[data-c=yellow]{background:var(--h-title);color:var(--ink)}
.goal[data-c=green]{background:var(--h-section);color:#fff}
.goal[data-c=pink]{background:var(--h-figure);color:var(--ink)}
.goal b{font-weight:700;font-size:var(--t-sub);line-height:1.35}
.goal span{font-size:17px;line-height:1.55}

/* ---------- intro: tool cards — flat colour blocks that link ---------- */
.toolcards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:var(--sp-40)}
@media (max-width:980px){.toolcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.toolcards{grid-template-columns:1fr}}
.tc{border-radius:var(--radius);padding:20px;display:grid;place-items:center;text-align:center;
    text-decoration:none;min-height:150px;transition:transform .15s}
.tc:hover{transform:translateY(-3px)}
.tc__name{font-family:var(--f-head);font-weight:400;font-size:21px;letter-spacing:0;line-height:1.3}
.tc[data-c=yellow]{background:var(--h-title);color:var(--ink)}
.tc[data-c=green]{background:var(--h-section);color:#fff}
.tc[data-c=pink]{background:var(--h-figure);color:var(--ink)}

/* ---------- DIAGRAM 1: the shared spine of every tool page ---------- */
/* static on the tools page; anchor navigation on a tool page */
.spine{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin-top:var(--sp-24)}
.spine__n{flex:1 1 150px;min-width:140px;border:var(--hairline) dashed var(--hair);
  padding:16px 16px 18px;display:flex;flex-direction:column;gap:4px;text-decoration:none;background:var(--page)}
.spine__n b{font-family:var(--f-head);font-size:15px;font-weight:400;color:var(--h-figure);line-height:1.4}
.spine__n span{font-size:16px;line-height:1.5;color:var(--muted)}
.spine__n[aria-current]{border-style:solid}
.spine__a{flex:0 0 26px;display:grid;place-items:center;font-size:14px;color:var(--muted)}
@media (max-width:720px){.spine__a{flex-basis:100%;height:18px}}

/* ---------- DIAGRAM 2: goals × tools ---------- */
.matrix{margin-top:var(--sp-40);overflow-x:auto}
.matrix table{border-collapse:collapse;width:100%;min-width:660px;font-size:17px}
.matrix th,.matrix td{padding:0;text-align:left;vertical-align:middle}
.matrix thead th{padding:0 0 12px;font-weight:400;font-size:var(--t-sub)}
.matrix thead th a{text-decoration:none;border-bottom:1px solid transparent}
.matrix thead th a:hover{border-bottom-color:var(--ink)}
.matrix tbody th{font-weight:400;padding:11px 18px 11px 0;width:38%;line-height:1.45}
.matrix td{border-left:var(--hairline) solid var(--hair);height:42px;position:relative}
.matrix td:first-of-type{border-left:0}
.matrix .gbar{position:absolute;inset:6px -1px;border-radius:2px}
.matrix .gbar[data-c=yellow]{background:var(--h-title)}
.matrix .gbar[data-c=green]{background:var(--h-section)}
.matrix .gbar[data-c=pink]{background:var(--h-figure)}

/* ---------- DIAGRAM 3: the AOIIV loop ---------- */
.loop{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--sp-24)}
.loop__s{border:var(--hairline) dashed var(--hair);padding:11px 15px;font-family:var(--f-head);
  font-weight:400;font-size:13px;letter-spacing:.02em}
.loop__a{color:var(--muted);font-size:14px}
.loop__back{width:100%;font-size:13px;color:var(--muted);font-style:italic;
  border-top:var(--hairline) dashed var(--hair);padding-top:8px;margin-top:4px}

/* ---------- navigation (new) ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:70;background:var(--page);
     border-bottom:var(--hairline) solid var(--hair)}
.bar__in{padding:14px var(--pad);display:flex;align-items:center;gap:var(--sp-24);flex-wrap:wrap}
.brand{font-family:var(--f-head);font-weight:400;font-size:14px;background:none;border:0;
  padding:0;cursor:pointer;color:var(--h-section);white-space:nowrap}
.nav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap;align-items:baseline}
.nav__g{display:flex;gap:14px;align-items:baseline}
.nav__g + .nav__g{padding-left:14px;border-left:var(--hairline) solid var(--hair)}
.nav a{font-size:17px;text-decoration:none;border-bottom:1.5px solid transparent;padding-bottom:1px}
.nav a:hover{border-bottom-color:var(--ink)}
.nav a[aria-current]{border-bottom-color:var(--ink);font-weight:700}
@media (max-width:860px){.nav{margin-left:0;width:100%;gap:10px}.nav__g{flex-wrap:wrap}}

/* a stack of papers; hovering, focusing or tapping it fans the tools out */
.pick{position:relative;padding-left:14px;border-left:var(--hairline) solid var(--hair)}
.pick__btn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;cursor:pointer}
.pick__label{font-size:17px}
.pick__label[data-on]{font-weight:700;border-bottom:1.5px solid var(--ink);padding-bottom:1px}
.pick__papers{position:relative;display:block;width:24px;height:20px;flex:none}
.pick__papers i{position:absolute;inset:0;background:var(--page);border:var(--hairline) solid var(--ink);
  border-radius:2px;transition:transform .22s ease}
.pick__papers i:nth-child(1){transform:translate(3px,3px) rotate(7deg)}
.pick__papers i:nth-child(2){transform:translate(1.5px,1.5px) rotate(-4deg)}
.pick:hover .pick__papers i:nth-child(1),.pick:focus-within .pick__papers i:nth-child(1),
.pick[data-open="1"] .pick__papers i:nth-child(1){transform:translate(6px,-3px) rotate(13deg)}
.pick:hover .pick__papers i:nth-child(2),.pick:focus-within .pick__papers i:nth-child(2),
.pick[data-open="1"] .pick__papers i:nth-child(2){transform:translate(-5px,-2px) rotate(-10deg)}

.pick__list{position:absolute;right:0;top:100%;z-index:80;margin:0;padding:12px 0 0;list-style:none;
  display:flex;flex-direction:column;gap:7px;min-width:214px;
  opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .15s ease,transform .15s ease}
.pick:hover .pick__list,.pick:focus-within .pick__list,.pick[data-open="1"] .pick__list{
  opacity:1;pointer-events:auto;transform:none}
.pick__list a{display:flex;gap:10px;align-items:baseline;background:var(--page);
  border:var(--hairline) solid var(--ink);border-radius:3px;padding:11px 14px;
  text-decoration:none;font-size:17px;box-shadow:3px 3px 0 rgba(0,0,0,.07);
  transition:transform .14s ease,background .14s ease,color .14s ease}
.pick__list li:nth-child(odd) a{transform:rotate(-.7deg)}
.pick__list li:nth-child(even) a{transform:rotate(.6deg)}
/* each sheet picks up its tool's own colour, the same one its card uses */
.pick__list a:hover,.pick__list a:focus-visible,.pick__list a[aria-current]{transform:none}
.pick__list a[data-c=yellow]:hover,.pick__list a[data-c=yellow]:focus-visible,
.pick__list a[data-c=yellow][aria-current]{background:var(--h-title);color:var(--ink)}
.pick__list a[data-c=green]:hover,.pick__list a[data-c=green]:focus-visible,
.pick__list a[data-c=green][aria-current]{background:var(--h-section);color:#fff}
.pick__list a[data-c=pink]:hover,.pick__list a[data-c=pink]:focus-visible,
.pick__list a[data-c=pink][aria-current]{background:var(--h-figure);color:var(--ink)}
.pick__n{font-variant-numeric:tabular-nums;font-size:12px;opacity:.55}
.pick__list a:hover .pick__n,.pick__list a[aria-current] .pick__n{opacity:.75}
@media (max-width:860px){
  .pick{padding-left:0;border-left:0;width:100%}
  .pick__list{right:auto;left:0;min-width:100%}
}
@media (prefers-reduced-motion:reduce){.pick__papers i,.pick__list,.pick__list a{transition:none}}

.pager{border-top:var(--hairline) solid var(--hair);margin-top:var(--sp-64)}
.pager__in{padding:var(--sp-40) var(--pad) var(--sp-64);
  display:flex;gap:var(--sp-24);justify-content:space-between;flex-wrap:wrap}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:4px;max-width:46%}
.pager small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pager b{font-family:var(--f-head);font-size:20px;font-weight:400;color:var(--h-section);line-height:1.35}
.pager .next{text-align:right;align-items:flex-end;margin-left:auto}
@media (max-width:620px){.pager a{max-width:100%}.pager .next{text-align:left;align-items:flex-start}}


/* the guiding-questions block reads as one unit, not six spaced lines */
.callout .list{line-height:1.5}
.callout .list li + li{margin-top:5px}
.split > .callout{margin-top:calc(var(--sp-24) - var(--sp-64))}