/* Head of Taste | headoftaste.ai */
@font-face{font-family:"Gloock";src:url(/fonts/gloock-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(/fonts/familjen-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(/fonts/familjen-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"TI Mono";src:url(/fonts/xanh-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TI Mono";src:url(/fonts/familjen-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;unicode-range:U+0030-0039,U+0025;size-adjust:96%;font-display:swap}
:root{--paper:#fff;--ink:#0b0b0b;--ink-2:#555;--hair:#d4d4d4;--red:#d1260f;--serif:"Gloock",Georgia,"Times New Roman",serif;--sans:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;--mono:"TI Mono",ui-monospace,Menlo,Consolas,monospace;--g:16px;color-scheme:light}
@media (min-width:640px){:root{--g:32px}}
@media (min-width:1200px){:root{--g:48px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,pre{margin:0}
h1,h2,h3{font-weight:400}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--hair)}
a:hover{color:var(--red);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
[hidden]{display:none!important}
strong{font-weight:600}
code{font-family:var(--mono);font-size:inherit}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-64px;z-index:10;background:var(--ink);color:var(--paper);padding:8px 12px;font-family:var(--mono);font-size:14px}
.skip:focus{top:16px;color:var(--paper)}
.wrap{width:min(100% - 2 * var(--g),1344px);margin-inline:auto}
.label{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.dot{color:var(--red)}
/* Gloock's f hooks past its advance width, so "of" touches a following T, A or h ("ofTaste"). ofGap() wraps that "of". */
.of{margin-right:.12em}
/* Judge verdicts in Gloock carry no markup, so they get a little extra word space instead ("of huge"). */
.co-verdict blockquote p{word-spacing:.08em}
.ic{display:inline-block;width:12px;height:12px;flex:none}
.nw{white-space:nowrap}

/* top bar */
.top{border-bottom:1px solid var(--ink)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.brand{font-family:var(--serif);font-size:20px;line-height:24px;text-decoration:none;color:var(--ink);padding-block:16px}
.brand:hover{color:var(--ink)}
.nav{display:flex;gap:24px}
.nav a{display:inline-block;min-width:24px;padding-block:16px;font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);text-align:center}
.nav a:hover{color:var(--red)}
.nav a[aria-current="page"]{text-decoration-line:underline;text-decoration-color:var(--ink);text-underline-offset:6px}
.nav a[aria-current="page"]:hover{color:var(--ink)}

/* masthead */
.mast-title{font-family:var(--serif);font-size:clamp(56px,9vw,150px);line-height:.9;letter-spacing:-.025em;padding-block:28px 20px;margin-left:-.03em}
.dateline{border-top:4px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:12px;color:var(--ink)}
.lede{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:24px;align-items:end;padding-block:20px 24px}
.lede-text{grid-column:1 / span 7}
.deck{font-family:var(--serif);font-size:28px;line-height:1.2;letter-spacing:-.005em;text-wrap:balance}
.deck-more{margin-top:12px;max-width:64ch;color:var(--ink-2)}
.deck-more a{color:var(--ink);white-space:nowrap}
.deck-more a .ic,.closing a .ic{display:inline-block;margin-left:6px;vertical-align:-1px}
.deck-more a:hover{color:var(--red)}

/* front page: the masthead's ink runs from the column's left edge to its right edge. Measured in Chrome, Gloock sets
   "Head of Taste." 6.255 em wide from the H's stem (no side bearing, so no left hang) to the right edge of the red full stop,
   with -.025em letter spacing and .12em after "of". */
.fp-mast{container-type:inline-size}
.fp-title{font-family:var(--serif);font-size:clamp(56px,14vw,216px);font-size:calc(100cqw / 6.255);line-height:.9;letter-spacing:-.025em;padding-block:32px 28px;white-space:nowrap}
.fp-state{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;border-top:4px solid var(--ink);padding-block:40px 72px}
.fp-a{grid-column:1 / span 11;font-family:var(--serif);font-size:clamp(34px,5vw,72px);line-height:1.06;letter-spacing:-.015em}
.fp-a span{display:block;text-wrap:balance}
.fp-b{grid-column:1 / span 6;margin-top:40px;padding-top:16px;border-top:1px solid var(--ink);font-family:var(--serif);font-size:28px;line-height:1.2;letter-spacing:-.005em;text-wrap:pretty}
.fp-index{border-top:4px solid var(--ink);padding-block:24px 64px}
.fp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:32px;row-gap:12px;padding-bottom:24px}
.fp-h{font-family:var(--serif);font-size:56px;line-height:1;letter-spacing:-.02em}
.fp-h a,.fp-jobs-h a{text-decoration:none}
.fp-h a:hover,.fp-jobs-h a:hover{color:var(--red)}
.fp-ed{color:var(--ink);white-space:nowrap}
.fp-cols,.fp-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
.fp-cols{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:8px}
.fp-cols span:nth-child(1),.fp-rank{grid-column:1}
.fp-cols span:nth-child(2),.fp-name{grid-column:2 / span 3}
.fp-cols span:nth-child(3),.fp-verdict{grid-column:5 / span 7}
.fp-cols span:nth-child(4),.fp-score{grid-column:12;justify-self:end;text-align:right}
.fp-row{align-items:baseline;padding-block:16px;border-bottom:1px solid var(--hair)}
.fp-rank{font-family:var(--serif);font-size:28px;line-height:32px;color:var(--red);white-space:nowrap}
.fp-eq{font-family:var(--sans);font-size:.72em;margin-left:2px}
.fp-name{font-family:var(--serif);font-size:28px;line-height:32px;letter-spacing:-.01em}
.fp-name a{text-decoration:none}
.fp-name a:hover{text-decoration-line:underline}
.fp-verdict{font-size:18px;line-height:28px;max-width:62ch}
.fp-score{font-family:var(--serif);font-size:32px;line-height:32px;letter-spacing:-.02em}
.fp-all{padding-top:24px}
.fp-all a{display:inline-flex;align-items:center;gap:12px;font-family:var(--serif);font-size:28px;line-height:36px;text-decoration:none}
.fp-all a .ic{width:16px;height:16px}
.fp-jobs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:12px;align-items:baseline;border-top:1px solid var(--ink);padding-block:24px 72px}
.fp-jobs-h{grid-column:1 / span 4;font-family:var(--serif);font-size:32px;line-height:1.15;letter-spacing:-.01em}
.fp-jobs-body{grid-column:5 / span 8;min-width:0}
.fp-jobs-text{font-size:18px;line-height:28px;max-width:60ch;text-wrap:pretty}
.fp-jobs-links{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:8px;font-size:18px;line-height:28px}
.fp-jobs-links a{display:inline-flex;align-items:center;gap:8px;min-height:28px;text-decoration:none}
.fpj-list{margin-bottom:20px;border-top:1px solid var(--ink)}
.fpj-list li{border-bottom:1px solid var(--hair)}
.fpj-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:baseline;padding-block:12px;text-decoration:none}
.fpj-role{font-family:var(--serif);font-size:24px;line-height:30px;letter-spacing:-.01em}
.fpj-co{color:var(--ink-2)}
.fpj-list a:hover .fpj-role{color:var(--red)}

/* buttons */
.btn.btn-ink{background:var(--ink);color:var(--paper)}
.btn.btn-ink:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
/* Tasteful mark on a job: shown only for a homepage Taste Score of 80 or more */
.mark{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px 2px;border:1px solid var(--ink);font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.mark:hover{background:var(--ink);color:var(--paper)}
.mark-dot{color:var(--red)}

/* jobs board */
.jb-cta{grid-column:8 / -1;justify-self:end;align-self:end}
.jb-board{padding-bottom:64px}
.jb-cols,.jb-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
.jb-cols{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:8px}
.jb-cols span:nth-child(1),.jb-date{grid-column:1}
.jb-cols span:nth-child(2),.jb-role{grid-column:2 / span 5}
.jb-cols span:nth-child(3),.jb-co{grid-column:7 / span 3}
.jb-cols span:nth-child(4),.jb-where{grid-column:10 / span 3}
.jb-row{align-items:baseline;padding-block:20px;border-bottom:1px solid var(--hair)}
.jb-date{color:var(--ink);white-space:nowrap}
.jb-role{font-family:var(--serif);font-size:28px;line-height:32px;letter-spacing:-.01em;overflow-wrap:break-word;min-width:0}
.jb-role a{text-decoration:none}
.jb-role a:hover{text-decoration-line:underline}
.jb-co{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;font-size:18px;line-height:28px;min-width:0;overflow-wrap:anywhere}
.jb-co .mark{align-self:center}
.jb-where{font-family:var(--mono);font-size:14px;line-height:24px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.jb-empty{padding-block:40px 24px;border-top:1px solid var(--ink);font-family:var(--serif);font-size:32px;line-height:1.2}
.jb-feed{padding-top:24px}
/* one role */
.jd-head{padding-block:48px;border-bottom:4px solid var(--ink)}
.jd-co{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-family:var(--serif);font-size:28px;line-height:1.2;overflow-wrap:anywhere}
.jd-title{font-family:var(--serif);font-size:clamp(48px,7vw,112px);line-height:.95;letter-spacing:-.025em;margin-top:20px;margin-left:-.03em;max-width:18ch;text-wrap:balance;overflow-wrap:break-word}
.jd-facts{display:flex;flex-wrap:wrap;margin-top:32px;font-family:var(--mono);font-size:16px;line-height:24px;color:var(--ink)}
.jd-facts li+li::before{content:"·";padding-inline:12px;color:var(--red)}
.jd-apply{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px}
.jd-apply .btn{min-height:48px;padding:12px 24px;font-size:16px}
.jd-apply-to{font-family:var(--mono);font-size:14px;line-height:20px;color:var(--ink-2);overflow-wrap:anywhere}
.jd-body .side{grid-column:10 / span 3}
.jd-body .prose{grid-column:1 / span 8}
.jd-desc p{overflow-wrap:break-word}
.side-cap a{overflow-wrap:anywhere}
/* notices: /jobs/posted/ and errors */
.jn-addr{font-family:var(--mono);font-size:16px;overflow-wrap:anywhere}
.jn-job{margin-bottom:32px;padding-block:20px 24px;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
.jn-role{font-family:var(--serif);font-size:32px;line-height:1.15;letter-spacing:-.01em;overflow-wrap:break-word}
.jn-co{margin-top:4px;font-size:18px;line-height:28px;overflow-wrap:anywhere}
.jn-job .jd-facts{margin-top:12px;font-size:14px;line-height:22px}
.jn-job .jn-addr{margin-top:16px}
.jd-site{overflow-wrap:anywhere}
.prose .btns{margin-top:32px}
/* the posting form */
.jf-wrap .side{grid-column:1 / span 3}
.jf{grid-column:5 / span 7;grid-row:1;min-width:0}
.jf-price{margin-top:8px;font-family:var(--serif);font-size:56px;line-height:1;letter-spacing:-.02em}
.jf-rules{margin-top:8px;counter-reset:r}
.jf-rules li{position:relative;padding:8px 0 8px 28px;border-bottom:1px solid var(--hair);font-size:14px;line-height:20px;counter-increment:r}
.jf-rules li:last-child{border-bottom:0}
.jf-rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:8px;font-family:var(--mono);font-size:12px;line-height:20px;color:var(--ink-2)}
.jf-set{border:0;margin:0;padding:0;min-width:0}
.jf-set+.jf-set{margin-top:48px}
.jf-legend{display:flex;align-items:baseline;gap:16px;width:100%;padding:0 0 16px;border-bottom:1px solid var(--ink);font-family:var(--serif);font-size:36px;line-height:1.1;letter-spacing:-.01em}
.jf-field{display:flex;flex-direction:column;gap:6px;padding-block:20px;border-bottom:1px solid var(--hair);min-width:0}
.jf-field .label{color:var(--ink)}
.jf-opt{color:var(--ink-2);margin-left:6px}
.jf input[type=text],.jf input[type=email],.jf textarea{display:block;width:100%;min-width:0;margin:0;padding:6px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font-family:var(--sans);font-size:18px;line-height:28px;-webkit-appearance:none;appearance:none}
.jf textarea{min-height:280px;padding:12px;border:1px solid var(--ink);resize:vertical}
.jf select{display:block;width:100%;min-width:0;margin:0;padding:6px 28px 6px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230b0b0b' stroke-width='1.25'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;color:var(--ink);font-family:var(--sans);font-size:18px;line-height:28px;-webkit-appearance:none;appearance:none;cursor:pointer}
/* Text fields show focus with a red rule. Radios, the checkbox and the select keep the site-wide red outline. A field with
   an error is already red, so the focused rule doubles in weight. */
.jf input[type=text]:focus-visible,.jf input[type=email]:focus-visible{outline:none;border-color:var(--red);border-bottom-width:2px;padding-bottom:5px;box-shadow:0 1px 0 var(--red)}
.jf textarea:focus-visible{outline:none;border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.jf-bad textarea:focus-visible{border-width:2px;padding:11px}
.jf-hint{font-size:14px;line-height:20px;color:var(--ink-2)}
.jf-err{font-size:14px;line-height:20px;color:var(--red)}
.jf-bad input[type=text],.jf-bad input[type=email],.jf-bad textarea,.jf-bad select{border-color:var(--red)}
.jf-radios{margin:0;padding-inline:0;border:0;border-bottom:1px solid var(--hair);min-inline-size:0}
.jf-radios legend{padding:0;float:left;width:100%}
.jf-opts{clear:both;display:flex;flex-wrap:wrap;gap:4px 28px;padding-top:6px}
.jf-radio{display:inline-flex;align-items:center;gap:10px;min-height:36px;font-size:18px;line-height:28px;cursor:pointer}
.jf input[type=radio],.jf input[type=checkbox]{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink)}
.jf-check{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;align-items:center;border-bottom:0;padding-top:28px}
.jf-check label{font-size:18px;line-height:28px;cursor:pointer}
.jf-check .jf-err{grid-column:2}
.jf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.jf-submit{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px;padding-top:24px;border-top:1px solid var(--ink)}
.jf-submit .btn{min-height:56px;padding:14px 24px;font-size:16px}
.jf-note{max-width:52ch;font-size:14px;line-height:20px;color:var(--ink-2)}
.jf-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;padding-top:48px}
.jf-errors{grid-column:5 / span 7;padding:16px 20px;border:2px solid var(--red)}
.jf-errors-h{font-family:var(--serif);font-size:24px;line-height:1.2;color:var(--red)}
.jf-errors ul{margin-top:8px}
.jf-errors li{padding-block:4px;font-size:16px;line-height:24px}

/* tools */
.tools{grid-column:8 / -1;display:flex;align-items:flex-end;gap:24px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field-q{flex:1 1 auto}
.field-s{flex:0 0 200px}
.field input,.field select{font-family:var(--sans);font-size:16px;line-height:24px;color:var(--ink);background-color:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:8px 0;margin:0;-webkit-appearance:none;appearance:none;width:100%;min-width:0}
.field input::placeholder{color:var(--ink-2);opacity:1}
.field select{padding-right:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230b0b0b' stroke-width='1.25'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;cursor:pointer}
.field input:focus-visible,.field select:focus-visible{outline:none;border-bottom:2px solid var(--red);padding-bottom:7px}
.count{flex:none;padding-bottom:12px;white-space:nowrap}

/* ranking */
.cats-key{display:none}
.cols{display:grid;grid-template-columns:64px 240px minmax(0,1fr) 264px 80px;column-gap:32px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:8px}
.cols-r{text-align:right}
.row{display:grid;grid-template-columns:64px 240px minmax(0,1fr) 264px 80px;grid-template-areas:"rank thumb name cats score" "rank thumb meta cats score" "rank thumb verdict cats score";grid-template-rows:auto auto 1fr;column-gap:32px;padding-block:24px;border-bottom:1px solid var(--hair);scroll-margin-top:24px}
.row-rank{grid-area:rank;font-family:var(--serif);font-size:32px;line-height:32px;color:var(--red)}
.rk{display:block;white-space:nowrap}
.rk-sub,.sc-sub{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.rk-sub:empty,.sc-sub:empty{display:none}
.sc-sub span{display:block}
.row-thumb{grid-area:thumb;align-self:start;display:block;border:1px solid var(--hair);background:var(--paper)}
.row-thumb:hover{border-color:var(--ink)}
.row-name{grid-area:name;font-family:var(--serif);font-size:32px;line-height:1.1;letter-spacing:-.01em}
.row-name a{text-decoration:none}
.row-name a:hover{text-decoration-line:underline}
.row-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;margin-top:4px;font-family:var(--mono);font-size:14px;line-height:24px;color:var(--ink-2)}
.row-meta a{display:inline-flex;align-items:center;gap:4px;min-height:24px;color:var(--ink)}
.row-meta a:hover{color:var(--red)}
.row-verdict{grid-area:verdict;margin-top:12px;max-width:52ch;color:var(--ink)}
.row-cats{grid-area:cats}
.row-score{grid-area:score;justify-self:end;text-align:right;font-family:var(--serif);font-size:56px;line-height:48px;letter-spacing:-.02em}
.sc{display:block}
.empty{padding-block:48px;font-family:var(--serif);font-size:32px}
.closing{padding-block:48px 64px}
.closing p{max-width:72ch;color:var(--ink-2)}
.closing a{white-space:nowrap}

/* category bars (wide screens) */
.cats{display:grid;row-gap:4px;align-content:start}
.cat{display:grid;grid-template-columns:64px minmax(0,1fr) 24px;align-items:center;column-gap:12px;font-family:var(--mono);font-size:12px;line-height:16px}
.cat-l{color:var(--ink-2)}
.cat-k{display:none}
.cat-v{text-align:right;color:var(--ink)}
.bar{position:relative;display:block;height:8px}
.bar::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--hair)}
.bar i{position:absolute;left:0;top:3px;height:2px;background:var(--ink)}
.v0{width:0%}.v1{width:1%}.v2{width:2%}.v3{width:3%}.v4{width:4%}.v5{width:5%}.v6{width:6%}.v7{width:7%}.v8{width:8%}.v9{width:9%}.v10{width:10%}.v11{width:11%}.v12{width:12%}.v13{width:13%}.v14{width:14%}.v15{width:15%}.v16{width:16%}.v17{width:17%}.v18{width:18%}.v19{width:19%}.v20{width:20%}.v21{width:21%}.v22{width:22%}.v23{width:23%}.v24{width:24%}.v25{width:25%}.v26{width:26%}.v27{width:27%}.v28{width:28%}.v29{width:29%}.v30{width:30%}.v31{width:31%}.v32{width:32%}.v33{width:33%}.v34{width:34%}.v35{width:35%}.v36{width:36%}.v37{width:37%}.v38{width:38%}.v39{width:39%}.v40{width:40%}.v41{width:41%}.v42{width:42%}.v43{width:43%}.v44{width:44%}.v45{width:45%}.v46{width:46%}.v47{width:47%}.v48{width:48%}.v49{width:49%}.v50{width:50%}.v51{width:51%}.v52{width:52%}.v53{width:53%}.v54{width:54%}.v55{width:55%}.v56{width:56%}.v57{width:57%}.v58{width:58%}.v59{width:59%}.v60{width:60%}.v61{width:61%}.v62{width:62%}.v63{width:63%}.v64{width:64%}.v65{width:65%}.v66{width:66%}.v67{width:67%}.v68{width:68%}.v69{width:69%}.v70{width:70%}.v71{width:71%}.v72{width:72%}.v73{width:73%}.v74{width:74%}.v75{width:75%}.v76{width:76%}.v77{width:77%}.v78{width:78%}.v79{width:79%}.v80{width:80%}.v81{width:81%}.v82{width:82%}.v83{width:83%}.v84{width:84%}.v85{width:85%}.v86{width:86%}.v87{width:87%}.v88{width:88%}.v89{width:89%}.v90{width:90%}.v91{width:91%}.v92{width:92%}.v93{width:93%}.v94{width:94%}.v95{width:95%}.v96{width:96%}.v97{width:97%}.v98{width:98%}.v99{width:99%}.v100{width:100%}
.rows[data-sort="typography"] .cat[data-k="typography"] .cat-v{color:var(--red)}.rows[data-sort="typography"] .cat[data-k="typography"] .cat-l,.rows[data-sort="typography"] .cat[data-k="typography"] .cat-k{color:var(--ink)}.rows[data-sort="typography"] .cat[data-k="typography"] .bar i{top:2px;height:4px}
.rows[data-sort="color"] .cat[data-k="color"] .cat-v{color:var(--red)}.rows[data-sort="color"] .cat[data-k="color"] .cat-l,.rows[data-sort="color"] .cat[data-k="color"] .cat-k{color:var(--ink)}.rows[data-sort="color"] .cat[data-k="color"] .bar i{top:2px;height:4px}
.rows[data-sort="layout"] .cat[data-k="layout"] .cat-v{color:var(--red)}.rows[data-sort="layout"] .cat[data-k="layout"] .cat-l,.rows[data-sort="layout"] .cat[data-k="layout"] .cat-k{color:var(--ink)}.rows[data-sort="layout"] .cat[data-k="layout"] .bar i{top:2px;height:4px}
.rows[data-sort="craft"] .cat[data-k="craft"] .cat-v{color:var(--red)}.rows[data-sort="craft"] .cat[data-k="craft"] .cat-l,.rows[data-sort="craft"] .cat[data-k="craft"] .cat-k{color:var(--ink)}.rows[data-sort="craft"] .cat[data-k="craft"] .bar i{top:2px;height:4px}
.rows[data-sort="distinct"] .cat[data-k="distinct"] .cat-v{color:var(--red)}.rows[data-sort="distinct"] .cat[data-k="distinct"] .cat-l,.rows[data-sort="distinct"] .cat[data-k="distinct"] .cat-k{color:var(--ink)}.rows[data-sort="distinct"] .cat[data-k="distinct"] .bar i{top:2px;height:4px}
.rows[data-sort="mobile"] .cat[data-k="mobile"] .cat-v{color:var(--red)}.rows[data-sort="mobile"] .cat[data-k="mobile"] .cat-l,.rows[data-sort="mobile"] .cat[data-k="mobile"] .cat-k{color:var(--ink)}.rows[data-sort="mobile"] .cat[data-k="mobile"] .bar i{top:2px;height:4px}
.rows[data-sort="perf"] .cat[data-k="perf"] .cat-v{color:var(--red)}.rows[data-sort="perf"] .cat[data-k="perf"] .cat-l,.rows[data-sort="perf"] .cat[data-k="perf"] .cat-k{color:var(--ink)}.rows[data-sort="perf"] .cat[data-k="perf"] .bar i{top:2px;height:4px}

/* company page */
.folio{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--hair);padding-block:12px}
.folio-nav{display:flex;gap:24px}
.folio-nav a{display:inline-flex;align-items:center;gap:8px;min-height:24px;text-decoration:none;color:var(--ink)}
.folio-nav a:hover{color:var(--red)}
.co-head{--ns:clamp(56px,8.4vw,136px);--ss:clamp(128px,15vw,216px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;padding-block:48px}
.co-id{grid-column:1 / span 8;grid-row:1}
.co-name{font-family:var(--serif);font-size:var(--ns);line-height:.95;letter-spacing:-.025em;margin-top:24px;margin-left:-.03em;overflow-wrap:break-word;text-wrap:balance}
.co-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.co-domain{font-family:var(--mono);font-size:16px;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:24px;text-decoration:none;cursor:pointer;border-radius:0}
.btn:hover{background:var(--ink);color:var(--paper)}
.co-verdict{grid-column:1 / span 8;grid-row:2;margin-top:40px;border-top:1px solid var(--ink);padding-top:16px}
.co-verdict blockquote{margin-top:12px}
.co-verdict blockquote p{font-family:var(--serif);font-size:26px;line-height:1.3;max-width:32em;text-wrap:pretty}
.co-score{grid-column:9 / span 4;grid-row:1 / span 2;border-left:1px solid var(--ink);padding-left:32px}
/* The score's cap height lines up with the company name's (Gloock: cap .75em, ascent .98em, descent .23em). */
.big-score{font-family:var(--serif);font-size:var(--ss);line-height:.85;letter-spacing:-.04em;margin-top:calc(24px + .1 * var(--ns) - .05 * var(--ss));margin-left:-.04em}
.co-outof{margin-top:16px}
.co-rank{margin-top:16px;font-family:var(--serif);font-size:24px;line-height:1.2;color:var(--ink)}
.shots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:12px;border-top:4px solid var(--ink);padding-block:48px 64px}
/* Both figures share one image row and one caption row; the phone screenshot is cropped from the top to the desktop figure's height. */
.shot{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:12px;min-width:0}
.shot a{display:block;border:1px solid var(--hair);min-height:0}
.shot a:hover{border-color:var(--ink)}
.shot-d{grid-column:span 9}
.shot-m{grid-column:span 3}
.shot-m a{position:relative;overflow:hidden}
.shot-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.shot figcaption{font-family:var(--mono);font-size:12px;line-height:16px;color:var(--ink-2)}
.fig{color:var(--ink);margin-right:8px}
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:24px;border-top:1px solid var(--ink);padding-block:48px 64px}
.sec-head{grid-column:span 4;align-self:start;position:sticky;top:24px}
.sec-head h2{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-size:32px;line-height:1.15;letter-spacing:-.01em}
.sec-n{flex:none;font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.08em;color:var(--ink-2)}
.sec-head p{margin-top:16px;max-width:36ch;color:var(--ink-2)}
.sec-body{grid-column:5 / span 8;min-width:0}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 160px 64px;align-items:center;column-gap:24px;padding-block:16px;border-bottom:1px solid var(--hair)}
.ct-row:first-child{padding-top:0}
.ct-row:last-child{border-bottom:0;padding-bottom:0}
.ct-name{font-family:var(--sans);font-size:20px;line-height:28px;font-weight:600}
.ct-blurb{margin-top:4px;color:var(--ink-2);max-width:56ch}
.ct-bar i{top:2px;height:4px}
.ct-score{font-family:var(--serif);font-size:40px;line-height:1;text-align:right}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.points{margin-top:12px;border-top:1px solid var(--ink)}
.points li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding-block:12px;border-bottom:1px solid var(--hair);font-size:18px;line-height:28px}
.points li:last-child{border-bottom:0;padding-bottom:0}
.pt-n{font-family:var(--mono);font-size:12px;line-height:28px;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--ink)}
.fact{padding-block:16px 24px;border-bottom:1px solid var(--hair);min-width:0}
.fact:not(.fact-wide){border-bottom:0;padding-bottom:0}
.fact-wide{grid-column:1 / -1}
.fact dd{margin-top:8px}
.fact-v{font-family:var(--serif);font-size:40px;line-height:1.1;white-space:nowrap}
.unit{font-family:var(--mono);font-size:14px;letter-spacing:.04em;margin-left:4px;color:var(--ink-2)}
.fact-cap{margin-top:8px;font-size:14px;line-height:20px;color:var(--ink-2);max-width:48ch}
.faces{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--sans);font-size:20px;line-height:28px}
.faces-k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.swatches{display:flex;flex-wrap:wrap;gap:16px}
.swatches li{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:12px;line-height:16px;color:var(--ink-2)}
.badge-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:start}
.badge-img{width:300px;height:80px}
.code{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.code pre{width:100%;border:1px solid var(--hair);padding:16px;font-family:var(--mono);font-size:14px;line-height:20px;white-space:pre-wrap;word-break:break-all;color:var(--ink)}
.band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:16px;align-items:start;border-top:1px solid var(--ink);padding-block:24px 48px}
.band-h{color:var(--ink)}
.band-cell{grid-column:span 6;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.band-text{max-width:44ch;color:var(--ink-2)}
.pager{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:4px solid var(--ink);padding-block:24px 64px}
.pager-a{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.pager-a .label{display:inline-flex;align-items:center;gap:8px}
.pager-c{text-align:center;align-items:center}
.pager-r{text-align:right;align-items:flex-end}
.pager-n{font-family:var(--serif);font-size:24px;line-height:1.2}
.pager-a:hover .pager-n{color:var(--red)}

/* article pages */
.art-head{padding-block:64px 48px;border-bottom:4px solid var(--ink)}
.art-title{font-family:var(--serif);font-size:clamp(56px,8vw,128px);line-height:.95;letter-spacing:-.025em;margin-top:24px;margin-left:-.03em;text-wrap:balance}
.art-deck{margin-top:32px;font-family:var(--serif);font-size:28px;line-height:1.2;max-width:32ch;text-wrap:balance}
.art-meta{margin-top:32px;color:var(--ink)}
.art{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:32px;padding-block:48px 96px}
.toc-wide,.side{grid-column:1 / span 3;grid-row:1;align-self:start;position:sticky;top:24px}
.toc-fold{display:none}
.toc-wide ol,.toc-fold ol{margin-top:12px;border-top:1px solid var(--ink)}
.toc-wide li,.toc-fold li{border-bottom:1px solid var(--hair)}
.toc-wide a,.toc-fold a{display:flex;gap:12px;padding-block:8px;text-decoration:none;font-size:14px;line-height:24px}
.toc-n{font-family:var(--mono);font-size:12px;line-height:24px;color:var(--ink-2)}
.side-block+.side-block{margin-top:24px;padding-top:16px;border-top:1px solid var(--hair)}
.side-block:first-child{border-top:1px solid var(--ink);padding-top:12px}
.side-v{margin-top:8px}
.side-cap{margin-top:8px;font-size:14px;line-height:20px;color:var(--ink-2)}
.prose{grid-column:5 / span 7;grid-row:1;font-size:18px;line-height:1.6;min-width:0}
.prose section{padding-top:48px}
.prose section:first-child{padding-top:0}
.prose h2{display:flex;align-items:baseline;gap:16px;font-family:var(--serif);font-size:36px;line-height:1.1;letter-spacing:-.01em;padding-bottom:16px;border-bottom:1px solid var(--ink);margin-bottom:24px}
.prose .sec-n{font-size:12px}
.prose p{max-width:66ch}
.prose p+p,.prose p+.table-wrap,.prose .table-wrap+p,.prose p+ul,.prose ul+p,.prose p+pre,.prose pre+p,.prose p+dl,.prose pre+ul{margin-top:24px}
.list li{position:relative;padding-left:28px;max-width:66ch}
.list li+li{margin-top:12px}
.list li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:1px;background:var(--ink)}
.prose code{font-size:16px}
.defs > div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;padding-block:16px;border-top:1px solid var(--hair)}
.defs > div:last-child{border-bottom:1px solid var(--hair)}
.defs dt{font-family:var(--mono);font-size:12px;line-height:28px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.defs dd{max-width:60ch}
.defs-mono dd{font-family:var(--mono);font-size:16px}
.t-note{display:block;font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.04em;color:var(--ink-2);font-weight:400;text-transform:none}
.defs-mono .t-note{display:block;margin-top:4px}
.block{border:1px solid var(--ink);padding:16px;font-family:var(--mono);font-size:16px;line-height:24px;white-space:pre-wrap;overflow-wrap:anywhere}
.table-wrap{overflow-x:auto;border-top:1px solid var(--ink)}
table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px}
th,td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--hair)}
thead th{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:400}
tbody th{font-weight:600}
.t-group th{padding-top:24px;border-bottom:1px solid var(--ink);font-family:var(--serif);font-size:24px;line-height:32px;font-weight:400}
.weights td{font-family:var(--mono);text-align:right;white-space:nowrap}
.weights thead th:not(:first-child){text-align:right}
.weights tfoot th,.weights tfoot td{border-bottom:0;border-top:1px solid var(--ink)}
.weights tfoot th{font-weight:600}
tbody th[scope="row"]{width:24%}
.op{font-family:var(--sans);color:var(--ink);padding-inline:4px}
.formula{font-family:var(--serif);font-size:24px;line-height:1.4;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:16px;margin-bottom:24px}
.prose h2+.formula{border-top:0;padding-top:0}

