/* Lynnerup & Ansell palette and type, matching www.lynnerupansell.com */
:root{
  --ivory:#FDFBF5; --sand:#F3EDE5; --maroon:#7C0000; --maroon-deep:#5D0000;
  --navy:#2C3E50; --navy-deep:#212E3C; --navy-darkest:#161F28; --navy-light:#9BB1C8; --navy-tint:#CDD8E3;
  --camel:#C8A97E; --camel-tint:#E9DCCB; --camel-deep:#725630;
  --steel:#5A7D9A; --steel-tint:#DDE5EB; --steel-deep:#435D73;
  --rust:#A85A32; --rust-tint:#F1DCD1; --rust-deep:#7E4325;
  --grey:#8C8881; --grey-deep:#696660; --gold:#CFA629; --rule:rgba(140,136,129,.28);
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ivory);color:var(--navy-deep);font-family:var(--serif);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (min-width:1024px){.wrap{padding:0 64px}}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--navy);margin:0}
h2{font-size:1.9rem;line-height:1.2}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-deep);margin:0}
.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:100;transform:translateY(-150%);background:var(--maroon);color:var(--ivory);padding:.6rem 1rem;font-family:var(--sans);font-size:.85rem;text-decoration:none}
.skip-link:focus{transform:translateY(0)}
main{display:block;padding-top:68px}
main:focus{outline:none}
section.wrap{margin-top:80px}

/* Header, as on the L&A site */
.nav{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid var(--rule);background:rgba(253,251,245,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav-bar{height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand span{font-family:var(--sans);font-size:.95rem;text-transform:uppercase;letter-spacing:.16em;color:var(--navy)}
.nav-links{display:none;align-items:center;gap:32px}
.nav-links a,.mobile-menu a{font-family:var(--sans);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--navy);text-decoration:none;transition:color .15s}
.nav-links a:hover{color:var(--gold)}
.nav-links a.nav-cta,.mobile-menu a.nav-cta{background:var(--maroon);color:var(--ivory);padding:12px 20px;letter-spacing:.1em}
.nav-links a.nav-cta:hover{background:var(--maroon-deep);color:var(--ivory)}
.nav-toggle{background:none;border:0;color:var(--navy);padding:4px;cursor:pointer}
.mobile-menu{border-top:1px solid var(--rule);background:rgba(253,251,245,.97);display:flex;flex-direction:column;padding:12px 24px}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:12px 0;border-bottom:1px solid var(--rule);font-size:.85rem}
.mobile-menu a.nav-cta{margin-top:16px;text-align:center;border:0;font-size:.75rem}
@media (min-width:768px){.nav-links{display:flex}.nav-toggle,.mobile-menu{display:none}}

/* Hero */
section.hero{padding-top:56px;margin-top:0}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.1;margin-top:10px}
.lead{max-width:62ch;font-size:1.2rem;line-height:1.55;color:var(--grey-deep);margin:18px 0 0}
.howto{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:900px}
.howto li{display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);font-size:.88rem;line-height:1.5;color:var(--navy-deep);background:var(--sand);padding:14px 16px}
.howto b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--ivory);display:grid;place-items:center;font-size:.75rem}

