/* The 8 Hats · the8hats.com
   Built on The Truvian Group design system (styles.css v11).
   House rule: the part colors are surfaces and rules only, never text. */
:root{
  --blue:#485778; --blue-deep:#3A4762; --ink:#2B3348;
  --parch:#F7F3EC; --parch-2:#EDE5D8; --paper:#FCFAF6;
  --brick:#B4492A; --coral:#DD7454; --bronze:#6E5B3A;
  --teal:#98B8B5; --sage:#98B486; --ochre:#CEAF6E; --peri:#9291B1;
  --teal-t:#E7EDEC; --ochre-t:#F6EFDF; --sage-t:#E9EEE3; --peri-t:#EBEAEF; --coral-t:#F7EAE5;
  --square:#A89272; --circle:#DCD3C6;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Instrument Sans",var(--sans);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--parch);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.62}
.wrap{max-width:1120px;margin:0 auto;padding:0 48px}
h1,h2,h3,.q,.lead{font-family:var(--display);font-weight:600;letter-spacing:-.006em;margin:0;color:var(--blue);text-wrap:balance}
h1{font-size:64px;line-height:1.12}
h2{font-size:38px;line-height:1.2}
h3{font-size:24px;line-height:1.28}
p{margin:0 0 1.15rem}
a{color:var(--brick)}
a:hover{color:#93381E}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin:0 0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--ink);color:#fff;padding:8px 14px;z-index:99}

/* Nav */
header.nav{background:var(--parch);border-bottom:1px solid rgba(110,91,58,.22);position:sticky;top:0;z-index:60}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:96px;gap:20px}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none}
.mark svg{width:52px;height:52px;flex:none}
.mark .wm{font-family:var(--display);font-weight:600;font-size:23px;color:var(--blue);line-height:1.02;display:block}
.mark .wm small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-top:4px}
.navlinks{display:flex;gap:28px;font-size:15px;align-items:center}
.navlinks a{color:var(--bronze);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
.navlinks a:hover{color:var(--blue);border-bottom-color:var(--coral)}
.navlinks a[aria-current]{color:var(--blue);font-weight:500;border-bottom-color:var(--coral)}
.menu{display:none;font:inherit;font-size:15px;background:none;border:1px solid rgba(110,91,58,.4);border-radius:2px;padding:9px 14px;color:var(--blue);cursor:pointer}

/* Heads */
.hero{background:var(--blue-deep);color:#fff;padding:92px 0 100px}
.hero h1{color:#fff;max-width:880px}
.hero .booktitle{font-family:var(--display);font-weight:500;font-size:21px;color:var(--parch-2);margin:0 0 22px}
.hero .sub,.phead .sub{font-size:21px;line-height:1.5;color:#C4CCDC;max-width:660px;margin-top:28px}
.hero .eyebrow,.phead .eyebrow{color:#A9B4CA}
.phead{background:var(--blue-deep);color:#fff;padding:78px 0 84px}
.phead h1{color:#fff;max-width:900px;font-size:52px}
.phead .subtitle{font-family:var(--display);font-size:24px;color:var(--coral);margin:14px 0 0}
.btn{display:inline-block;background:var(--brick);color:#fff;font-size:16px;font-weight:500;padding:16px 34px;border-radius:2px;text-decoration:none;border:0;font-family:var(--sans);cursor:pointer}
.btn:hover{background:#93381E;color:#fff}
.hero .btn{background:var(--coral);color:#3A1508;font-weight:600}
.hero .btn:hover{background:#E88566;color:#3A1508}
.btn.quiet{background:transparent;color:#DDE2EC;border:1px solid rgba(255,255,255,.4)}
.btn.quiet:hover{background:rgba(255,255,255,.08);color:#fff}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}

/* Sections */
.prose{padding:82px 0}
.prose h2{margin:0 0 20px}
.prose p{max-width:680px}
.orient{padding:78px 0 64px}
.orient p{font-family:var(--display);font-weight:500;font-size:34px;line-height:1.3;max-width:800px;color:var(--blue);margin:0}
.band{padding:88px 0;background:var(--parch-2)}
.tintband{padding:74px 0;background:var(--tint,var(--parch-2));border-top:6px solid var(--accent,var(--bronze))}
.tintband p{max-width:680px}
.strip{padding:92px 0;text-align:center;background:var(--parch-2)}
.strip h2{margin:0 auto 18px;max-width:780px}
.strip p{max-width:580px;margin:0 auto;color:var(--bronze)}
.strip .btn{margin-top:30px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{padding:34px 34px 30px;border-radius:2px;border-top:6px solid var(--accent);background:var(--tint)}
.card h3{margin:0 0 10px}
.card p{margin:0;font-size:16.5px;line-height:1.55}
.card p+p{margin-top:12px}
.tag{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-bottom:14px}
.q{font-size:36px;line-height:1.2;max-width:760px}
.policy{border-left:4px solid var(--coral);padding-left:26px;max-width:700px;font-size:20px;margin:40px 0;font-family:var(--display);font-weight:500;color:var(--blue);line-height:1.4}
.policy.body{font-family:var(--sans);font-weight:400;font-size:19px;color:var(--ink);line-height:1.6}
.note{font-size:14.5px;color:var(--bronze);margin-top:12px}

/* Wheel: solid function colors, one dark label color, dark Integrator hub with a white ring */
.wheelwrap{display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:56px;align-items:center}
#wheel{width:100%;height:auto;display:block;overflow:visible}
#wheel .hat{cursor:pointer}
#wheel .seg{transition:fill-opacity .2s ease}
#wheel .hat:focus{outline:none}
#wheel .hat:focus-visible .seg{stroke:var(--ink);stroke-width:2}
#wheel .hat:hover .seg{filter:brightness(1.06)}
#wheel .hat.on .seg{stroke:#fff;stroke-width:2.5}
#wheel.focus .hat:not(.on) .seg{fill-opacity:.3} /* dim the other seven; labels stay full ink */
#wheel .hat.on .lbl{font-weight:800}
@media (prefers-reduced-motion:reduce){#wheel .seg{transition:none}}
#wheel .lbl{font-family:var(--sans);font-size:12.5px;font-weight:700;fill:var(--ink);pointer-events:none;text-anchor:middle}
#wheel .hubtext{font-family:var(--display);font-size:14px;font-weight:600;fill:#fff;text-anchor:middle;pointer-events:none}
.detail{border-radius:2px;border-top:8px solid var(--fc,var(--coral));background:var(--paper);padding:34px 34px 30px;min-height:360px;box-shadow:0 1px 0 rgba(110,91,58,.15)}
.detail h3{margin:0 0 4px}
.detail .met{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-bottom:6px}
.detail dl{margin:0}
.detail dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-top:20px}
.detail dd{margin:5px 0 0;font-size:16.5px;line-height:1.55}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:16px;margin:30px 0 0}
.tbl th{background:var(--blue-deep);color:#fff;text-align:left;padding:13px 14px;font-weight:600;font-size:14px;letter-spacing:.02em}
.tbl td{padding:13px 14px;vertical-align:top}
.tbl tbody tr:nth-child(even){background:var(--parch-2)}
.tbl tbody tr:nth-child(odd){background:var(--paper)}
.tbl td:first-child{font-weight:600;color:var(--blue);white-space:nowrap}
.tbl tr[style] td:first-child{border-left:7px solid var(--fc)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Lights: color as surface and rule only */
.lights{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:34px 0 0}
.light{border-radius:2px;padding:26px 26px 22px;border-top:6px solid var(--accent);background:var(--paper)}
.light .dot{display:inline-block;width:.72em;height:.72em;border-radius:50%;background:var(--accent);margin-right:.45em;vertical-align:.02em}
.light h3{margin:0 0 6px}
.light p{margin:0;font-size:16.5px}

/* Structure list */
.parts{display:grid;gap:22px}
.parts ol{margin:10px 0 0;padding-left:0;list-style:none;font-size:16px;color:var(--ink);display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.parts li{padding:2px 0}
.parts li.long{grid-column:1/-1}
.parts li span{color:var(--bronze);font-variant-numeric:tabular-nums;display:inline-block;min-width:26px}

/* Signup */
.signup{margin-top:22px;max-width:620px}
.signup-fallback{background:var(--paper);border:1px solid rgba(110,91,58,.3);border-radius:2px;padding:18px 20px;font-size:16px}

/* Footer */
footer{background:var(--ink);color:#AAB3C6;padding:56px 0 44px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
footer .hd{color:#fff;margin-bottom:9px;font-family:var(--display);font-weight:600}
footer a{color:#AAB3C6;text-decoration:none;display:block;margin-bottom:5px}
footer a:hover{color:#fff}
footer .wm{font-family:var(--display);font-weight:600;font-size:18px;color:#fff;margin-bottom:10px}
.fine{grid-column:1/-1;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);font-size:13px;color:#8390A8}

@media(max-width:900px){
  h1{font-size:38px}.phead h1{font-size:34px}h2{font-size:28px}.q{font-size:27px}
  .orient p{font-size:24px}.wrap{padding:0 16px}
  header.nav .wrap{height:76px}
  .mark svg{width:42px;height:42px}.mark .wm{font-size:20px}
  .menu{display:block}
  .navlinks{display:none;position:absolute;top:76px;left:0;right:0;background:var(--parch);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid rgba(110,91,58,.22);padding:6px 16px 14px}
  .navlinks a{padding:12px 0;border-bottom:1px solid rgba(110,91,58,.12)}
  .navlinks a[aria-current]{border-bottom-color:rgba(110,91,58,.12)}
  header.nav.open .navlinks{display:flex}
  .cols2,.cardgrid,.wheelwrap,.lights{grid-template-columns:1fr;gap:22px}
  .hero{padding:64px 0 70px}.phead{padding:52px 0 56px}.prose{padding:56px 0}.band,.strip{padding:60px 0}
  .hero .sub,.phead .sub{font-size:18px}
  .detail{min-height:0;padding:26px 22px}.card{padding:26px 22px 24px}
  .parts ol{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  /* stacked tables on phones */
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{display:block;width:100%}
  .tbl.stack tr{margin-bottom:14px;border-top:5px solid var(--fc,var(--blue-deep))}
  .tbl.stack tr[style] td:first-child{border-left:0}
  .tbl.stack td{padding:8px 14px}
  .tbl.stack td[data-h]::before{content:attr(data-h);display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-bottom:2px}
  .tbl.stack td:first-child{white-space:normal;font-size:19px;padding-top:12px}
}

/* Trademark symbol */
.tm{font-size:.55em;vertical-align:super;line-height:0;margin-left:.05em;font-weight:500}

/* v3.9: dashboard, home dashboard band, book cover, teaser strips */
.dashband{background:var(--blue-deep);color:#fff;padding:64px 0;text-align:center}
.dashband h2{color:#fff;margin:0 auto 26px;max-width:760px}
.dashband .btn{background:var(--coral);color:#3A1508;font-weight:600}
.dashband .btn:hover{background:#E88566;color:#3A1508}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid rgba(72,87,120,.5)}
.btn.ghost:hover{background:rgba(72,87,120,.08);color:var(--blue)}
.btnrow.center{justify-content:center}
.teaser{font-size:21px;line-height:1.5;color:var(--ink)!important;max-width:720px!important}
.detail .more{margin:22px 0 0;font-size:16px}
.dash{margin:0;background:var(--paper);border-radius:2px;box-shadow:0 1px 0 rgba(110,91,58,.15);max-width:860px}
.dash .dmission,.dash .dhead,.dash .drow{display:grid;grid-template-columns:170px 1fr 150px;gap:16px;align-items:center;padding:14px 22px}
.dash .dmission{background:var(--blue-deep);color:#fff;padding:20px 22px}
.dash .dmission .dhat{color:#C4CCDC;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.dash .dmission .dmet{font-family:var(--display);font-weight:600;font-size:21px}
.dash .dhead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);font-weight:600;padding-top:18px;padding-bottom:8px}
.dash .drow{border-top:1px solid rgba(110,91,58,.14);border-left:7px solid var(--fc);padding-left:15px}
.dash .dhat{font-weight:600;color:var(--blue)}
.dash .dmission .dhat{font-weight:600}
.slots{display:inline-flex;gap:7px;align-items:center}
.slot{width:18px;height:18px;border-radius:50%;border:2px solid var(--lc);opacity:.35}
.slot.lit{background:var(--lc);opacity:1}
.dmission .slot{border-color:#fff}.dmission .slot.lit{background:var(--lc);border-color:var(--lc)}
.lw{margin-left:8px;font-size:14px;color:var(--bronze)}
.dmission .lw{color:#C4CCDC}
.dash figcaption{padding:14px 22px 18px;font-size:14.5px;color:var(--bronze);border-top:1px solid rgba(110,91,58,.14)}
.bookgrid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:64px;align-items:start}
.cover{width:100%;height:auto;display:block;border-radius:2px;box-shadow:0 18px 40px rgba(43,51,72,.22)}
.parts.row{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.navlinks{gap:20px;font-size:14.5px}}
@media(max-width:900px){
  .bookgrid,.parts.row{grid-template-columns:1fr;gap:28px}
  .bookgrid .cover{max-width:260px}
  .dash .dmission,.dash .dhead,.dash .drow{grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px}
  .dash .drow{padding-left:12px}
  .dash .dhead{display:none}
  .dash .dmet{grid-column:1;grid-row:2;font-size:15px}
  .dash .dmission .dmet{font-size:18px}
  .dash .dlt{grid-column:2;grid-row:1 / span 2}
  .lw{display:none}
  .dashband{padding:48px 0}
}
.parts.row ol{grid-template-columns:1fr}
/* Seven nav items: switch to the menu button below 1040px so the wordmark never squeezes */
@media(max-width:1040px){
  header.nav .wrap{position:relative}
  .menu{display:block}
  .navlinks{display:none;position:absolute;top:96px;left:0;right:0;background:var(--parch);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid rgba(110,91,58,.22);padding:6px 48px 14px;font-size:15px}
  .navlinks a{padding:12px 0;border-bottom:1px solid rgba(110,91,58,.12)}
  .navlinks a[aria-current]{border-bottom-color:rgba(110,91,58,.12)}
  header.nav.open .navlinks{display:flex}
}
@media(max-width:900px){.navlinks{top:76px;padding:6px 16px 14px}}

/* v4.0: selectable Integrator hub, links on dark heads */
#wheel .hubg{cursor:pointer}
#wheel .hubg:focus{outline:none}
#wheel .hubg:focus-visible .ring{stroke:var(--ink);stroke-width:2}
#wheel .hubg:hover{filter:brightness(1.12)}
#wheel .hubg.on .ring{stroke:var(--coral);stroke-width:3}
.phead .sub a{color:#fff}
.phead .sub a:hover{color:var(--parch-2)}

/* v4.1: sector wheel */
.sectabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 40px}
.sectabs .tag{margin:0 12px 0 0}
.sectab{font:inherit;font-size:15px;padding:9px 18px;border-radius:2px;border:1px solid rgba(72,87,120,.45);background:transparent;color:var(--blue);cursor:pointer}
.sectab:hover{background:rgba(72,87,120,.08)}
.sectab[aria-pressed="true"]{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.detail dd.big{font-family:var(--display);font-weight:600;font-size:22px;color:var(--blue);line-height:1.3}
.detail dd.note{margin-top:12px;color:var(--bronze);font-size:15.5px}
.detail ul.others{list-style:none;margin:0;padding:0;font-size:15.5px}
.detail ul.others li{padding:4px 0}
.detail ul.others b{display:inline-block;min-width:104px;color:var(--bronze);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.fulltable{margin:36px 0 0}
.fulltable summary{cursor:pointer;color:var(--brick);font-weight:500;font-size:17px}
@media(max-width:900px){.sectabs .tag{width:100%;margin:0 0 4px}.detail ul.others b{min-width:0;display:block}}
.band h2{margin:0 0 20px}
.detail ul.titles{list-style:none;margin:0;padding:0;font-size:15.5px;columns:2;column-gap:24px}
.detail ul.titles li{padding:3px 0;break-inside:avoid}