:root{
  color-scheme: light;
  --ground:#FBF8F3; --paper:#FFFFFF; --ink:#1E2226; --mut:#4A5058; --faint:#6B7178;
  --teal:#1D5C63; --teal-dk:#123E43; --tint:#E6EFEF; --warm:#8A4F10; --warm-tint:#F7EEE3;
  --line:#D6D0C4; --line-dk:#C9C2B4; --ok:#2E6B3A; --bad:#9A2A1E;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Atkinson Hyperlegible', 'Segoe UI', Verdana, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55}
a{color:var(--teal)} a:hover{color:var(--teal-dk)}
:focus-visible{outline:3px solid var(--warm);outline-offset:2px;border-radius:3px}
[tabindex="-1"]:focus{outline:none}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:20px}
.narrow{max-width:720px}
.sr-only{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--paper);padding:8px 12px;z-index:20}
.skip:focus{left:12px}

/* top bar */
.top{position:sticky;top:0;z-index:10;background:var(--ground);border-bottom:2px solid var(--ink)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-block:12px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);margin-right:auto}
.brand small{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.brand b{font-family:var(--serif);font-size:21px;line-height:1.1}
nav.main{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;font-size:15px}
nav.main a{text-decoration:none;color:var(--ink);padding:8px 0}
nav.main a:hover{color:var(--teal)}
nav.main a[aria-current="page"]{color:var(--teal);box-shadow:inset 0 -2px 0 var(--teal)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:7px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid var(--teal);background:var(--teal);color:#fff}
.btn:hover{background:var(--teal-dk);border-color:var(--teal-dk);color:#fff}
.btn.ghost{background:transparent;color:var(--teal)}
.btn.ghost:hover{background:var(--tint);color:var(--teal-dk)}
.btn.small{min-height:36px;padding:6px 12px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:default}
nav.main .btn{padding:6px 14px;min-height:40px;color:#fff}

main{padding-block:10px 60px}
h1,h2,h3{font-family:var(--serif);line-height:1.15;text-wrap:balance}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin:0}
section.block{padding-block:40px 8px}
section.block+section.block{border-top:1px solid var(--line)}
.block h2{font-size:30px;margin:4px 0 12px}
.block>p,.block .lede{max-width:44em}
.lede{font-size:19px}
.mut{color:var(--mut)}
.small{font-size:14.5px}

/* landing hero */
.hero{padding-block:44px 34px}
.hero h1{font-size:clamp(38px,6vw,60px);margin:8px 0 6px;letter-spacing:-.01em}
.hero .subtitle{font-family:var(--serif);font-size:clamp(20px,2.8vw,27px);color:var(--teal);margin:0 0 18px}
.hero .lede{max-width:36em;margin:0 0 22px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta .note{font-size:14.5px;color:var(--mut)}

.hero h1{max-width:15em}
.cta-note{margin:14px 0 0;font-size:15.5px;color:var(--mut)}
.more{margin:16px 0 0}
/* situations to tap */
.sits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.sit{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line-dk);border-radius:10px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.sit:hover{border-color:var(--teal);box-shadow:0 3px 12px rgba(29,92,99,.14);transform:translateY(-2px);color:var(--ink)}
.sit b{font-family:var(--serif);font-size:20px;line-height:1.2}
.sit span{font-size:15.5px;color:var(--mut)}
.sit em{margin-top:auto;padding-top:6px;font-style:normal;font-size:14px;font-weight:700;color:var(--teal)}
.sit em::after{content:" \2192"}
/* the open sheets, each one a link */
.open-h{font-family:var(--sans);font-size:16px;margin:18px 0 6px;scroll-margin-top:110px}
.openlist{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px}
.openlist a{display:flex;gap:8px;padding:6px 0;text-decoration:none;color:var(--ink);border-bottom:1px dotted var(--line-dk)}
.openlist a:hover{color:var(--teal)}
/* the four parts of the guide */
.parts{list-style:none;margin:14px 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.parts li{background:var(--paper);border:1px solid var(--line-dk);border-left:5px solid var(--teal);border-radius:8px;padding:12px 16px}
.parts b{display:block;font-family:var(--serif);font-size:19px}
.parts span{font-size:15px;color:var(--mut)}
.parts small{display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--teal)}
@media (prefers-reduced-motion:reduce){.sit{transition:none}.sit:hover{transform:none}}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
.three>div{border-top:3px solid var(--teal);padding-top:10px}
.three b{font-family:var(--serif);font-size:19px}
.three p{margin:6px 0 0;font-size:15.5px;color:var(--mut)}

.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.card{background:var(--paper);border:1px solid var(--line-dk);border-radius:10px;padding:16px 18px}
.card h3{font-size:19px;margin:0 0 6px}
.card p{margin:0;font-size:15.5px;color:var(--mut)}

/* model flow (static copy of the guide's diagram) */
.flow{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:25px;border-top:3px solid var(--tint)}
.fl-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 8px}
.fl-num{width:50px;height:50px;border-radius:50%;background:var(--paper);border:3px solid var(--teal);color:var(--teal);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;position:relative}
.fl-step.last .fl-num{background:var(--teal);color:#fff}
.fl-name{font-family:var(--serif);font-weight:700;font-size:18px}
.fl-txt{font-size:15px;color:var(--mut);max-width:14em}

/* table of contents */
.layers{display:grid;gap:14px;margin-top:14px}
.layer{border-radius:12px;padding:14px 16px;border:1px solid var(--line-dk);background:var(--paper)}
.layer.personal{background:var(--tint);border-color:#BFD3D3}
.layer.mgmt{background:#FCF7F0;border-color:#E3CFB6}
.layer-tag{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.layer.mgmt .layer-tag{color:var(--warm)}
.layer>p{margin:4px 0 10px;font-size:15px;color:var(--mut)}
.sers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
details.ser{background:var(--paper);border:1px solid var(--line-dk);border-radius:8px}
details.ser summary{cursor:pointer;padding:10px 12px;list-style:none;min-height:44px}
details.ser summary::-webkit-details-marker{display:none}
details.ser summary b::before{content:"+";display:inline-block;width:16px;color:var(--teal)}
details.ser[open] summary b::before{content:"\2212"}
details.ser summary span{display:block;font-size:13px;color:var(--teal);font-weight:700;padding-left:16px}
details.ser ul{margin:0;padding:6px 14px 12px 30px;border-top:1px solid var(--line);font-size:14.5px}
details.ser li{padding:2px 0}
.code{font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.draft{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warm);background:var(--warm-tint);border:1px solid #E3CFB6;border-radius:10px;padding:1px 8px;margin-left:6px;vertical-align:2px}

.care{background:var(--warm-tint);border:1px solid #E3CFB6;border-radius:10px;padding:16px 20px;max-width:46em}
.care h3{margin:0 0 6px;font-size:19px;color:var(--warm)}
.care ul{margin:6px 0 0;padding-left:20px}
.care li{margin:4px 0}

.starter{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center}
.starter ul{margin:8px 0 18px;padding-left:20px}

/* forms */
form.req{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:720px;margin-top:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1 / -1}
.field label,.field legend{font-weight:700;font-size:15px}
.field .hint{font-size:13.5px;color:var(--mut);font-weight:400}
input[type=text],input[type=email],select,textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line-dk);border-radius:7px;background:var(--paper);color:var(--ink);min-height:46px;width:100%}
textarea{min-height:96px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{width:20px;height:20px;margin-top:3px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:15px;min-height:1.3em}
.status.ok{color:var(--ok);font-weight:700}
.status.bad{color:var(--bad);font-weight:700}

.author{max-width:46em}

footer.site{border-top:1px solid var(--line);padding-block:22px 36px;color:var(--mut);font-size:14px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
footer.site a{color:var(--mut)}

/* text pages */
.prose h1{font-size:40px;margin:30px 0 8px}
.prose h2{font-size:24px;margin:30px 0 8px}
.prose p,.prose li{max-width:40em}
.log h2{font-size:22px;border-top:1px solid var(--line);padding-top:22px}

@media (max-width:760px){
  body{font-size:16.5px}
  .three,.who,.starter,.sits,.parts,.openlist{grid-template-columns:1fr}
  form.req{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:10px}
  .flow::before{left:24px;right:auto;top:20px;bottom:20px;border-top:0;border-left:3px solid var(--tint)}
  .fl-step{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:12px;text-align:left;align-items:center;padding:0}
  .fl-num{grid-row:1 / span 2}
  .fl-txt{max-width:none}
  .top{position:static}
  nav.main{gap:2px 14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* the naming question, the topic list and the style grid: shared by the public pages */
.poll{margin:22px 0 6px;padding:16px 18px;border:1px dashed var(--line-dk);border-radius:12px;background:var(--paper);max-width:46em}
.poll h3{font-size:19px;margin:0 0 6px}
.poll p{margin:0 0 10px}
.poll-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.poll-opts .opt{font:inherit;font-size:15.5px;font-weight:700;min-height:44px;padding:8px 16px;border:1px solid var(--line-dk);border-radius:22px;background:var(--ground);color:var(--ink);cursor:pointer;display:inline-flex;flex-direction:row;align-items:center}
.poll-opts .opt:hover{border-color:var(--teal)}
.poll-opts .opt[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:none}
.poll-opts .opt:disabled{opacity:.6;cursor:default}
.poll-other label{display:block;font-size:15px;font-weight:700;margin-bottom:4px}
.poll-other div{display:flex;gap:8px;flex-wrap:wrap}
.poll-other input{flex:1 1 220px;font:inherit;padding:9px 12px;border:1px solid var(--line-dk);border-radius:8px;min-height:44px}
.poll .fine{font-size:14px;color:var(--mut);margin:6px 0 0}
.topics{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topics a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1px solid var(--line-dk);border-radius:20px;background:var(--paper);text-decoration:none;color:var(--ink);font-size:15.5px}
.topics a:hover{border-color:var(--teal);color:var(--teal)}
.topics .lk{display:inline-block;width:9px;height:8px;border-radius:2px;background:var(--mut);position:relative;margin-left:1px;opacity:.7}
.topics .lk::before{content:"";position:absolute;left:1.5px;top:-5px;width:4px;height:5px;border:1.5px solid var(--mut);border-bottom:0;border-radius:3px 3px 0 0}
.stylesq{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;max-width:520px}
.stylesq div{border:1px solid var(--line-dk);border-radius:9px;padding:9px 12px;background:var(--ground);font-size:14.5px;color:var(--mut)}
.stylesq b{display:block;color:var(--ink);font-size:15.5px}
.stylesq div.on{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset;background:var(--tint)}
.baseline{font-family:var(--serif);font-size:19px;line-height:1.35;margin:12px 0;padding-left:14px;border-left:4px solid var(--teal);max-width:30em}
@media (max-width:760px){.topics{gap:6px}.topics a{min-height:36px;padding:4px 11px;font-size:14.5px}}
@media print{.poll{display:none !important}}

/* The eight drift patterns on four axes. One row per domain. Push grows left from the centre,
   pull back grows right. The centre is "reading true", and it names the two intangibles that hold there.
   Shared by the guide and the public pages. */
.axes{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ax-key,.ax-row{display:grid;grid-template-columns:128px minmax(0,1fr) 158px minmax(0,1fr);gap:10px}
.ax-key{align-items:end;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ax-key .l{text-align:right}
.ax-key .c{text-align:center;color:var(--teal);font-size:11.5px;letter-spacing:.05em;line-height:1.15}
.ax-key small{display:block;font-weight:400;letter-spacing:0;text-transform:none;font-size:12.5px}
.ax-row{align-items:stretch}
.ax-dom{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.ax-dom b{font-family:var(--serif);font-size:18px;color:var(--teal);display:flex;align-items:center;gap:4px}
.ax-dom span{font-size:13px;color:var(--mut)}
/* the centre of each line: a true reading, and the two intangibles that hold there */
.ax-mid{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:6px 8px;text-align:center;
  border-inline:2px solid var(--ink);background:var(--paper)}
.ax-int{font-size:12.5px;font-weight:700;line-height:1.2;color:var(--teal-dk,#123E43)}
a.ax-int{text-decoration:none}
a.ax-int:hover{text-decoration:underline}
.ax-ml{display:none;font-size:12.5px;color:var(--mut)}
.ax-row.dim .ax-mid{background:transparent}
.axes .pt{min-height:0}
.axes .pt:not(.pull){text-align:left}
/* plain tiles, for pages that explain the picture without linking anywhere */
.ax-tile{background:var(--paper);border:1px solid var(--line-dk);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ax-tile.pull{background:var(--tint);border-color:#BFD3D3}
.ax-tile b{font-size:15.5px}
.ax-tile span{font-size:14px;color:var(--mut)}
.ax-row.dim{opacity:.5}
.ax-tile.on{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset}
/* a reader's own result: bars in three wide bands, never a fine scale */
.ax-bar{display:flex;flex-direction:column;gap:4px;justify-content:flex-end;min-width:0;padding-block:4px}
.ax-bar .nm{font-weight:700;font-size:15px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ax-bar .bd{font-weight:400;font-size:13px;color:var(--mut)}
.ax-bar.push .nm{justify-content:flex-end;text-align:right}
.ax-mkey{display:none;margin:0;font-size:13.5px;color:var(--mut)}
.ax-track{display:flex;height:22px;border-radius:6px;background:var(--paper);border:1px solid var(--line-dk);overflow:hidden}
.ax-bar.push .ax-track{justify-content:flex-end}
.ax-track i{display:block;background:var(--teal);height:100%}
.ax-bar.pull .ax-track i{background:#6E9FA5}
.ax-bar.hi .nm{color:var(--teal-dk,#123E43)}
.ax-bar.hi .ax-track{box-shadow:0 0 0 2px var(--ink)}
@media (max-width:760px){
  .ax-key{display:none}
  .ax-mkey{display:block}
  .ax-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}
  .ax-dom{grid-column:1 / -1;order:-2;flex-direction:row;align-items:baseline;gap:8px;justify-content:flex-start;flex-wrap:wrap;padding-top:6px}
  .ax-mid{grid-column:1 / -1;order:-1;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:2px 10px;min-height:0;text-align:left;
    border-inline:0;border-left:3px solid var(--ink);padding:3px 0 3px 9px;background:transparent}
  .ax-ml{display:inline}
  .ax-int{font-size:13.5px}
  .ax-int + .ax-int::before{content:"· ";font-weight:400;color:var(--mut)}
  .axes .pt-s{position:static;margin-top:4px}
  .axes .pt{padding:10px 10px 8px}
  .ax-bar .nm{font-size:14px}
}