/* footer */
.foot{border-top:4px solid var(--ink)}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-block:48px 64px}
.foot-brand{grid-column:span 4;font-family:var(--serif);font-size:32px;line-height:1.1}
.foot-brand a{text-decoration:none}
.foot-motto{grid-column:span 4;font-family:var(--serif);font-size:24px;line-height:1.25}
.foot-nav{grid-column:span 2}
.foot-nav a{display:inline-block;padding-block:4px;min-height:24px}
.foot-contact{grid-column:span 2}
.foot-contact p+p{margin-top:8px}

/* 404 */
.nf{padding-block:96px}
.nf-title{font-family:var(--serif);font-size:clamp(56px,10vw,160px);line-height:.95;letter-spacing:-.025em;margin-top:24px}
.nf-text{margin-top:32px;font-size:18px;max-width:48ch}

/* tablet and below: the category bars become one line of keyed figures */
@media (max-width:1199px){
  .lede-text,.tools{grid-column:1 / -1}
  .tools{max-width:640px}
  .fp-b{grid-column:1 / span 9}
  .fp-cols,.fp-row{grid-template-columns:56px minmax(0,1fr) minmax(0,1.7fr) 64px;column-gap:24px}
  .fp-cols span:nth-child(1),.fp-rank{grid-column:1}.fp-cols span:nth-child(2),.fp-name{grid-column:2}.fp-cols span:nth-child(3),.fp-verdict{grid-column:3}.fp-cols span:nth-child(4),.fp-score{grid-column:4}
  .fp-jobs{grid-template-columns:56px minmax(0,1fr) minmax(0,1.7fr) 64px;column-gap:24px}
  .fp-jobs-h{grid-column:1 / span 2}.fp-jobs-body{grid-column:3 / -1}
  .fpj-list a{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .jb-cta{grid-column:1 / -1;justify-self:start}
  .jb-cols{display:none}
  .jb-row{grid-template-columns:72px minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"date role co" "date role where";column-gap:24px;row-gap:4px;border-top:0}
  .jb-board .jb-rows{border-top:1px solid var(--ink)}
  .jb-date{grid-area:date}.jb-role{grid-area:role}.jb-co{grid-area:co}.jb-where{grid-area:where}
  .jb-date,.jb-role,.jb-co,.jb-where{grid-column:auto}
  .jd-body .side,.jd-body .prose,.jf-wrap .side,.jf,.jf-errors{grid-column:1 / -1;grid-row:auto}
  .cols{display:none}
  .cats-key{display:flex;flex-wrap:wrap;gap:4px 16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);padding-block:10px;color:var(--ink-2);letter-spacing:.04em}
  .cats-key b{font-weight:400;color:var(--ink)}
  .row{grid-template-columns:56px 200px minmax(0,1fr) 80px;grid-template-areas:"rank thumb name score" "rank thumb meta score" "rank thumb verdict score" "rank thumb cats score";grid-template-rows:auto auto auto 1fr;column-gap:24px}
  .row-score{font-size:48px;line-height:40px}
  .cats.row-cats{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:12px}
  .row-cats .cat{display:inline-flex;gap:5px;font-size:12px;line-height:16px}
  .row-cats .cat-l,.row-cats .bar{display:none}
  .row-cats .cat-k{display:inline;color:var(--ink-2)}
  .co-id,.co-verdict,.co-score{grid-column:1 / -1;grid-row:auto}
  .co-score{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:24px;border-left:0;border-top:1px solid var(--ink);padding:16px 0 0;margin-top:32px}
  .co-score-k{flex:0 0 100%}
  .big-score{font-size:clamp(96px,18vw,160px);margin-top:16px}
  .co-score-meta{padding-bottom:6px}
  .co-outof{margin-top:0}
  .co-rank{margin-top:8px}
  .co-verdict{margin-top:32px}
  .shot-d{grid-column:span 8}
  .shot-m{grid-column:span 4}
  .sec-head,.sec-body{grid-column:1 / -1}
  .sec-head{position:static}
  .sec-head p{max-width:60ch}
  .ct-row{grid-template-columns:minmax(0,1fr) 120px 64px;grid-template-areas:"t t s" "w b s"}
  .ct-text{grid-area:t}.ct-weight{grid-area:w;margin-top:8px}.ct-bar{grid-area:b;margin-top:8px}.ct-score{grid-area:s}
  .band-cell{grid-column:span 6}
  .toc-wide{grid-column:1 / -1;position:static}
  .toc-wide ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .side{grid-column:1 / -1;grid-row:auto;position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .side-block+.side-block{margin-top:0;padding-top:12px;border-top:1px solid var(--ink)}
  .side-block:first-child{padding-top:12px}
  .prose{grid-column:1 / -1;grid-row:auto}
  .foot-brand,.foot-motto{grid-column:span 6}
  .foot-nav,.foot-contact{grid-column:span 6}
}
/* phone: every grid is a single column, rows are compact */
@media (max-width:639px){
  .top-in{min-height:48px;flex-wrap:wrap;row-gap:0}
  .nav{gap:16px}
  .brand{padding-block:12px}
  .brand+.nav{flex:1 1 100%;justify-content:space-between;border-top:1px solid var(--hair)}
  .brand+.nav a{padding-block:12px}
  .mast-title{font-size:calc((100vw - 32px) / 7.2);line-height:1;padding-block:24px 16px;margin-left:0}
  .fp-title{padding-block:20px 16px}
  .fp-state,.fp-jobs{grid-template-columns:minmax(0,1fr)}
  .fp-state > *,.fp-jobs > *{grid-column:1 / -1}
  .fp-state{padding-block:24px 48px;container-type:inline-size}
  /* "Knowing what is good is." is 10.83 em wide. Below a 349 px column (phones under about 380 px) the statement shrinks so it keeps one line. */
  .fp-a{font-size:32px;font-size:min(32px,100cqw / 10.9);line-height:1.08}
  .fp-b{margin-top:28px;font-size:21px;line-height:1.25}
  .fp-head{grid-template-columns:minmax(0,1fr);row-gap:8px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
  .fp-cols{display:none}
  .fp-h{font-size:40px}
  .fp-row{grid-template-columns:36px minmax(0,1fr) auto;column-gap:12px;padding-block:14px}
  .fp-rank{grid-column:1;grid-row:1;font-size:20px;line-height:28px}
  .fp-name{grid-column:2;grid-row:1;font-size:22px;line-height:28px}
  .fp-score{grid-column:3;grid-row:1;font-size:26px;line-height:28px}
  .fp-verdict{grid-column:2 / -1;grid-row:2;margin-top:4px;font-size:16px;line-height:1.45}
  .fp-all a{font-size:24px;line-height:32px}
  .fp-jobs{padding-block:20px 48px}
  .fp-jobs-h{font-size:28px}
  .fp-jobs-text,.fp-jobs-links{font-size:17px;line-height:26px}
  .fp-jobs-links{flex-direction:column;gap:4px}
  .fp-jobs-links a{min-height:32px}
  .fpj-list{margin-bottom:16px}
  .fpj-role{font-size:21px;line-height:26px}
  .jb-cta .btn{min-height:48px}
  .jb-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"date" "role" "co" "where";row-gap:6px;padding-block:16px}
  .jb-role{font-size:24px;line-height:28px}
  .jb-co{font-size:17px;line-height:26px}
  .jb-where{font-size:13px;line-height:20px}
  .jb-empty{font-size:24px;padding-block:28px 16px}
  .jb-mast .mast-title{font-size:96px}
  .jf-top{padding-top:24px}
  .jd-head{padding-block:28px 32px}
  .jd-co{font-size:22px}
  .jd-title{margin-left:0;font-size:min(48px,calc((100vw - 32px) / 7))}
  .jd-facts{margin-top:20px;font-size:14px;line-height:22px;flex-direction:column}
  .jd-facts li+li::before{content:none}
  .jd-apply{margin-top:24px}
  .jd-apply .btn{flex:1 1 100%;justify-content:center}
  .jf-price{font-size:48px}
  .jf-legend{font-size:28px}
  .jf-set+.jf-set{margin-top:40px}
  .jf input[type=text],.jf input[type=email],.jf textarea,.jf select,.jf-radio,.jf-check label{font-size:17px}
  .jn-role{font-size:26px}
  .jf textarea{min-height:240px}
  .jf-submit .btn{width:100%;justify-content:center}
  .lede,.co-head,.shots,.sec,.band,.art,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .lede > *,.co-head > *,.sec > *,.band > *,.art > *,.foot-grid > *{grid-column:1 / -1}
  .lede{padding-block:20px;row-gap:20px}
  .deck{font-size:22px;line-height:1.25}
  .deck-more{display:none}
  .tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
  .field-s{flex:none}
  .count{display:none}
  .cats-key{gap:2px 12px;font-size:11px;line-height:16px}
  .row{grid-template-columns:36px 88px minmax(0,1fr) auto;grid-template-areas:"rank thumb name score" "rank thumb meta meta" ". verdict verdict verdict" ". cats cats cats";grid-template-rows:auto auto auto auto;column-gap:12px;padding-block:16px}
  .row-rank{font-size:20px;line-height:28px}
  .rk-sub{display:none}
  .rows:not([data-sort="rank"]) .row{grid-template-areas:"rank thumb name score" "rank thumb meta score" ". verdict verdict verdict" ". cats cats cats"}
  .row-thumb img{width:86px;height:auto}
  .row-name{font-size:22px;line-height:28px;align-self:start}
  .row-meta{font-size:13px;line-height:20px;margin-top:4px;column-gap:12px}
  .row-meta a{min-height:24px}
  .row-score{font-size:36px;line-height:28px}
  .sc-sub{margin-top:4px;font-size:10px;line-height:12px}
  .row-verdict{margin-top:10px;font-size:16px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .cats.row-cats{margin-top:6px;gap:2px 10px}
  .fn-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .folio-ed{display:none}
  .co-head{padding-block:32px}
  .co-name{margin-top:16px;margin-left:0}
  .co-links{margin-top:16px}
  .co-score{margin-top:24px}
  .big-score{font-size:112px}
  .co-rank{font-size:20px}
  .co-verdict{margin-top:24px}
  .co-verdict blockquote p{font-size:21px;line-height:1.3}
  .shots{row-gap:24px;padding-block:32px 48px}
  .shot{display:block;grid-row:auto}
  .shot-d,.shot-m{grid-column:1 / -1}
  .shot-m{width:66%;max-width:260px}
  .shot-m a{position:static}
  .shot-m img{position:static;height:auto}
  .shot figcaption{margin-top:12px}
  .sec{row-gap:20px;padding-block:32px 40px}
  .sec-head h2{font-size:28px}
  .ct-row{grid-template-columns:minmax(0,1fr) 64px;grid-template-areas:"t s" "b b" "w w"}
  .ct-bar{margin-top:12px}
  .ct-weight{margin-top:8px}
  .ct-score{align-self:start}
  .pair{grid-template-columns:minmax(0,1fr);gap:32px}
  .points li{font-size:17px;line-height:26px}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}
  .fact-v{font-size:28px}
  .unit{font-size:12px;margin-left:2px}
  .fact-cap{font-size:12px;line-height:16px}
  .faces{font-size:18px;line-height:26px;gap:4px 16px}
  .badge-body{grid-template-columns:minmax(0,1fr)}
  .band{padding-block:24px 40px;row-gap:32px}
  .pager{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .pager-c{display:none}
  .pager-n{font-size:20px}
  .art-head{padding-block:40px 32px}
  .art-title{margin-left:0;font-size:min(56px,calc((100vw - 32px) / 6.6));overflow-wrap:break-word}
  .art-deck{font-size:22px;margin-top:20px}
  .art{padding-block:24px 64px;row-gap:32px}
  .toc-wide{display:none}
  .toc-fold{display:block;border-bottom:1px solid var(--ink)}
  .toc-fold summary{display:flex;justify-content:space-between;align-items:center;min-height:44px;cursor:pointer;color:var(--ink);list-style:none}
  .toc-fold summary::-webkit-details-marker{display:none}
  .toc-fold summary::after{content:"+";font-family:var(--sans);font-size:20px;line-height:1}
  .toc-fold[open] summary::after{content:"\2212"}
  .toc-fold ol{margin-top:0;margin-bottom:8px}
  .side{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .prose{font-size:17px}
  .prose h2{font-size:28px}
  .defs > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .foot-grid{gap:24px}
  th,td{padding-right:12px}
}
@media (prefers-reduced-motion:no-preference){a,.btn{transition:color .12s,background-color .12s,border-color .12s}}
@media print{.top,.tools,.foot,.pager,.folio-nav{display:none}}