@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: optional; src: url(../fonts/source-serif-4-static-0.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }  @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: optional; src: url(../fonts/source-serif-4-static-1.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }  @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: optional; src: url(../fonts/source-serif-4-static-2.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }  @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: optional; src: url(../fonts/source-serif-4-static-3.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }  @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: optional; src: url(../fonts/source-serif-4-static-4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: optional; src: url(../fonts/source-serif-4-static-5.woff2) 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; }  .qn-homepage { --qn-home-space: clamp(40px, 5vw, 64px); } .qn-homepage :is(h1, h2, h3, p, a) { overflow-wrap: anywhere; } .qn-homepage .qn-positioning { max-width: 76ch; padding-block: 20px; } .qn-homepage .qn-home__featured { padding-block: 40px 48px; } .qn-homepage .qn-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: 'lead figure' 'body figure'; align-content: start; column-gap: 40px; row-gap: 0; } .qn-homepage .qn-featured__lead { grid-area: lead; min-width: 0; } .qn-homepage .qn-featured__body { grid-area: body; min-width: 0; } .qn-homepage .qn-featured__dek { margin: 24px 0 0; font-size: var(--t-dek); line-height: 1.6; max-width: 52ch; } .qn-homepage .qn-featured__meta { margin-top: 24px; font-size: 14px; } .qn-homepage .qn-featured__meta .qn-meta__author { color: var(--qn-text); } .qn-homepage .qn-featured__cta { margin: 24px 0 0; } .qn-homepage .qn-featured__figure .qn-figure__img { object-position: var(--qn-hero-focus, center); } .qn-homepage .qn-featured__title { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; max-width: 20ch; } .qn-homepage .qn-featured__figure { grid-area: figure; align-self: stretch; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-width: 0; } .qn-homepage .qn-featured__figure > a { min-width: 0; min-height: 0; height: auto; display: block; } .qn-homepage .qn-featured__figure .qn-figure { min-height: 0; aspect-ratio: 4 / 3 !important; height: 100%; } .qn-homepage .qn-featured__figure .qn-figure__img { transform: none; transition: none; } .qn-homepage .qn-figcaption { margin: 0; }  .qn-homepage .qn-featured.qn-featured--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lead' 'body'; } .qn-homepage .qn-featured--text .qn-featured__title { max-width: 26ch; font-size: clamp(34px, 5vw, 64px); } .qn-homepage .qn-featured--text .qn-featured__dek { max-width: 68ch; } .qn-home__empty { padding-block: 48px; } .qn-home-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding-block: 16px; border-bottom: 1px solid var(--qn-border); } .qn-home-index__label { color: var(--qn-faint); font-size: 13px; } .qn-home-index ul { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; } .qn-home-index a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; text-decoration: underline; text-decoration-color: var(--qn-border-firm); text-underline-offset: 4px; } .qn-home-section { padding-top: var(--qn-home-space); scroll-margin-top: 160px; } .qn-home-section__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px 32px; padding-bottom: 24px; border-bottom: 1px solid var(--qn-border-firm); } .qn-home-section__head > div { min-width: 0; } .qn-home-section__head h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.16; } .qn-home-section__head .qn-dek { font-size: 16px; line-height: 1.6; max-width: 62ch; margin: 8px 0 0; } .qn-home-section__link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--qn-accent); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; } .qn-home-list { display: grid; } .qn-home-list--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } .qn-home-entry { min-width: 0; padding-block: 28px; border-bottom: 1px solid var(--qn-border-soft); } .qn-home-entry__body { min-width: 0; } .qn-home-entry .qn-kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; line-height: 1.6; } .qn-home-entry__title { margin: 0; max-width: 46ch; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.22; text-wrap: wrap; } .qn-home-entry__title a:hover, .qn-home-entry__title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .qn-home-entry__dek { max-width: 76ch; font-size: 17px; line-height: 1.6; margin: 10px 0 0; } .qn-home-entry__meta { margin-top: 14px; font-size: 14px; line-height: 1.6; gap: 8px; } .qn-home-entry--image { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 24px; align-items: start; } .qn-home-entry__media { padding-top: 4px; min-width: 0; } .qn-home-entry--compact { padding-block: 20px; } .qn-home-entry--compact .qn-home-entry__title { font-size: clamp(20px, 2vw, 24px); } .qn-home-entry--compact .qn-home-entry__dek { font-size: 16px; } .qn-home-selected { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 28px 0; } .qn-home-selected .qn-card { min-width: 0; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--qn-border-soft); } .qn-home-selected .qn-kicker { font-size: 12px; line-height: 1.6; } .qn-home-selected .qn-card__media .qn-figure__img { transform: none; transition: none; } .qn-home-selected .qn-card--text { border-top: 2px solid var(--qn-accent); padding-top: 24px; } .qn-home-selected .qn-meta { font-size: 14px; line-height: 1.6; } .qn-home-topics { padding-bottom: 32px; } .qn-home-topics .qn-tiles { isolation: isolate; } .qn-home-topics .qn-tile { padding-block: 24px; gap: 12px; } .qn-home-topics .qn-tile__name { font-size: 22px; line-height: 1.2; } .qn-home-topics .qn-tile .qn-icon { color: var(--qn-accent); } @media (max-width: 1000px) { .qn-homepage .qn-featured { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lead' 'figure' 'body'; row-gap: 24px; } .qn-homepage .qn-featured__body > :first-child { margin-top: 0; } .qn-homepage .qn-featured__title { max-width: 28ch; } .qn-homepage .qn-featured__figure .qn-figure { height: auto; aspect-ratio: 16 / 9 !important; } } @media (max-width: 860px) { .qn-home-selected, .qn-home-list--columns { grid-template-columns: minmax(0, 1fr); } .qn-home-selected .qn-card { max-width: 100%; } } @media (max-width: 720px) { .qn-homepage .qn-home__featured { padding-block: 24px 32px; } .qn-homepage .qn-featured__title { max-width: none; } .qn-home-entry { padding-block: 24px; } .qn-home-entry__dek { font-size: 16px; } .qn-home-entry--image { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } .qn-home-entry--image .qn-home-entry__body .qn-home-entry__dek { font-size: 15px; } .qn-home-section { scroll-margin-top: 200px; } .qn-home-index a { min-height: 44px; } } @media (max-width: 375px) { .qn-home-entry--image { grid-template-columns: minmax(0, 1fr); } .qn-home-entry__media { max-width: 144px; } } @media print { .qn-home-index { display: none; } .qn-home-section { break-before: auto; } .qn-home-entry { break-inside: avoid; } }  .qn-home-section { margin-top: 32px; padding: clamp(20px, 3vw, 40px); border: 1px solid var(--qn-border-firm); background: var(--qn-surface); isolation: isolate; scroll-margin-top: 100px; } .qn-home-section__head { border-top: 3px solid var(--qn-accent); padding-top: 20px; } #qn-home-selected, #qn-home-explainers { background: var(--qn-card); } #qn-home-research .qn-home-section__head, #qn-home-particles .qn-home-section__head { border-top-color: var(--qn-accent-2); } .qn-home-selected { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qn-home-entry .qn-kicker, .qn-home-selected .qn-kicker { font-size: 13px; letter-spacing: .08em; } .qn-home-entry__dek, .qn-home-entry--image .qn-home-entry__body .qn-home-entry__dek, .qn-home-selected .qn-card__dek { font-size: 17px; line-height: 1.6; } .qn-home-list .qn-home-entry:last-child { border-bottom: 0; padding-bottom: 0; } .qn-home-archive { padding-block: 32px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .qn-home-archive .qn-dek { margin: 0; } @media (max-width: 860px) { .qn-home-selected { grid-template-columns: minmax(0, 1fr); } } @media print { .qn-home-section { background: none; border: 0; padding: 20px 0; } }