/* Pith core stylesheet. Written by scripts/design_css.py from the files named below;
   edit those, not this. docs/design/DECISIONS.md says why it looks the way it does. */
/* css/tokens.css */
@font-face {
font-family: "Pith Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/atkinson-plainzero/atkinson-next-plainzero-latin.woff2?v=61efb45ca1") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Pith Sans";
font-style: italic;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/atkinson-plainzero/atkinson-next-plainzero-italic-latin.woff2?v=ed964f4eba") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Pith Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/atkinson/atkinson-next-latin-ext.woff2?v=ca1969afa9") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Pith Sans";
font-style: italic;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/atkinson/atkinson-next-italic-latin-ext.woff2?v=871436be3c") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Pith Paper";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-text-latin.woff2?v=f31f549ec8") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Pith Paper";
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-text-italic-latin.woff2?v=75915c4b46") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Pith Paper";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-text-latin-ext.woff2?v=9521045762") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Pith Paper";
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-text-italic-latin-ext.woff2?v=39e9749643") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Pith Paper";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-text-greek.woff2?v=2665582465") format("woff2");
unicode-range: U+0370-03FF, U+2070-209F, U+2100-214F;
}
@font-face {
font-family: "Pith Paper";
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-text-italic-greek.woff2?v=94c4d4556f") format("woff2");
unicode-range: U+0370-03FF, U+2070-209F, U+2100-214F;
}
@font-face {
font-family: "Pith Paper";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-math-signs.woff2?v=8beb5b78b7") format("woff2");
unicode-range: U+2190-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+27E8-27EF, U+2A00-2AFF;
}
@font-face {
font-family: "Pith Paper";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-math-letters.woff2?v=2e63a7c7c1") format("woff2");
unicode-range: U+1D49C-1D56B, U+1D7D8-1D7E1;
}
@font-face {
font-family: "Pith Paper";
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-math-signs.woff2?v=8beb5b78b7") format("woff2");
unicode-range: U+2190-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+27E8-27EF, U+2A00-2AFF;
}
@font-face {
font-family: "Pith Paper";
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url("/static/fonts/stix/stix-two-math-letters.woff2?v=2e63a7c7c1") format("woff2");
unicode-range: U+1D49C-1D56B, U+1D7D8-1D7E1;
}
@font-face {
font-family: "Pith Mono";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/atkinson/atkinson-mono-latin.woff2?v=f0230cab68") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Pith Mono";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/atkinson/atkinson-mono-latin-ext.woff2?v=6815df031c") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Pith Mono Fallback";
src: local("Menlo"), local("DejaVu Sans Mono"), local("Liberation Mono"), local("Courier New");
size-adjust: 105%;
}
@font-face {
font-family: "Pith Mono Fallback Narrow";
src: local("Consolas");
size-adjust: 115%;
}
:root {
--sheet: #fcfefe;
--sunk: #ebf3f2;
--ink: #122125;
--ink-2: #3d4c50;
--apparatus: #5f6d70;
--line: #6b7a7d;
--hair: #d8e2e1;
--hand: #1854db;
--stands: #c72f20;
--holds: #007845;
--proof: #ce9200;
--face-pith: "Pith Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--face-paper: "Pith Paper", "STIX Two Text", Georgia, "Times New Roman", serif;
--face-apparatus: "Pith Mono", "Pith Mono Fallback", "Pith Mono Fallback Narrow", ui-monospace, monospace;
--size-display: clamp(2.5rem, 2.0821rem + 1.7143vw, 3.625rem);
--size-number: clamp(2.125rem, 1.6143rem + 2.0952vw, 3.5rem);
--size-title: clamp(1.5rem, 1.2679rem + 0.9524vw, 2.125rem);
--size-verdict: clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem);
--size-lede: 1.125rem;
--size-body: 1.0625rem;
--size-body-paper: 1.125rem;
--size-small: 0.9375rem;
--size-label: 0.8125rem;
--size-line: 0.875rem;
--type-display: 800 var(--size-display)/0.98 var(--face-pith);
--type-number: 800 var(--size-number)/0.9 var(--face-pith);
--type-title: 600 var(--size-title)/1.14 var(--face-paper);
--type-verdict: 500 var(--size-verdict)/1.3 var(--face-pith);
--type-lede: 450 var(--size-lede)/1.36 var(--face-pith);
--type-lede-paper: 400 var(--size-lede)/1.4 var(--face-paper);
--type-body: 400 var(--size-body)/1.5 var(--face-pith);
--type-body-paper: 400 var(--size-body-paper)/1.5 var(--face-paper);
--type-small: 400 var(--size-small)/1.45 var(--face-pith);
--type-label: 700 var(--size-label)/1.3 var(--face-apparatus);
--type-line: 400 var(--size-line)/1.5 var(--face-apparatus);
--track-display: -0.03em;
--track-number: -0.04em;
--track-verdict: -0.005em;
--track-label: 0.08em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 72px;
--grid-max: 1200px;
--gutter: 24px;
--margin: 16px;
--reading: calc(var(--grid-max) * 2 / 3 - var(--gutter) / 3);
--measure: 68ch;
--focus-offset: 2px;
--target: 44px;
--target-min: 24px;
--control: 48px;
}
:root,
[data-theme] {
--rule: 1px solid var(--ink);
--rule-hair: 1px solid var(--hair);
--rule-control: 1px solid var(--line);
--rule-inset: 2px solid var(--ink);
--rule-proof: 3px solid var(--proof);
--focus: 2px solid var(--hand);
}
@media (min-width: 720px) {
:root {
--size-lede: 1.3125rem;
--margin: 24px;
}
}
/* css/base.css */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background: var(--sheet);
color: var(--ink);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--space-5);
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--sheet);
color: var(--ink);
font: var(--type-body);
font-synthesis: none;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
main {
flex: 1;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
pre,
table {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
h1 {
font: var(--type-display);
letter-spacing: var(--track-display);
text-wrap: balance;
}
h2 {
font: var(--type-verdict);
font-weight: 700;
letter-spacing: var(--track-verdict);
text-wrap: balance;
}
h3,
h4 {
font: var(--type-body);
font-weight: 700;
}
b,
strong {
font-weight: 700;
}
a {
color: var(--hand);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
text-decoration-thickness: 2px;
}
:focus-visible {
outline: var(--focus);
outline-offset: var(--focus-offset);
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
border-radius: 0;
}
button,
summary,
label[for] {
cursor: pointer;
}
sup,
sub {
line-height: 0;
}
hr {
margin: var(--space-5) 0;
border: 0;
border-top: var(--rule);
}
code,
kbd,
samp,
pre {
font: var(--type-line);
}
pre {
padding: var(--space-4);
background: var(--sunk);
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: var(--space-3) var(--space-4) var(--space-3) 0;
border-top: var(--rule-hair);
text-align: start;
vertical-align: top;
}
th {
font-weight: 700;
}
thead th {
border-top: 0;
border-bottom: var(--rule);
}
.table-scroll {
overflow-x: auto;
border-inline-end: var(--rule-hair);
}
.paper {
font: var(--type-body-paper);
}
.pith {
font: var(--type-body);
}
.apparatus {
font: var(--type-line);
color: var(--apparatus);
}
.ident {
font-family: var(--face-apparatus);
font-size: inherit;
}
.t-display {
font: var(--type-display);
letter-spacing: var(--track-display);
text-wrap: balance;
}
.t-number {
font: var(--type-number);
letter-spacing: var(--track-number);
font-variant-numeric: tabular-nums;
}
.t-title {
font: var(--type-title);
letter-spacing: 0;
text-wrap: balance;
}
.t-verdict {
font: var(--type-verdict);
letter-spacing: var(--track-verdict);
}
.t-verdict b,
.t-verdict strong {
font-weight: 700;
}
.t-lede {
font: var(--type-lede);
letter-spacing: 0;
}
.t-lede.paper {
font: var(--type-lede-paper);
}
.t-body {
font: var(--type-body);
letter-spacing: 0;
}
.t-body.paper {
font: var(--type-body-paper);
}
.t-small {
font: var(--type-small);
letter-spacing: 0;
}
.t-label {
font: var(--type-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.t-line {
font: var(--type-line);
letter-spacing: 0;
}
.quiet {
color: var(--ink-2);
}
.measure {
max-width: var(--measure);
}
.prose > * + * {
margin-top: var(--space-4);
}
.prose > h2 {
margin-top: var(--space-7);
}
.prose > h3 {
margin-top: var(--space-5);
}
.prose ul,
.prose ol {
padding-inline-start: var(--space-5);
}
.prose ul {
list-style: disc;
}
.prose ol {
list-style: decimal;
}
.wrap {
width: 100%;
max-width: calc(var(--grid-max) + 2 * var(--margin));
margin-inline: auto;
padding-inline: var(--margin);
}
.grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: var(--gutter);
row-gap: var(--space-5);
}
.section {
padding-block: var(--space-7);
border-top: var(--rule);
}
.section > h2 {
margin-bottom: var(--space-5);
}
@media (min-width: 720px) {
.table-scroll {
border-inline-end: 0;
}
.grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid > * {
grid-column: span 12;
}
.grid > .span-3 {
grid-column: span 3;
}
.grid > .span-4 {
grid-column: span 4;
}
.grid > .span-5 {
grid-column: span 5;
}
.grid > .span-6 {
grid-column: span 6;
}
.grid > .span-7 {
grid-column: span 7;
}
.grid > .span-8 {
grid-column: span 8;
}
.grid > .span-9 {
grid-column: span 9;
}
}
.layout {
padding-block: var(--space-6) var(--space-8);
}
.layout-reading > .wrap > * {
max-width: var(--reading);
}
.layout-reading > .wrap > .wide {
max-width: none;
}
.layout-form > .wrap > * {
max-width: 36rem;
}
.layout-bare {
padding-block: var(--space-7) var(--space-8);
}
.skip {
position: absolute;
inset-inline-start: var(--margin);
top: 0;
padding: var(--space-3) var(--space-4);
background: var(--ink);
color: var(--sheet);
font-weight: 700;
transform: translateY(-120%);
}
.skip:focus {
transform: none;
}
.wordmark {
display: inline-flex;
align-items: center;
min-height: var(--target);
color: var(--ink);
font: var(--type-verdict);
font-weight: 800;
letter-spacing: var(--track-number);
text-decoration: none;
}
.wordmark__stop {
color: var(--hand);
}
.site-head {
border-bottom: var(--rule);
}
.site-head__row {
display: flex;
align-items: center;
gap: var(--space-5);
min-height: 56px;
}
.site-head__search,
.site-head__nav {
display: none;
}
.site-head__phone {
display: flex;
gap: var(--space-2);
margin-inline-start: auto;
}
.site-head__link {
display: inline-flex;
align-items: center;
min-height: var(--target);
padding-inline: var(--space-2);
color: var(--ink);
font: var(--type-small);
font-weight: 600;
text-decoration: none;
}
.site-head__link:hover,
.site-head__link[aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: 2px;
}
.site-head__search input {
width: 100%;
height: var(--target);
padding: 0 var(--space-3);
border: var(--rule-control);
background: var(--sheet);
font: var(--type-small);
appearance: none;
}
.site-head__search input:focus-visible {
border-color: var(--hand);
}
.site-head__fields {
position: relative;
}
.site-head__fields > summary {
list-style: none;
}
.site-head__fields > summary::-webkit-details-marker {
display: none;
}
.site-head__fields > ul {
position: absolute;
inset-inline-end: 0;
top: 100%;
z-index: 2;
min-width: 14rem;
padding: var(--space-2) 0;
border: var(--rule);
background: var(--sheet);
}
.site-head__fields > ul a {
display: flex;
align-items: center;
min-height: var(--target);
padding-inline: var(--space-4);
color: var(--ink);
text-decoration: none;
}
.site-head__fields > ul a:hover {
text-decoration: underline;
}
@media (min-width: 720px) {
.site-head__row {
min-height: 64px;
}
.site-head__search {
display: block;
flex: 1;
max-width: 35rem;
}
.site-head__nav {
display: flex;
align-items: center;
gap: var(--space-4);
margin-inline-start: auto;
}
.site-head__phone {
display: none;
}
}
.site-foot {
padding-block: var(--space-6) var(--space-7);
border-top: var(--rule);
font: var(--type-small);
}
.site-foot__nav {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5) var(--gutter);
margin-bottom: var(--space-6);
}
.site-foot__nav h2 {
margin-bottom: var(--space-2);
font: var(--type-small);
font-weight: 700;
letter-spacing: 0;
}
.site-foot__nav ul {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-4);
}
.site-foot__nav a {
display: inline-flex;
align-items: center;
min-height: var(--target);
color: var(--ink);
}
.site-foot__legal {
max-width: var(--measure);
color: var(--ink-2);
}
.site-foot__legal + .site-foot__legal {
margin-top: var(--space-2);
}
.site-foot__legal a {
color: var(--ink-2);
}
@media (min-width: 720px) {
.site-foot__nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-foot__nav ul {
display: block;
}
.site-foot__nav a {
min-height: var(--target-min);
padding-block: var(--space-1);
}
}
@media print {
.site-head,
.site-foot__nav,
.skip {
display: none;
}
a {
color: inherit;
}
}
/* css/utilities.css */
[hidden] {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* css/components/parts.css */
.label {
font: var(--type-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--ink);
}
.mark {
font: var(--type-line);
color: var(--ink);
}
p.mark {
padding-inline-start: calc(0.75em + var(--space-2));
text-indent: calc(-0.75em - var(--space-2));
}
.mark__shape {
display: inline-block;
width: 0.75em;
height: 0.75em;
margin-inline-end: var(--space-2);
vertical-align: -0.02em;
flex: none;
}
.mark__shape--stands,
.mark__shape--missed {
color: var(--stands);
}
.mark--holds,
.mark__shape--holds {
color: var(--holds);
}
.mark--unchecked,
.mark__shape--unchecked {
color: var(--apparatus);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--target);
padding: 0 var(--space-4);
border: var(--rule);
background: var(--sheet);
color: var(--ink);
font: var(--type-body);
font-weight: 600;
text-decoration: none;
appearance: none;
}
.btn:hover,
.btn:active {
background: var(--ink);
color: var(--sheet);
}
.btn--primary {
min-height: var(--control);
padding-inline: var(--space-5);
background: var(--ink);
color: var(--sheet);
font-weight: 700;
}
.btn--primary:hover,
.btn--primary:active {
background: var(--sheet);
color: var(--ink);
}
.btn[disabled],
.btn[aria-disabled="true"] {
border-color: var(--line);
background: var(--sheet);
color: var(--apparatus);
cursor: not-allowed;
}
.btn--text {
min-height: var(--target-min);
padding: 0;
border: 0;
background: none;
color: var(--hand);
font-weight: 400;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.btn--text:hover,
.btn--text:active {
background: none;
color: var(--hand);
text-decoration-thickness: 2px;
}
@media (pointer: coarse) {
.btn--text {
min-height: var(--target);
}
}
.field {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2);
}
.field__label {
font: var(--type-small);
font-weight: 600;
}
.field__hint,
.field__error {
font: var(--type-small);
color: var(--ink-2);
}
.field__error {
color: var(--ink);
}
.field__input {
width: 100%;
height: var(--control);
padding: 0 var(--space-3);
border: var(--rule-control);
background: var(--sunk);
color: var(--ink);
font: var(--type-body);
appearance: none;
}
.field__input--area {
height: auto;
min-height: calc(2 * var(--control));
padding: var(--space-3);
resize: vertical;
}
.field__input::placeholder {
color: var(--apparatus);
opacity: 1;
}
.field__input:focus-visible {
border-color: var(--hand);
}
.field__input[aria-invalid="true"] {
border-color: var(--stands);
}
.field-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2);
align-items: end;
}
@media (min-width: 720px) {
.field-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--gutter);
}
}
.counter__number {
font: var(--type-number);
letter-spacing: var(--track-number);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.counter__unit {
margin-top: var(--space-2);
font: var(--type-small);
}
.counter__kind {
font: var(--type-line);
color: var(--apparatus);
}
.page-head {
display: grid;
gap: var(--space-5) var(--gutter);
padding-block: var(--space-6) var(--space-7);
}
.page-head__scope {
margin-top: var(--space-4);
max-width: 60ch;
font: var(--type-lede);
}
.page-head__scope + .page-head__scope {
margin-top: var(--space-3);
}
.page-head__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5) var(--gutter);
align-content: start;
}
@media (min-width: 960px) {
.page-head--facts {
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}
.page-head__facts {
grid-template-columns: minmax(0, 1fr);
}
}
.fold {
border-top: var(--rule-hair);
}
.fold > summary {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: var(--target);
font-weight: 600;
list-style: none;
}
.fold > summary::-webkit-details-marker {
display: none;
}
.fold > summary::before {
content: "+";
flex: none;
width: 1em;
font: var(--type-line);
font-weight: 700;
text-align: center;
}
.fold[open] > summary::before {
content: "\2212";
}
.fold > summary:hover {
color: var(--hand);
}
.fold__body {
padding: 0 0 var(--space-5) calc(1em + var(--space-2));
}
.tabs {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-5);
border-bottom: var(--rule-hair);
}
.tabs__tab {
display: inline-flex;
align-items: center;
min-height: var(--target);
margin-bottom: -1px;
border-bottom: 2px solid transparent;
color: var(--ink-2);
font-weight: 600;
text-decoration: none;
}
.tabs__tab:hover {
color: var(--ink);
}
.tabs__tab[aria-current] {
border-bottom: var(--rule-inset);
color: var(--ink);
}
.tabs__count {
margin-inline-start: var(--space-2);
font: var(--type-line);
color: var(--apparatus);
}
/* css/components/plate.css */
.plate {
border-top: var(--rule);
border-bottom: var(--rule);
}
.plate__row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
border-top: var(--rule-hair);
}
.plate__row:first-child {
border-top: 0;
}
.plate__cell {
min-width: 0;
}
.plate__cell > * + * {
margin-top: var(--space-2);
}
.plate__paper {
margin-top: var(--space-4);
padding-inline-start: var(--space-3);
border-inline-start: var(--rule-inset);
}
.plate__review {
padding-block: var(--space-4) var(--space-5);
}
.plate__row:target::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: calc(-1 * var(--space-3));
border-inline-start: var(--focus);
}
.plate__title {
font: var(--type-lede-paper);
font-weight: 600;
text-wrap: balance;
}
.plate__title a {
color: var(--ink);
text-decoration: none;
}
.plate__title a:hover {
color: var(--hand);
text-decoration: underline;
}
.plate__claim {
font: var(--type-lede-paper);
max-width: var(--measure);
}
.plate__quote,
.plate__said {
max-width: var(--measure);
}
.plate__verdict {
max-width: 60ch;
font: var(--type-verdict);
letter-spacing: var(--track-verdict);
}
.plate__summary {
max-width: var(--measure);
}
.plate__verdict b {
font-weight: 700;
}
.plate__wrong {
letter-spacing: 0;
white-space: nowrap;
}
.plate__disagreed {
font: var(--type-line);
color: var(--ink);
}
.plate__basis {
max-width: var(--measure);
}
.plate__text,
.plate__answer,
.plate__note {
max-width: var(--measure);
}
.plate__text > * + * {
margin-top: var(--space-2);
}
.plate__answer {
margin-top: var(--space-3);
}
.plate__answer .label {
margin-inline-end: var(--space-2);
}
.plate__note {
color: var(--ink-2);
}
.plate__unchecked {
max-width: var(--measure);
color: var(--ink-2);
}
.plate__fallible {
max-width: var(--measure);
color: var(--ink-2);
}
.plate__read {
padding-block: var(--space-3) var(--space-4);
border-top: var(--rule-hair);
}
.plate__bar {
display: block;
width: 100%;
height: var(--space-2);
}
.plate__bar-all {
fill: none;
stroke: var(--ink);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.plate__bar-given {
fill: var(--ink);
}
.plate__row--withdrawn del {
color: var(--apparatus);
}
.plate__row--withdrawn .label {
color: var(--apparatus);
}
.more > summary,
.plate__rest > summary {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: var(--target-min);
color: var(--hand);
list-style: none;
}
.more__word {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.more > summary:hover .more__word,
.plate__rest > summary:hover .more__word {
text-decoration-thickness: 2px;
}
.more > summary::-webkit-details-marker,
.plate__rest > summary::-webkit-details-marker {
display: none;
}
.more > summary::before,
.plate__rest > summary::before {
content: "+";
font: var(--type-line);
font-weight: 700;
}
.more[open] > summary::before,
.plate__rest[open] > summary::before {
content: "\2212";
}
.more > p {
margin-top: var(--space-1);
max-width: var(--measure);
}
@media (pointer: coarse) {
.more > summary,
.plate__rest > summary {
min-height: var(--target);
}
}
.plate__full {
padding-block: var(--space-4) var(--space-5);
border-top: var(--rule);
}
.plate__full > * + * {
margin-top: var(--space-2);
}
.plate__minor-head {
padding-bottom: var(--space-4);
}
.plate__rest {
border-top: var(--rule-hair);
}
.plate__rest > summary {
margin-block: var(--space-2);
}
.plate__rest > .plate__row:first-of-type {
border-top: var(--rule-hair);
}
.plate__test {
max-width: var(--measure);
font: var(--type-lede);
}
.plate__notes {
border-top: 0;
}
.plate__questions .plate__notes-list {
list-style: decimal;
padding-inline-start: var(--space-5);
}
.plate__notes-list {
margin-top: var(--space-3);
max-width: var(--measure);
}
.plate__notes-list li + li {
margin-top: var(--space-3);
}
.plate__pass-list {
margin-top: var(--space-3);
}
.plate__pass {
display: grid;
grid-template-columns: 2ch minmax(0, 1fr);
column-gap: var(--space-3);
padding-block: var(--space-3);
border-top: var(--rule-hair);
}
.plate__pass > * {
grid-column: 2;
}
.plate__pass-n {
grid-column: 1;
grid-row: 1;
color: var(--apparatus);
}
.plate__pass-name {
font-weight: 600;
}
.plate__pass-headline {
max-width: var(--measure);
color: var(--ink-2);
}
.plate__foot {
padding-block: var(--space-3) var(--space-4);
border-top: var(--rule);
}
.plate--one {
border-bottom: 0;
}
.plate--one:last-child {
border-bottom: var(--rule);
}
.plate--one .plate__review > .label {
font: var(--type-line);
letter-spacing: 0;
text-transform: none;
color: var(--apparatus);
}
.plate--one .plate__verdict {
font: var(--type-body);
letter-spacing: 0;
}
@media (min-width: 960px) {
.plate__row {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.plate__paper {
margin-top: 0;
padding: var(--space-4) var(--gutter) var(--space-5) 0;
border-inline-start: 0;
}
.plate__review {
padding: var(--space-4) 0 var(--space-5) var(--gutter);
border-inline-start: var(--rule);
}
.plate__pass {
grid-template-columns: 2ch minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
}
.plate__pass > * {
grid-column: auto;
}
.plate__pass-n {
grid-row: auto;
}
.plate__pass-headline {
grid-column: 3 / -1;
}
}
.plate-card {
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
row-gap: var(--space-4);
width: 1200px;
height: 630px;
padding: var(--space-7) var(--space-8);
border: var(--rule);
background: var(--sheet);
color: var(--ink);
}
.plate-card__meta,
.plate-card__basis {
font-family: var(--face-apparatus);
font-size: var(--size-lede);
line-height: 1.3;
color: var(--apparatus);
}
.plate-card__title,
.plate-card__says {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.plate-card__title {
font-family: var(--face-paper);
font-size: var(--size-display);
font-weight: 600;
line-height: 1.1;
}
.plate-card__says {
align-self: start;
font-family: var(--face-pith);
font-size: var(--size-title);
font-weight: 450;
line-height: 1.3;
}
.plate-card__says b {
font-weight: 700;
}
.plate-card__foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-5);
font-family: var(--face-apparatus);
font-size: var(--size-lede);
line-height: 1.3;
}
.plate-card__mark {
font-family: var(--face-pith);
font-size: var(--size-number);
font-weight: 800;
line-height: 0.9;
letter-spacing: var(--track-number);
}
@media print {
.plate details::details-content {
display: block;
content-visibility: visible;
}
.more > summary,
.plate__rest > summary,
.plate__act {
display: none;
}
.plate__row,
.plate__pass {
break-inside: avoid;
}
.plate__full {
break-inside: avoid;
}
}
/* css/components/card.css */
.paper-list > li + li {
margin-top: 0;
}
.paper-list > li:last-child > .paper-card {
border-bottom: var(--rule);
}
.paper-card__authors {
margin-top: var(--space-2);
font: var(--type-small);
color: var(--ink-2);
}
.paper-card .plate__title a {
display: block;
}
.paper-card .plate__ident {
margin-top: var(--space-2);
}