/* The 2x2 */
.grid-head p{max-width:60ch;color:var(--grey-deep);margin:8px 0 0;font-size:1.05rem}
.grid-layout{display:grid;gap:28px;margin-top:24px}
@media (min-width:1000px){.grid-layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}}
.matrix-fig{margin:0}
.matrix-frame{display:flex;gap:12px}
.axis-y{width:20px;flex:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:4px 0}
.axis-y span,.axis-x span{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-deep)}
.axis-y .axis-name{writing-mode:vertical-rl;transform:rotate(180deg)}
.axis-name{font-weight:700;color:var(--navy)!important}
.axis-x{display:flex;justify-content:space-between;padding:8px 0 0 32px}
.matrix-fig figcaption{padding:10px 0 0 32px;font-family:var(--sans);font-size:.78rem;line-height:1.5;color:var(--grey)}
.matrix{position:relative;flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:1/0.82;min-height:340px}
.quad{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(14px,2.4vw,26px);transition:transform .15s,box-shadow .15s,outline-color .15s;outline:3px solid transparent;outline-offset:-3px}
.quad:hover{box-shadow:0 8px 24px rgba(33,46,60,.14)}
.quad:focus-visible{outline-color:var(--gold)}
.quad[aria-pressed="true"]{outline-color:var(--gold)}
.quad.here{outline-color:var(--maroon)}
.quad h3{font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.15;color:inherit}
.quad p{margin:12px 0 0;font-family:var(--sans);font-size:clamp(.74rem,1.2vw,.88rem);line-height:1.5}
.q-tl{background:var(--steel-tint);color:var(--navy)} .q-tl p{color:var(--grey-deep)}
.q-tr{background:var(--navy);color:var(--ivory)} .q-tr p{color:var(--navy-tint)}
.q-bl{background:var(--sand);color:var(--navy)} .q-bl p{color:var(--grey-deep)}
.q-br{background:var(--camel-tint);color:var(--navy)} .q-br p{color:var(--grey-deep)}
@media (max-width:560px){.quad p{display:none}.matrix{aspect-ratio:1/0.9;min-height:280px}}
.you{position:absolute;z-index:2;width:0;height:0;pointer-events:none;transition:left .4s ease,bottom .4s ease}
@media (prefers-reduced-motion:reduce){.you{transition:none}}
.you::before{content:"";position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:var(--maroon);border:3px solid var(--ivory);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.you span{position:absolute;left:18px;top:-11px;background:var(--maroon);color:var(--ivory);font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;white-space:nowrap}

/* Side panel */
.side{display:flex;flex-direction:column;gap:16px}
.q-detail,.score-card{background:#fff;border:1px solid var(--rule);padding:20px 22px}
.q-detail h3{font-size:1.5rem}
.q-detail .pos{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-deep);margin:0 0 6px}
.q-detail p{margin:10px 0 0;font-size:1.05rem;line-height:1.5}
.q-detail .focus{font-family:var(--sans);font-size:.85rem;color:var(--navy-deep);border-top:1px solid var(--rule);padding-top:12px;margin-top:14px}
.q-detail .focus b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);margin-bottom:4px}
.score-card h3{font-size:1.25rem}
.score-card .empty{font-family:var(--sans);font-size:.88rem;color:var(--grey-deep);margin:8px 0 0}
.score-card .empty a{font-weight:600}
.scores{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.scores div{background:var(--sand);padding:10px 12px}
.scores dt{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-deep)}
.scores dd{margin:2px 0 0;font-size:1.9rem;line-height:1;color:var(--navy)}
.scores small{display:block;font-family:var(--sans);font-size:.7rem;color:var(--grey);margin-top:4px}
.dimbars{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}
.dimbars li{display:grid;grid-template-columns:34px minmax(0,1fr) 30px;gap:8px;align-items:center;font-family:var(--sans);font-size:.74rem;color:var(--grey-deep)}
.dimbars .bar{height:8px;background:var(--sand);position:relative}
.dimbars .bar i{position:absolute;inset:0 auto 0 0;background:var(--steel)}
.dimbars .m .bar i{background:var(--camel-deep)}
.dimbars .cap{color:var(--rust-deep)}
.dimbars b{color:var(--navy);text-align:right}

/* Scale */
.scale{margin-top:18px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.lvl{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--c);padding:14px 16px}
.lvl .n{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--grey-deep)}
.lvl h3{font-size:1.25rem;margin-top:2px}
.lvl p{font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--navy-deep);margin:8px 0 0}
.lvl p.obs{color:var(--grey-deep)}
.lvl p.obs b{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}

/* Rating */
.rate-head{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-end}
.rate-head p{max-width:64ch;color:var(--grey-deep);margin:8px 0 0;font-size:1.05rem}
.rate-head .privacy{font-family:var(--sans);font-size:.8rem;color:var(--grey)}
.rate-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--navy);color:var(--ivory);border:1px solid var(--navy);padding:12px 18px;cursor:pointer}
.btn:hover{background:var(--navy-deep)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--sand)}
.tag-f{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--rust-tint);color:var(--rust-deep);padding:2px 7px;white-space:nowrap}
.lens{margin-top:44px}
.lens > .rule{height:2px;width:56px;background:var(--maroon)}
.lens > h3{font-size:1.6rem;margin-top:14px}
.lens > p{color:var(--grey-deep);margin:6px 0 0;max-width:70ch}
.dim{margin-top:16px;border:1px solid var(--rule);background:#fff}
.dim > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:16px 20px}
.dim > summary::-webkit-details-marker{display:none}
.dim.r > summary{background:var(--steel-tint)} .dim.m > summary{background:var(--camel-tint)}
.code{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--grey-deep)}
.dim-name{font-size:1.3rem;color:var(--navy);flex:1;min-width:12ch}
.group{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-deep)}
.dim-score{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--navy);background:rgba(255,255,255,.7);padding:4px 10px;white-space:nowrap}
.chev{width:12px;height:12px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);transition:transform .2s;margin-left:4px}
details[open] > summary .chev{transform:rotate(225deg)}
.dim-desc{margin:0;padding:14px 20px 0;color:var(--grey-deep);font-size:1.02rem}
.subs{list-style:none;margin:0;padding:6px 20px 12px}
.sub{border-top:1px solid var(--rule)}
.sub:first-child{border-top:0}
.sub > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 0}
.sub > summary::-webkit-details-marker{display:none}
.sub-name{font-size:1.1rem;color:var(--navy);flex:1;min-width:14ch}
.picked{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--ivory);background:var(--navy);padding:3px 9px;white-space:nowrap}
.picked.none{background:transparent;color:var(--grey);font-weight:400;border:1px dashed var(--rule)}
.levels{border:0;margin:0 0 16px;padding:0;display:grid;gap:6px}
.levels legend{font-family:var(--sans);font-size:.78rem;color:var(--grey-deep);margin-bottom:8px;padding:0}
.opt{display:grid;grid-template-columns:22px 118px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--rule);cursor:pointer;background:var(--ivory);transition:background .12s,border-color .12s}
.opt:hover{background:var(--sand)}
.opt input{margin:3px 0 0;accent-color:var(--maroon);width:16px;height:16px}
.opt .ln{font-family:var(--sans);font-size:.75rem;font-weight:600;color:var(--grey-deep);padding-top:2px}
.opt .lt{font-size:1rem;line-height:1.45;color:var(--navy-deep)}
.opt:has(input:checked){background:var(--steel-tint);border-color:var(--steel-deep)}
.opt:has(input:focus-visible){outline:2px solid var(--gold)}
@media (max-width:620px){.opt{grid-template-columns:22px minmax(0,1fr)}.opt .lt{grid-column:2}}
.clear{font-family:var(--sans);font-size:.75rem;background:none;border:0;color:var(--grey-deep);text-decoration:underline;cursor:pointer;justify-self:start;padding:4px 0}

/* Credits, dock, footer */
section.credits{border-top:1px solid var(--rule);padding-top:24px;margin-bottom:80px}
.credits p{font-family:var(--sans);font-size:.8rem;line-height:1.6;color:var(--grey-deep);max-width:80ch;margin:8px 0 0}
.dock{position:fixed;inset:auto 0 0;z-index:40;background:var(--navy-darkest);color:var(--ivory);font-family:var(--sans);font-size:.85rem}
.dock[hidden]{display:none}
.dock-in{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-top:12px;padding-bottom:12px}
.dock a{color:var(--gold);font-weight:600;white-space:nowrap}
.footer{background:var(--navy-darkest);color:var(--navy-light)}
.footer-grid{display:grid;gap:40px;padding-top:64px;padding-bottom:64px}
@media (min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
.brand.light span{color:var(--ivory);font-size:.85rem}
.footer-tag{margin:16px 0 0;max-width:36ch;font-size:1.05rem;color:rgba(155,177,200,.8)}
.footer-h{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0 0 12px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-family:var(--sans);font-size:.88rem}
.footer a{color:var(--navy-light);text-decoration:none}
.footer a:hover{color:var(--gold)}
.footer-base{border-top:1px solid var(--navy-deep);font-family:var(--sans);font-size:.75rem;color:var(--grey);padding:24px 0}

/* Print: the position, the scores and the chosen levels */
.print-only{display:none}
@media print{
  body{font-size:11pt;background:#fff}
  .nav,.footer,.dock,.howto,.rate-actions,.privacy,.skip-link,#scale-h,.scale,.clear{display:none!important}
  main{padding-top:0}
  section.wrap{margin-top:18pt}
  .grid-layout{grid-template-columns:1.4fr 1fr}
  .quad,.q-tr,.dim > summary,.scores div,.dimbars .bar,.dimbars .bar i,.you::before,.you span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  details:not([open]) > *:not(summary){display:none}
  .dim{break-inside:avoid}
  .opt:not(:has(input:checked)){display:none}
}