:root{
    --paper:#ECEEE6; --panel:#F6F7F2; --ink:#16181B; --ink2:#33373C;
    --ink3:#3E4247; --ink4:#4A4F55; --hair:#D7DAD1; --accent:#1E6648;
    --Fury:#9A3412; --Calm:#1E6648; --Mind:#1D4E89; --Body:#8A5A2B; --Chaos:#5B3A86; --Order:#B08900;
    --hatch:repeating-linear-gradient(135deg, rgba(22,24,27,0.07) 0 1px, transparent 1px 9px);
  }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Instrument Sans",Helvetica,Arial,sans-serif;background:var(--paper);color:var(--ink);
  min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 620px at 12% 8%,color-mix(in srgb,var(--tint,transparent) 20%,transparent),transparent 70%),
    radial-gradient(800px 560px at 92% 92%,color-mix(in srgb,var(--tint2,transparent) 16%,transparent),transparent 70%)}
.wrap{max-width:1040px;margin:0 auto;padding:26px 40px 0;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;padding:10px 16px;background:var(--ink);color:#F4F5F0;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.masthead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 24px;padding-bottom:14px;border-bottom:3px double var(--ink)}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-family:"Instrument Serif",serif;font-style:italic;font-size:28px;
  color:var(--ink);line-height:1;text-decoration:none}
.wordmark:hover{color:var(--accent)}
.emblem{flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wordmark:hover .emblem{transform:rotate(-8deg) scale(1.08)}
.mast-tag{margin:0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
main{flex:1;padding:36px 0 48px}

.crumbs{margin:0 0 22px;font-size:13px;color:var(--ink3)}
.crumbs a{color:var(--ink3);text-underline-offset:3px}
.crumbs a:hover{color:var(--accent)}
.kicker{margin:0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.display{margin:0;font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(44px,7vw,74px);line-height:.92;letter-spacing:-.02em}
.display em{font-style:italic;color:var(--accent)}
.lede{margin:0;font-size:19px;line-height:1.55;color:var(--ink2);max-width:34em;text-wrap:pretty}
h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

.btn-ink{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 28px;
  background:var(--ink);color:#F4F5F0;font-size:16px;font-weight:600;text-decoration:none}
.btn-ink:hover{background:#2B2F34}
.btn-link{display:inline-flex;align-items:center;gap:8px;min-height:54px;color:var(--ink);font-size:16px;font-weight:500;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.btn-link:hover{color:var(--accent)}
.btn-link.ext{display:inline-block;min-height:0}
.ext-arw{display:inline-block;margin-left:.3em;text-decoration:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}

/* ---------- one Legend ---------- */
.res{display:grid;grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:28px 56px;align-items:start}
.plate-fig{margin:0;padding:18px;border:1px solid var(--hair);border-radius:6px;background:var(--panel);
  box-shadow:0 1px 2px rgba(22,24,27,.05),0 8px 24px rgba(22,24,27,.06);display:flex;flex-direction:column;gap:14px}
.plate{aspect-ratio:5/7;border:1px solid var(--hair);border-radius:4px;overflow:hidden;background:var(--panel);
  display:flex;align-items:center;justify-content:center;
  background-image:repeating-linear-gradient(135deg,rgba(22,24,27,0.07) 0 1px,transparent 1px 9px)}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate-cap{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink3)}
.plate-cap em{font-family:"Instrument Serif",serif;font-style:italic;font-size:16px;color:var(--ink)}
.res-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.rname{margin:0;font-family:"Instrument Serif",serif;font-weight:400;font-style:italic;
  font-size:clamp(44px,7vw,74px);line-height:.92;letter-spacing:-.02em}
.rtitle{display:block;margin-top:10px;font-family:"Instrument Sans",Helvetica,Arial,sans-serif;font-style:normal;
  font-size:17px;line-height:1.4;letter-spacing:.02em;color:var(--ink3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);padding:6px 12px;font-size:13px;background:var(--panel)}
.chip .dot{width:10px;height:10px;transform:rotate(45deg);flex:0 0 auto;background:var(--c,var(--ink))}
.chip .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.7}
.chip.set{border-color:var(--accent);color:var(--accent);font-weight:600;letter-spacing:.04em}
.blurb{margin:0;font-size:18px;line-height:1.6;color:var(--ink2);max-width:32em}
.block{display:flex;flex-direction:column;gap:10px;max-width:32em}
.stats{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;margin:0}
.stats dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.stats dd{margin:0;display:contents}
.stats .st{display:flex;gap:4px;height:8px}
.stats .st i{flex:1;border-radius:3px;background:var(--hair)}
.stats .st i.on{background:var(--accent)}
.close-list{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.close-list a{font-family:"Instrument Serif",serif;font-style:italic;font-size:22px;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--hair)}
.close-list a:hover{color:var(--accent);border-color:var(--accent)}
.quiz-cta{margin-top:40px;padding:28px 0 0;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:16px 28px}
.quiz-cta p{margin:0;font-family:"Instrument Serif",serif;font-size:28px;line-height:1.15;max-width:18em}
.quiz-cta p em{color:var(--accent)}

/* ---------- index ---------- */
.intro{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px 22px;margin:0;padding:0;list-style:none}
.grid a{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.grid .plate{border-radius:6px;box-shadow:0 1px 2px rgba(22,24,27,.05),0 6px 16px rgba(22,24,27,.06);transition:transform .25s ease}
.grid a:hover .plate{transform:translateY(-3px)}
.grid .nm{font-family:"Instrument Serif",serif;font-style:italic;font-size:22px;line-height:1.05}
.grid a:hover .nm{color:var(--accent)}
.grid .tt{display:block;font-size:13px;color:var(--ink3);line-height:1.35}
.grid .rl{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.grid .dot{width:8px;height:8px;transform:rotate(45deg);background:var(--c)}

.disclaimer{margin:0;padding:14px 0 26px;border-top:1px solid var(--ink);font-size:12.5px;line-height:1.5;color:var(--ink4)}
.disclaimer a{color:var(--ink4)}

@media (max-width:760px){
  .res{grid-template-columns:minmax(0,1fr)}
  .plate-fig{max-width:340px;width:100%;justify-self:center}
}
@media (max-width:560px){
  .wrap{padding:22px 16px 0}
  main{padding:24px 0 36px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .grid .nm{font-size:19px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }