:root{--ink:#161512;--paper:#EFEAE0;--panel:#E6E0D2;--bone:#f7f5f1;--brass:#c9b98a;--deep:#a8925c;--body:#3f3b33;--grey:#6d6a60}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font:300 16px/1.6 Archivo,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 34px}
.hl{color:var(--deep)}
.pv{background:var(--brass);color:var(--ink);padding:10px 0;font:600 10.5px Archivo,sans-serif;letter-spacing:.24em;text-align:center}

/* the mark */
.g{display:inline-grid;grid-template-columns:repeat(5,7px);grid-auto-rows:7px;gap:2.5px;vertical-align:middle}
.g i{background:var(--ink)}
.g i.seat{background:none;border:1.5px solid var(--deep);box-sizing:border-box}

/* publication masthead */
.mast{border-top:3px solid var(--ink);border-bottom:1px solid rgba(22,21,18,.3)}
.mast .row{display:flex;align-items:center;gap:14px;padding:13px 0}
.mast .brand{display:flex;align-items:center;gap:11px;flex:none}
.mast .wm{font:600 13px Archivo,sans-serif;font-stretch:110%;letter-spacing:.28em;color:var(--ink)}
.mast .brand:hover .wm{color:var(--deep)}
.mast .ttl{flex:1;text-align:center;font:600 12px Archivo,sans-serif;font-stretch:110%;letter-spacing:.3em;color:var(--ink)}
.mast .ttl:hover{color:var(--deep)}
.mast .vol{font:400 10px Archivo,sans-serif;letter-spacing:.24em;color:var(--grey)}
@media(max-width:860px){.mast .wm{display:none}}
@media(max-width:700px){.mast .ttl{font-size:10px;letter-spacing:.18em}}

/* headers */
.k{font:600 10.5px Archivo,sans-serif;letter-spacing:.3em;color:var(--deep)}
.k.ink{color:#8a867a}
h1,h2{font-stretch:110%;margin:0}
.ahead{background:var(--ink);padding:66px 0 58px}
.ahead .k{color:var(--brass)}
.ahead .hl{color:var(--brass)}
.ahead h1{margin:16px 0 0;font:600 clamp(34px,5vw,62px)/1.08 Archivo,sans-serif;color:#f2efe7}
.ahead .sub{margin:22px 0 0;max-width:62ch;font:300 18px/1.65 Archivo,sans-serif;color:rgba(233,230,222,.62)}
.ahead .stats .n{color:var(--brass)}
.ahead .stats .l{color:rgba(233,230,222,.5)}
.stats{display:flex;gap:52px;margin:40px 0 0;flex-wrap:wrap}
.stats .n{display:block;font:600 40px/1 Archivo,sans-serif;font-stretch:110%;color:var(--deep)}
.stats .l{display:block;margin-top:7px;font:400 11px Archivo,sans-serif;letter-spacing:.2em;color:var(--grey);text-transform:uppercase}
.lede{max-width:62ch;font:300 17px/1.65 Archivo,sans-serif;color:var(--grey);margin:16px 0 0}
.lede.ink{color:#4a463c}
h2{font:600 clamp(24px,3vw,34px)/1.2 Archivo,sans-serif;color:var(--ink);margin-top:12px}
h2.ink{color:var(--ink)}

/* the ten chairs */
.band{padding:58px 0}
.people{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:38px}
@media(max-width:1000px){.people{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.people{grid-template-columns:repeat(2,1fr)}}
.p{display:block;background:var(--bone);border:1px solid rgba(22,21,18,.14);padding:9px 9px 13px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.p:hover{transform:translateY(-4px);border-color:var(--deep);box-shadow:0 16px 34px rgba(22,21,18,.16)}
.p .ph{display:block;width:100%;aspect-ratio:4/5;background:#d9d4c8 top/cover no-repeat;filter:grayscale(.2) contrast(1.02)}
.p:hover .ph{filter:none}
.p .nm{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;font:600 15px Archivo,sans-serif;color:var(--ink)}
.p .nm i{font-style:normal;font:400 15px/1 Archivo,sans-serif;color:var(--deep);transition:transform .18s ease,color .18s ease}
.p:hover .nm i{transform:translateX(4px);color:var(--ink)}
.p .co{display:block;margin-top:2px;font:300 13.5px Archivo,sans-serif;color:var(--grey)}
.p .sp2{display:block;margin-top:7px;font:600 8.5px Archivo,sans-serif;letter-spacing:.18em;color:var(--deep)}

/* questions list */
.qs{border-top:1px solid rgba(22,21,18,.2);padding:58px 0}
.qlist{margin-top:34px;border-top:1px solid rgba(22,21,18,.16)}
.qlist .q{display:flex;gap:22px;align-items:baseline;padding:17px 0;border-bottom:1px solid rgba(22,21,18,.16)}
.qlist .q .qn{font:600 12px Archivo,sans-serif;letter-spacing:.14em;color:var(--deep);width:26px;flex:none}
.qlist .q .qt{font:400 17px/1.45 Archivo,sans-serif;color:var(--body)}
.qlist .q .qc{margin-left:auto;font:600 13px Archivo,sans-serif;color:rgba(22,21,18,.35);flex:none}
.qlist .q:hover .qt{color:var(--ink)}
.qlist .q:hover .qc{color:var(--deep)}

/* the twenty */
.twenty{background:var(--panel);border-top:1px solid rgba(22,21,18,.14);padding:54px 0 60px}
.tw{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 26px;margin-top:28px}
@media(max-width:1000px){.tw{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.tw{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tw{grid-template-columns:1fr}}
.twp{display:flex;gap:11px;align-items:center;padding:9px 0;border-top:1px solid rgba(22,21,18,.12)}
.twp .im{width:36px;height:36px;flex:none;border-radius:50%;background:#d9d4c8 center/cover no-repeat;filter:grayscale(.6)}
a.twp:hover .im{filter:none}
.twall{display:inline-block;margin-top:18px;font:600 10.5px Archivo,sans-serif;letter-spacing:.2em;color:var(--deep)}
.twall i{font-style:normal}
.twall:hover{color:var(--ink)}
.twp .nm2{display:block;font:400 13.5px Archivo,sans-serif;color:var(--ink)}
a.twp:hover .nm2{color:var(--deep)}
.twp .co2{display:block;font:300 12px Archivo,sans-serif;color:var(--grey)}

/* ---------- profile page: the plate ---------- */
.pro{background:var(--ink);padding:56px 0 62px;color:#e9e6de}
.pro .k{color:var(--brass)}
.pro .nm{color:#f2efe7}
.pro .role{color:rgba(233,230,222,.66)}
.prow{display:grid;grid-template-columns:340px 1fr;gap:52px;align-items:start}
@media(max-width:900px){.prow{grid-template-columns:1fr;gap:28px}}
.pimg{width:100%;aspect-ratio:4/5;background:#1a1a1c top/cover no-repeat;outline:1px solid rgba(201,185,138,.5);outline-offset:6px}
.pchair{margin:20px -7px 0;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(201,185,138,.4);background:linear-gradient(180deg,rgba(201,185,138,.09),rgba(201,185,138,.02))}
.pchair .sq{width:13px;height:13px;border:2.5px solid var(--brass);flex:none}
.pchair .t{font:600 9.5px Archivo,sans-serif;letter-spacing:.19em;color:var(--brass)}
.pro .nm{font:600 clamp(30px,4vw,46px)/1.06 Archivo,sans-serif;font-stretch:110%;margin:0}
.pro .role{margin-top:12px;font:400 17px Archivo,sans-serif}
.plinks{display:flex;align-items:stretch;gap:10px;margin-top:22px}
.logo{display:inline-flex;align-items:center;gap:11px;padding:11px 16px;border:1px solid rgba(233,230,222,.14);text-decoration:none}
.logo.wm2{flex-direction:column;align-items:flex-start;gap:0;padding:13px 18px 11px}
.lk-n{display:block;font:400 20px/1 Georgia,'Times New Roman',serif;color:var(--brass);letter-spacing:.04em}
.lk-s{display:block;margin-top:7px;padding-top:6px;border-top:1px solid rgba(201,185,138,.35);font:600 8px Archivo,sans-serif;letter-spacing:.395em;color:rgba(201,185,138,.8)}
.logo.wm2 .cu{margin-top:7px}
.plinks .logo:hover,.lichip:hover{border-color:rgba(201,185,138,.55)}
.lichip{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border:1px solid rgba(233,230,222,.14)}
.lichip .sqi{width:26px;height:26px;background:var(--brass);display:flex;align-items:center;justify-content:center}
.lichip svg{width:15px;height:15px;fill:var(--ink);display:block}
.logo .mk{width:26px;height:26px;background:var(--brass);color:var(--ink);font:700 13px Archivo,sans-serif;display:flex;align-items:center;justify-content:center;flex:none}
.logo .co{font:600 14px Archivo,sans-serif;font-stretch:110%;letter-spacing:.06em;color:#e9e6de}
.logo .cu{display:block;font:300 11.5px Archivo,sans-serif;letter-spacing:.02em;color:rgba(233,230,222,.42)}
.bio{margin-top:26px;max-width:60ch}
.bio p{margin:0 0 14px;font:300 16.5px/1.7 Archivo,sans-serif;color:rgba(233,230,222,.76)}
.facts{display:flex;flex-wrap:wrap;gap:30px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(233,230,222,.1)}
.facts div .n{display:block;font:600 24px/1 Archivo,sans-serif;font-stretch:110%;color:var(--brass)}
.facts div .l{display:block;margin-top:6px;font:400 10.5px Archivo,sans-serif;letter-spacing:.18em;color:rgba(233,230,222,.45);text-transform:uppercase}

/* their twelve answers */
.answers{padding:54px 0 64px}
.answers .k{margin-bottom:8px}
.ans-q{padding:34px 0;border-top:1px solid rgba(22,21,18,.16)}
.ans-q .num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:3.5px solid var(--deep);font:600 16px/1 Archivo,sans-serif;font-stretch:110%;color:var(--deep)}
.ans-q .qt{margin:9px 0 16px;font:600 21px/1.35 Archivo,sans-serif;font-stretch:110%;color:var(--ink);max-width:34ch}
.ans-q p{margin:0 0 14px;font:300 17px/1.72 Archivo,sans-serif;color:var(--body)}
.ans-q .pull{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17.5px;color:#8a6f3c}
.ans-q .meta{margin-top:14px;font:400 12px Archivo,sans-serif;letter-spacing:.06em}
.ans-q .meta a{color:var(--deep)}
.ans-q .meta a:hover{color:var(--ink)}

.pager{display:flex;justify-content:space-between;gap:20px;padding:26px 0 0;border-top:1px solid rgba(22,21,18,.16);font:400 14px Archivo,sans-serif;color:var(--grey)}
.pager a:hover{color:var(--deep)}

/* next page */
.nextband{display:flex;align-items:center;gap:22px;margin-top:40px;padding:20px 26px;border:1px solid rgba(168,146,92,.6);background:linear-gradient(90deg,rgba(168,146,92,.08),rgba(168,146,92,.02));transition:border-color .18s ease}
.nextband:hover{border-color:var(--deep)}
.nextband .thumb{width:72px;height:90px;flex:none;background:#1a1a1c top/cover no-repeat;outline:1px solid rgba(168,146,92,.5);outline-offset:2px}
.nextband .k2{display:block;font:600 9.5px Archivo,sans-serif;letter-spacing:.22em;color:var(--deep)}
.nextband .nm3{display:block;margin-top:6px;font:600 22px/1.15 Archivo,sans-serif;font-stretch:110%;color:var(--ink)}
.nextband .co3{display:block;margin-top:3px;font:300 14px Archivo,sans-serif;color:var(--grey)}
.nextband .ar{margin-left:auto;font:300 36px/1 Archivo,sans-serif;color:var(--deep)}
@media(max-width:560px){.nextband .thumb{display:none}}

/* the quickfire ten */
.qf{background:var(--panel);border-top:1px solid rgba(22,21,18,.14);padding:54px 0 62px}
.qfgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:28px}
@media(max-width:760px){.qfgrid{grid-template-columns:1fr}}
.qfi{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-top:1px solid rgba(22,21,18,.14)}
.qfi .qfq{font:300 15px/1.5 Archivo,sans-serif;color:#5d594e}
.qfi .qfa{font:600 15px/1.5 Archivo,sans-serif;color:var(--ink);text-align:right;flex:none;max-width:55%}

/* colophon */
.colo{background:var(--ink);padding:48px 0 62px;text-align:center}
.colo .g i{background:#8f8c82}
.colo .g i.seat{border-color:var(--brass)}
.colo .t1{margin:16px 0 0;font:600 13px Archivo,sans-serif;font-stretch:110%;letter-spacing:.14em;color:#f2efe7}
.colo .t2{margin:6px 0 0;font:300 13.5px Archivo,sans-serif;color:rgba(233,230,222,.55)}
.colo .links{margin:22px 0 0;font:600 9.5px Archivo,sans-serif;letter-spacing:.22em}
.colo .links a{color:var(--brass);margin:0 13px}
.colo .links a:hover{color:#f2efe7}
.colo .sm{margin:22px 0 0;font:300 12px Archivo,sans-serif;color:rgba(233,230,222,.35)}
.pgr{margin-top:24px;font:400 14px Archivo,sans-serif;color:var(--grey)}
.pgr a:hover{color:var(--deep)}


/* ---------- question pages ---------- */
.qh{background:var(--ink);padding:56px 0 44px}
.qh .qno{display:block;font:600 clamp(52px,6vw,76px)/1 Archivo,sans-serif;font-stretch:110%;color:var(--brass);margin-bottom:14px}
.qh .qno .of{font:400 clamp(20px,2.4vw,28px) Archivo,sans-serif;color:rgba(22,21,18,.3);margin-left:8px}
.qh h1{margin:0;font:600 clamp(30px,4.4vw,54px)/1.12 Archivo,sans-serif;font-stretch:110%;color:#f2efe7;max-width:24ch;letter-spacing:.005em}
.qh .stand{margin:20px 0 0;max-width:62ch;font:300 17px/1.65 Archivo,sans-serif;color:rgba(233,230,222,.6)}
.countband{background:var(--ink);color:#e9e6de;border-top:1px solid rgba(233,230,222,.12);padding:30px 0 34px}
.countband .wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.countband .big{font:600 46px/1 Archivo,sans-serif;font-stretch:110%;color:var(--brass)}
.countband .lab{font:300 16px/1.55 Archivo,sans-serif;color:rgba(233,230,222,.78);max-width:58ch}
.ans{padding:14px 0 0}
.a{display:grid;grid-template-columns:330px 1fr;gap:38px;padding:30px 0;border-top:1px solid rgba(22,21,18,.16)}
.a:first-child{border-top:none}
@media(max-width:860px){.a{grid-template-columns:1fr;gap:16px}}
.a .who{display:flex;gap:17px;align-items:flex-start}
.a .who .hs{display:block;width:118px;height:148px;flex:none;background:#1a1a1c top/cover no-repeat;outline:1px solid rgba(168,146,92,.65);outline-offset:3px;transition:outline-color .15s ease,transform .15s ease;box-shadow:0 10px 26px rgba(22,21,18,.22)}
.a .who:hover .hs{outline-color:var(--deep);transform:translateY(-3px)}
.a .who:hover .nm{color:var(--deep)}
.a .who .nm{font:600 16px Archivo,sans-serif;color:var(--ink)}
.a .who .co{margin-top:3px;font:300 13.5px Archivo,sans-serif;color:var(--grey)}
.a .who .sp{margin-top:9px;font:600 9.5px Archivo,sans-serif;letter-spacing:.2em;color:var(--deep)}
.a .who .vw{display:inline-block;margin-top:11px;font:600 9.5px Archivo,sans-serif;letter-spacing:.18em;color:var(--deep);opacity:0;transition:opacity .15s ease}
.a .who:hover .vw{opacity:1}
.a .q{margin:-6px 0 0;font:300 16.5px/1.72 Archivo,sans-serif;color:var(--body)}
.a .q .pull{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17px;color:#8a6f3c}
.sum{background:var(--panel);border-top:1px solid rgba(22,21,18,.14);border-bottom:1px solid rgba(22,21,18,.14);padding:58px 0;margin-top:40px}
.sum .k{font:600 10.5px Archivo,sans-serif;letter-spacing:.3em;color:#8a867a}
.sum h2{margin:12px 0 22px;font:600 30px/1.2 Archivo,sans-serif;font-stretch:110%;color:var(--ink)}
.sum p{max-width:66ch;font:300 17px/1.7 Archivo,sans-serif;color:var(--body);margin:0 0 18px}
.sum .fig{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 8px}
@media(max-width:760px){.sum .fig{grid-template-columns:1fr}}
.sum .fig div{border:1px solid rgba(22,21,18,.18);padding:20px;background:var(--paper)}
.sum .fig .n{font:600 34px/1 Archivo,sans-serif;font-stretch:110%;color:var(--deep)}
.sum .fig .l{margin-top:9px;font:300 14.5px/1.5 Archivo,sans-serif;color:#4a463c}
.sv{padding:58px 0 66px}
.sv .k{font:600 10.5px Archivo,sans-serif;letter-spacing:.3em;color:#8a867a}
.sv h2{margin:12px 0 8px;font:600 27px Archivo,sans-serif;font-stretch:110%;color:var(--ink)}
.sv .note{margin:0 0 26px;max-width:62ch;font:300 15.5px/1.6 Archivo,sans-serif;color:var(--grey)}
.sv .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:760px){.sv .grid{grid-template-columns:1fr}}
.sv .e{display:flex;gap:13px;padding:18px 0;border-top:1px solid rgba(22,21,18,.12)}
.sv .tim{width:44px;height:44px;flex:none;border-radius:50%;background:#d9d4c8 center/cover no-repeat;filter:grayscale(.3)}
.sv .e:hover .tim{filter:none}
.sv .e .nm{font:500 14.5px Archivo,sans-serif;color:var(--ink)}
.sv .e .co{font:300 12.5px Archivo,sans-serif;color:var(--grey)}
.sv .e p{margin:8px 0 0;font:300 14.5px/1.62 Archivo,sans-serif;color:var(--body)}
