/* ==========================================================================
NRI Affairs — base.css
Fonts, canonical tokens, resets, and the global chrome that the
article comp defines (header, footer, newsletter, mobile share bar, share sheet).
Generated from the supplied comps. Do not hand-edit values: every colour,
size, weight, radius, shadow and transition below traces back to
work/extract/home.css or work/extract/article.css.
See work/DESIGN-SYSTEM.md for the token table, conflicts and inventory.
========================================================================== */
/* ==========================================================================
SELF-HOSTED WEBFONTS
Generated from the filenames in assets/fonts/. unicode-range values are
lifted verbatim from the comps' own @font-face rules (the minified `U+??`
expanded to its exact equivalent U+0000-00FF).
========================================================================== */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/fraunces-vietnamese-500-normal-GOH_-EGq.woff2') format('woff2'),
url('../fonts/fraunces-vietnamese-500-normal-B-KbxExq.woff') format('woff');
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: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/fraunces-latin-ext-500-normal-Z5DV8IzT.woff2') format('woff2'),
url('../fonts/fraunces-latin-ext-500-normal-BMcFk1Xs.woff') format('woff');
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/fraunces-latin-500-normal-DnGCNyPD.woff2') format('woff2'),
url('../fonts/fraunces-latin-500-normal-BTR4KCeb.woff') format('woff');
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: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/fraunces-vietnamese-600-normal-BjlAJixd.woff2') format('woff2'),
url('../fonts/fraunces-vietnamese-600-normal-DlAl5EAR.woff') format('woff');
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: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/fraunces-latin-ext-600-normal-BtzmzP0X.woff2') format('woff2'),
url('../fonts/fraunces-latin-ext-600-normal-B0Dy4lqi.woff') format('woff');
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/fraunces-latin-600-normal-BFCDtZfi.woff2') format('woff2'),
url('../fonts/fraunces-latin-600-normal-DL5QCzvS.woff') format('woff');
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: 'Newsreader';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/newsreader-vietnamese-400-normal-DdKr49mV.woff2') format('woff2'),
url('../fonts/newsreader-vietnamese-400-normal-BekUZro8.woff') format('woff');
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: 'Newsreader';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/newsreader-latin-ext-400-normal-svq1FPys.woff2') format('woff2'),
url('../fonts/newsreader-latin-ext-400-normal-DYA1XoQK.woff') format('woff');
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/newsreader-latin-400-normal-BFBkh4jY.woff2') format('woff2'),
url('../fonts/newsreader-latin-400-normal-gRTjlS2D.woff') format('woff');
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: 'Newsreader';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/newsreader-vietnamese-500-normal-CL6a8tp2.woff2') format('woff2'),
url('../fonts/newsreader-vietnamese-500-normal-BEAbKU8A.woff') format('woff');
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: 'Newsreader';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/newsreader-latin-ext-500-normal-BNHmvKvI.woff2') format('woff2'),
url('../fonts/newsreader-latin-ext-500-normal-CZruMFou.woff') format('woff');
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/newsreader-latin-500-normal-B66TYsaK.woff2') format('woff2'),
url('../fonts/newsreader-latin-500-normal-DFwuUcdu.woff') format('woff');
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: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/hanken-grotesk-cyrillic-ext-400-normal.woff2') format('woff2'),
url('../fonts/hanken-grotesk-cyrillic-ext-400-normal.woff') format('woff');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/hanken-grotesk-vietnamese-400-normal-BLrFBAHj.woff2') format('woff2'),
url('../fonts/hanken-grotesk-vietnamese-400-normal-C-iWyKLC.woff') format('woff');
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: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-ext-400-normal-DR7lHpW4.woff2') format('woff2'),
url('../fonts/hanken-grotesk-latin-ext-400-normal-DI-aIsWt.woff') format('woff');
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-400-normal-BG6hkEXj.woff2') format('woff2'),
url('../fonts/hanken-grotesk-latin-400-normal-CjyVwvJV.woff') format('woff');
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: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/hanken-grotesk-cyrillic-ext-500-normal.woff2') format('woff2'),
url('../fonts/hanken-grotesk-cyrillic-ext-500-normal.woff') format('woff');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/hanken-grotesk-vietnamese-500-normal-DxwlvJEc.woff2') format('woff2'),
url('../fonts/hanken-grotesk-vietnamese-500-normal-DkDHNoXI.woff') format('woff');
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: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-ext-500-normal-DLb9JDK8.woff2') format('woff2'),
url('../fonts/hanken-grotesk-latin-ext-500-normal-BNvrJ0Ju.woff') format('woff');
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-500-normal-DrDcrrxK.woff2') format('woff2'),
url('../fonts/hanken-grotesk-latin-500-normal-Bo-NxEKf.woff') format('woff');
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: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/hanken-grotesk-cyrillic-ext-600-normal.woff2') format('woff2'),
url('../fonts/hanken-grotesk-cyrillic-ext-600-normal.woff') format('woff');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/hanken-grotesk-vietnamese-600-normal-Cp8QQjQf.woff2') format('woff2'),
url('../fonts/hanken-grotesk-vietnamese-600-normal-DHaFH8q1.woff') format('woff');
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: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-ext-600-normal-FY8kSObK.woff2') format('woff2'),
url('../fonts/hanken-grotesk-latin-ext-600-normal-DHIm05DD.woff') format('woff');
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-600-normal-CIXX6EOa.woff2') format('woff2'),
url('../fonts/hanken-grotesk-latin-600-normal-NEn2C4Q3.woff') format('woff');
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: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/hanken-grotesk-cyrillic-ext-700-normal.woff2') format('woff2'),
url('../fonts/hanken-grotesk-cyrillic-ext-700-normal.woff') format('woff');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/hanken-grotesk-vietnamese-700-normal-C4RNfQp6.woff2') format('woff2'),
url('../fonts/hanken-grotesk-vietnamese-700-normal-CslVg6dq.woff') format('woff');
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: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-ext-700-normal-CK2OfQqO.woff2') format('woff2'),
url('../fonts/hanken-grotesk-latin-ext-700-normal-BXHnjv6S.woff') format('woff');
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-700-normal-CeQ8H3UY.woff2') format('woff2'),
url('../fonts/hanken-grotesk-latin-700-normal-6IGCzoPh.woff') format('woff');
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;
}
/* NOTE — Hanken Grotesk cyrillic-ext (U+0460-052F …): the article comp carried
these four faces with the font binary inlined as a base64 data: URI, and the
extraction that fed the build replaced those payloads with a placeholder
token, so the subset was missing from the first release. The binaries have
since been recovered from the comp and self-hosted alongside the rest, and
the four faces are emitted above. All 28 faces are now complete. */
/* --------------------------------------------------------------------------
DEVANAGARI: served from Google Fonts, see inc/enqueue.php
--------------------------------------------------------------------------
The homepage comp's Hindi desk asks for "Noto Sans Devanagari" and
"Noto Serif Devanagari" (fallback "Nirmala UI"). Neither comp shipped
@font-face rules for them — the comp loaded them from Google.
fonts.gstatic.com is blocked by this environment's egress policy
(403 on CONNECT), so the files could NOT be downloaded and self-hosted.
Until they are, enqueue them from Google in inc/enqueue.php:
Noto Sans Devanagari — 500, 600, 700
Noto Serif Devanagari — 400, 500, 600, 700
Used by (home.css): .hindi-desk::before, .hindi-head h2, .hindi-head .more,
.hindi-tag, .hindi-lead h3, .hindi-lead p, .hindi-card h3, .hindi-byline
-------------------------------------------------------------------------- */
/* ==========================================================================
PREFLIGHT — lifted verbatim from article.css (@layer theme/base/utilities)
========================================================================== */
@layer theme {
:root,
:host {
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing: .25rem;
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*,
:after,
:before,
::backdrop {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
::file-selector-button {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
html,
:host {
-webkit-text-size-adjust: 100%;
tab-size: 4;
line-height: 1.5;
font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings,normal);
font-variation-settings: var(--default-font-variation-settings,normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp,
pre {
font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings,normal);
font-variation-settings: var(--default-mono-font-variation-settings,normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol,
ul,
menu {
list-style: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
vertical-align: middle;
display: block;
}
img,
video {
max-width: 100%;
height: auto;
}
button,
input,
select,
optgroup,
textarea {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
:where(select:is([multiple],[size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple],[size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder {
color: currentColor;
}
@supports (color:color-mix(in lab, red, red)) {
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit {
padding-block: 0;
}
::-webkit-datetime-edit-year-field {
padding-block: 0;
}
::-webkit-datetime-edit-month-field {
padding-block: 0;
}
::-webkit-datetime-edit-day-field {
padding-block: 0;
}
::-webkit-datetime-edit-hour-field {
padding-block: 0;
}
::-webkit-datetime-edit-minute-field {
padding-block: 0;
}
::-webkit-datetime-edit-second-field {
padding-block: 0;
}
::-webkit-datetime-edit-millisecond-field {
padding-block: 0;
}
::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button,
input:where([type=button],[type=reset],[type=submit]) {
appearance: button;
}
::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button {
height: auto;
}
::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden=until-found])) {
display: none!important;
}
}
@layer components;
/* The comp's Tailwind build also emitted an @layer utilities block defining
.visible, .fixed, .relative, .start and .table. Neither comp uses any of
them, and on a real WordPress install those generic names collide with
plugin, widget and block-editor markup — .table in particular would restyle
any element a plugin happens to class "table". Removed at integration; the
layer itself is still declared above so the cascade order is unchanged. */
@layer utilities;
/* ==========================================================================
CANONICAL DESIGN TOKENS
Base set = the article comp (the superset). Tokens only the homepage comp
defined are folded in. Where the two comps disagreed the ARTICLE value wins
here and the homepage value is re-declared in `body.home` (home.css), so the
front page keeps its own palette. Conflicts are marked (article | home).
========================================================================== */
:root {
/* --- navy scale ------------------------------------------------------- */
--navy-950: #07111f; /* article only */
--navy-900: #0a1524; /* both comps agree */
--navy-850: #0e1c2e; /* CONFLICT: article #0e1c2e | home #0d1a2d */
--navy-800: #12243a; /* CONFLICT: article #12243a | home #112236 */
--navy-750: #152840; /* home only */
--navy-700: #1b3452; /* CONFLICT: article #1b3452 | home #1b3251 */
/* --- gold ------------------------------------------------------------- */
--gold: #d6ac5b; /* both comps agree */
--gold-light: #edcd8b; /* article only */
--gold-dark: #9b722f; /* article only */
--gold-bright: #ecca7f; /* home only */
--gold-deep: #a87f33; /* home only */
/* --- paper-surface contrast (1.3.0, A11Y-01) ---------------------------
The three tokens above were chosen against the NAVY chrome, where they
pass comfortably — gold #d6ac5b on navy #0a1524 is 8.65:1 and is not
touched by anything here. Reused on the cream and paper grounds they fail
WCAG 2.2 SC 1.4.3 across the whole site: 34 failing nodes on the article
template alone, from #b09a72 on #fbf8f1 at 2.57:1 up to #9b722f on
#fffdf8 at 4.26:1, on figure captions, article tags, bylines, "read next"
links, sidebar links and the trivia/poll kickers.
These two are the same hues, darkened until they clear 4.5:1 against
EVERY paper ground the theme uses — #fffdf8, #fbf8f1, #f3ede2, #f1eadf,
#f0e9dd, #f3f3e9, #efe7d8. Worst case is --gold-paper on #efe7d8 at
5.04:1 and --ink-faint-paper on the same ground at 4.75:1.
They are new tokens rather than a redefinition of --gold-dark /
--ink-faint on purpose: those two are also used on dark surfaces, where
darkening them would make things worse. Use these wherever the ground is
paper, and the originals wherever it is navy. */
--gold-paper: #7d5b22; /* ≥5.0:1 on every paper ground */
--ink-faint-paper: #67655e; /* ≥4.75:1 on every paper ground */
/* --- paper surfaces (article reading view) ---------------------------- */
--cream: #f3eee4; /* article only */
--paper: #fbf8f1; /* article only */
--paper-deep: #eee6d8; /* article only */
/* --- ink -------------------------------------------------------------- */
--ink: #171b20; /* CONFLICT: article #171b20 | home #eef3f9 */
--ink-soft: #4e5052; /* article only */
--ink-faint: #7b7973; /* article only */
--ink-2: #a9b8cc; /* home only */
--ink-3: #7d8da4; /* home only; was #76869d — 4.33:1 on #112236 (A11Y-10), 4.76:1 now */
/* --- status ----------------------------------------------------------- */
--red: #e0584a; /* home only */
--green: #5fb98f; /* home only */
/* --- rules and hairlines ---------------------------------------------- */
--line: #dcd4c7; /* CONFLICT: article #dcd4c7 | home rgba(173,194,224,.095) */
--line-2: rgba(173,194,224,.17); /* home only (home's resolved value) */
--dark-line: #bed0e829; /* article only */
/* --- type ------------------------------------------------------------- */
--display: "Fraunces", Georgia, serif; /* both comps agree */
--reading: "Newsreader", Georgia, serif; /* article name */
--serif: "Newsreader", Georgia, serif; /* home name for the same stack */
--sans: "Hanken Grotesk", Arial, sans-serif; /* CONFLICT: article Arial | home system-ui fallback */
/* --- measure ---------------------------------------------------------- */
--site-width: 1240px; /* article: global chrome width */
--maxw: 1300px; /* home only; body.home narrows this to 1240px */
}
/* ==========================================================================
GLOBAL RESETS, SHARED UTILITIES AND SITE CHROME
Lifted verbatim from article.css. The article comp's chrome is canonical
site-wide: utility bar, masthead, primary nav, trend strip, newsletter
block, footer, mobile share bar and share sheet.
========================================================================== */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--navy-900);
color: var(--ink);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
margin: 0;
}
body:before {
z-index: 1000;
pointer-events: none;
content: "";
opacity: .22;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
position: fixed;
inset: 0;
}
a {
color: inherit;
text-decoration: none;
}
button,
input {
font: inherit;
}
button {
color: inherit;
}
img {
max-width: 100%;
display: block;
}
svg {
width: 20px;
height: 20px;
}
.site-width {
width: min(var(--site-width), calc(100% - 56px));
margin-inline: auto;
}
.mobile-only {
display: none;
}
/* Shared with .section-kicker/.ad-label/.rail-label in article.css — same
declarations, split so no selector lives in two stylesheets. Keep in sync. */
.eyebrow {
letter-spacing: .17em;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.site-header {
z-index: 20;
color: #eef3f9;
background: var(--navy-900);
position: relative;
}
.utility-bar {
border-bottom: 1px solid var(--dark-line);
color: #8391a4;
height: 32px;
font-size: 11px;
}
.utility-inner {
justify-content: space-between;
align-items: center;
height: 100%;
display: flex;
}
.utility-links {
align-items: center;
gap: 20px;
height: 100%;
display: flex;
}
.utility-links a {
transition: color .18s;
}
.utility-links a:hover {
color: #fff;
}
.utility-links .utility-subscribe {
background: var(--gold);
color: #211807;
place-items: center;
height: 100%;
padding-inline: 14px;
font-weight: 700;
display: grid;
}
.masthead {
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 116px;
display: flex;
position: relative;
}
.wordmark {
font-family: var(--display);
letter-spacing: .008em;
color: #f5f7fa;
font-size: 48px;
font-weight: 600;
line-height: .9;
}
.wordmark span {
color: var(--gold);
}
.masthead-rule {
color: #9cabbf;
align-items: center;
gap: 14px;
margin-top: 14px;
display: flex;
}
.masthead-rule span {
background: var(--dark-line);
width: 72px;
height: 1px;
}
.masthead-rule b {
letter-spacing: .22em;
text-transform: uppercase;
font-size: 9px;
font-weight: 600;
}
/* --- Brand lockup ------------------------------------------------------------
v1.2.0. The publisher's chosen logo, recreated in CSS rather than shipped as a
raster: a tricolour bar over the wordmark, with the masthead's existing
rule–strapline–rule beneath it. Every figure below is measured off the supplied
reference (dark version, 1254px wide) and expressed as a ratio of the wordmark's
cap height, so the lockup rescales cleanly at every breakpoint:
reference px / cap height (119px)
tricolour bar height 71.5 0.601
one stripe 23.8 0.200
bar bottom -> cap top 38.5 0.324
baseline -> strapline cap top 40 0.336
strapline cap height 30 0.252
lockup width 1086 9.13 (build renders 9.58 in Fraunces)
Fraunces' cap height is 1400/2000 = 0.70em, so a ratio R of cap height is
R x 0.70em of the wordmark's own font-size. The lockup's width is whatever the
wordmark renders at — `width: max-content` on a column flex box — and the bar and
the rule row stretch to it, which is how the reference locks the three parts
together. `.masthead-lockup` stays block-level so the masthead's own flex
centring, its 116px box and both header buttons are untouched.
Colours are sampled from the reference, not taken from the flag specification:
its saffron and green are markedly punchier than #FF9933 / #138808. They are
tokens so the publisher can swap to the official values in one line.
-------------------------------------------------------------------------- */
:root {
--flag-saffron: #fc5d03;
--flag-white: #fefefe;
--flag-green: #025d06;
}
.masthead-lockup,
.wordmark-lockup {
flex-direction: column;
align-items: stretch;
width: max-content;
max-width: 100%;
display: flex;
}
.wordmark-bar {
background: linear-gradient(var(--flag-saffron) 0 33.333%, var(--flag-white) 33.333% 66.666%, var(--flag-green) 66.666% 100%);
height: .42em;
margin-bottom: .115em;
}
/* Beats `.wordmark span`, which stays gold for 404.php's reuse of the wordmark. */
.wordmark-lockup .wordmark-text {
color: #f5f7fa;
display: block;
}
/* Reference strapline and rules are white, not the comp's slate. */
.masthead-lockup .masthead-rule {
color: #f5f7fa;
margin-top: 2px;
}
.masthead-lockup .masthead-rule span {
background: #f5f7fa;
flex: 1;
width: auto;
}
.masthead-lockup .masthead-rule b {
letter-spacing: .27em;
margin-right: -.27em;
font-size: 12px;
}
.header-icon {
cursor: pointer;
background: 0 0;
border: 1px solid #0000;
place-items: center;
width: 38px;
height: 38px;
display: grid;
}
.header-icon.mobile-only {
display: none;
}
.header-icon:hover {
border-color: var(--dark-line);
color: var(--gold-light);
}
.masthead-search {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.primary-nav {
z-index: 50;
border-top: 1px solid var(--dark-line);
border-bottom: 1px solid var(--dark-line);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
background: #0a1524f5;
height: 48px;
position: sticky;
top: 0;
}
.nav-inner {
scrollbar-width: none;
justify-content: center;
align-items: center;
height: 100%;
display: flex;
overflow-x: auto;
}
.nav-inner::-webkit-scrollbar {
display: none;
}
.nav-inner a {
color: #a7b3c3;
letter-spacing: .075em;
white-space: nowrap;
text-transform: uppercase;
align-items: center;
height: 100%;
padding-inline: 17px;
font-size: 11px;
font-weight: 700;
transition: color .18s;
display: flex;
position: relative;
}
.nav-inner a:hover,
.nav-inner a.active {
color: #fff;
}
.nav-inner a.active:after {
content: "";
background: var(--gold);
height: 2px;
position: absolute;
bottom: -1px;
left: 17px;
right: 17px;
}
.trend-strip {
border-bottom: 1px solid var(--dark-line);
background: var(--navy-850);
height: 36px;
}
.trend-inner {
color: #9eabba;
justify-content: center;
align-items: center;
gap: 14px;
height: 100%;
font-size: 11px;
display: flex;
overflow: hidden;
}
.trend-inner p {
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
overflow: hidden;
}
/* A Hindi headline in the strip (template-parts/header/trend-strip.php marks
it lang="hi" + .nria-hi). The Devanagari stylesheet is enqueued whenever the
strip holds one (CODE-21); this is what makes the face apply. Stack copied
from `.nria-hi .nria-card-meta`. */
.trend-inner .nria-hi,
.trend-inner .nria-hi a {
font-family: "Noto Sans Devanagari","Nirmala UI",sans-serif;
letter-spacing: 0;
}
.trend-label {
color: #ec6d5f;
letter-spacing: .12em;
text-transform: uppercase;
flex: none;
align-items: center;
gap: 7px;
font-weight: 700;
display: flex;
}
.trend-label i {
background: #ec6d5f;
border-radius: 50%;
width: 6px;
height: 6px;
box-shadow: 0 0 0 4px #ec6d5f1c;
}
.trend-separator {
color: #4c5b6d;
}
.newsletter-block {
background: radial-gradient(circle at 12% 0, #d6ac5b21, transparent 29%), var(--navy-950);
color: #edf2f8;
margin-top: 28px;
padding: 62px 0;
}
.newsletter-inner {
grid-template-columns: 1.15fr .9fr;
align-items: center;
gap: 70px;
display: grid;
}
.newsletter-inner .eyebrow {
color: var(--gold-light);
}
.newsletter-inner h2 {
max-width: 590px;
font-family: var(--display);
letter-spacing: -.025em;
margin: 11px 0;
font-size: 38px;
font-weight: 600;
line-height: 1.05;
}
.newsletter-inner>div>p {
color: #9aa7b9;
max-width: 570px;
font-family: var(--reading);
margin: 0;
font-size: 16px;
line-height: 1.48;
}
.newsletter-inner form label {
color: #8c9aae;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 8px;
font-size: 10px;
font-weight: 700;
display: block;
}
.newsletter-inner form>div {
display: flex;
}
.newsletter-inner input {
color: #fff;
background: #0d1b2d;
border: 1px solid #33445b;
border-right: 0;
border-radius: 3px 0 0 3px;
outline: none;
flex: 1;
min-width: 0;
height: 48px;
padding-inline: 15px;
}
.newsletter-inner input:focus {
border-color: var(--gold);
}
.newsletter-inner button {
border: 1px solid var(--gold);
background: var(--gold);
color: #211806;
cursor: pointer;
white-space: nowrap;
border-radius: 0 3px 3px 0;
height: 48px;
padding-inline: 20px;
font-size: 11px;
font-weight: 700;
}
.newsletter-inner form>small {
color: var(--ink-3); /* was #617087 — 3.77:1 on #07111f at 9px (A11Y-R3-04); 5.61:1 now */
margin-top: 9px;
font-size: 9px;
display: block;
}
.subscribe-success {
background: #d6ac5b12;
border: 1px solid #d6ac5b5c;
align-items: center;
gap: 14px;
padding: 20px;
display: flex;
}
.subscribe-success>svg {
color: var(--gold-light);
}
.subscribe-success b,
.subscribe-success small {
display: block;
}
.subscribe-success b {
font-family: var(--display);
font-size: 20px;
}
.subscribe-success small {
color: #8796aa;
margin-top: 3px;
}
footer {
border-top: 1px solid var(--dark-line);
background: var(--navy-900);
color: #9ba8b8;
padding: 50px 0 24px;
}
.footer-grid {
grid-template-columns: 2fr repeat(3,1fr);
gap: 52px;
display: grid;
}
.footer-brand .wordmark {
font-size: 30px;
}
.footer-brand p {
max-width: 300px;
font-family: var(--reading);
margin: 15px 0 0;
font-size: 13px;
line-height: 1.5;
}
.footer-grid h2 {
color: var(--gold-light);
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 12px;
font-size: 9px;
font-weight: 700;
}
.footer-grid>div:not(.footer-brand) a {
color: #8c99a9;
padding-block: 5px;
font-size: 12px;
display: block;
}
.footer-grid a:hover {
color: #fff;
}
.footer-bottom {
border-top: 1px solid var(--dark-line);
color: #7784a0; /* was #56657a — 3.08:1 on navy at 10px (A11Y-10); 4.88:1 now */
justify-content: space-between;
margin-top: 38px;
padding-top: 18px;
font-size: 10px;
display: flex;
}
.mobile-share-bar {
display: none;
}
.share-overlay {
z-index: 300;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: #030910b8;
place-items: center;
padding: 20px;
animation: .18s both fade-in;
display: grid;
position: fixed;
inset: 0;
}
.share-sheet {
background: var(--paper);
border: 1px solid #d9d1c5;
width: min(560px,100%);
padding: 28px;
animation: .22s both sheet-in;
box-shadow: 0 26px 90px #00000061;
}
.share-sheet-head {
border-bottom: 1px solid var(--line);
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding-bottom: 21px;
display: flex;
}
.share-sheet-head .eyebrow {
color: var(--gold-dark);
}
.share-sheet-head h2 {
font-family: var(--display);
margin: 7px 0 0;
font-size: 28px;
font-weight: 600;
}
.share-sheet-head button {
border: 1px solid var(--line);
cursor: pointer;
background: 0 0;
border-radius: 50%;
place-items: center;
width: 34px;
height: 34px;
display: grid;
}
.share-options {
grid-template-columns: repeat(3,1fr);
gap: 9px;
padding-top: 21px;
display: grid;
}
.share-options a,
.share-options button {
border: 1px solid var(--line);
color: #424448;
cursor: pointer;
background: #fffdf9;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
min-height: 76px;
font-size: 10px;
font-weight: 600;
transition: border-color .16s,color .16s,transform .16s;
display: flex;
}
.share-options a:hover,
.share-options button:hover {
border-color: var(--gold-dark);
color: var(--gold-dark);
transform: translateY(-2px);
}
.share-options span {
place-items: center;
width: 28px;
height: 28px;
display: grid;
}
.toast {
z-index: 400;
background: var(--navy-900);
color: #f1f5fa;
border: 1px solid #d6ac5b75;
align-items: center;
gap: 9px;
padding: 12px 15px;
font-size: 11px;
font-weight: 600;
animation: .2s both sheet-in;
display: flex;
position: fixed;
bottom: 22px;
right: 22px;
box-shadow: 0 14px 35px #00000047;
}
.toast svg {
width: 17px;
height: 17px;
color: var(--gold-light);
}
@keyframes fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes sheet-in {
0% {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (width<=1120px) {
.nav-inner {
justify-content: flex-start;
}
}
/* --------------------------------------------------------------------------
HOME-03 — the nav is either visible or behind a control the reader can find
--------------------------------------------------------------------------
Between 641px and ~885px the primary nav was clipped with no burger and no
scrollbar. Measured `.nav-inner` content width against its track:
viewport track content burger
700 649 824 none
768 717 824 none
820 740 824 none
900 829 829 none
At 768 that is "Events" entirely off-screen, 107px past the edge, and "Watch"
cut by 28px. `.nav-inner` is `overflow-x: auto` but `scrollbar-width: none`
(:978) and `::-webkit-scrollbar { display: none }` (:987), so there is no
affordance at all; the burger that would expose the full menu was gated at
≤640px. Nothing was unreachable — Tab scrolls hidden links into view and a
trackpad swipe works — but a mouse user on a 768–880px window had no visible
way to reach the last two sections and no indication they existed.
900px is measured, not chosen: it is the width at which `.nav-inner` first
fits its own content. Above it nothing changes, so the comp's desktop look at
≥1024 is untouched — verified in the pixel regression, which reports zero
diff at 1440 and 1024.
Deliberately narrow in BOTH directions. Only the burger and the nav strip
move, so the utility bar, the masthead rule and the desktop wordmark all stay
down to 640 exactly as before — this is not "mobile chrome, earlier", it is
the nav swapping to the menu that already contains all nine links. And the
band stops AT 640: below that the existing mobile block already shows the
burger and re-tunes the nav strip to a 43px scroller at 9px, which is the
comp's mobile treatment and is not part of this finding. An unbounded
`width<=900` would have deleted the mobile nav strip too — caught by the
pixel regression, which showed 375 losing 43px of page height.
assets/js/nav.js's resize guard carries the same number. Change one and you
must change the other.
-------------------------------------------------------------------------- */
@media (900px >= width > 640px) {
.header-icon.mobile-only {
display: grid;
}
.masthead .mobile-only {
position: absolute;
left: 0;
}
.primary-nav {
display: none;
}
}
@media (width<=820px) {
.site-width {
width: min(100% - 36px,740px);
}
.masthead {
min-height: 96px;
}
.wordmark {
font-size: 42px;
}
/* Lockup ratios hold: the bar is in em, only the two px figures rescale. */
.masthead-lockup .masthead-rule {
margin-top: 2px;
}
.masthead-lockup .masthead-rule b {
font-size: 11px;
}
.newsletter-inner {
gap: 35px;
}
}
@media (width<=640px) {
body {
padding-bottom: 64px;
}
/* A11Y-R3-06 — Focus Not Obscured (WCAG 2.2 SC 2.4.11). The fixed
.mobile-share-bar takes the bottom 58px of the viewport (48px bar + 10px
gap, plus the safe-area inset), and a link already sitting in that band
when Tab reached it was focused in place, 19/19px under the bar. Focus
scrolling honours scroll-padding, so the browser now treats the band as
off-screen and scrolls the focused element clear of it. 72px = bar + gap
+ 14px of air. The body's 64px padding-bottom above only protects the end
of the page; this protects every focus stop. */
html {
scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.site-width {
width: calc(100% - 34px);
}
.mobile-only,
.header-icon.mobile-only {
display: grid;
}
.utility-bar,
.masthead-rule {
display: none;
}
.masthead {
flex-direction: row;
justify-content: center;
min-height: 75px;
}
.masthead .mobile-only {
position: absolute;
left: 0;
}
.masthead-search {
right: 0;
}
.wordmark {
font-size: 33px;
}
.primary-nav {
height: 43px;
}
.nav-inner {
width: 100%;
padding-inline: 8px;
}
.nav-inner a {
padding-inline: 12px;
font-size: 9px;
}
.nav-inner a.active:after {
left: 12px;
right: 12px;
}
.trend-strip {
height: 34px;
}
.trend-inner {
justify-content: flex-start;
width: 100%;
padding-inline: 17px;
}
.trend-inner p:nth-of-type(2),
.trend-separator {
display: none;
}
.newsletter-block {
margin-top: 0;
padding: 46px 0;
}
.newsletter-inner {
display: block;
}
.newsletter-inner h2 {
font-size: 33px;
}
.newsletter-inner form,
.subscribe-success {
margin-top: 28px;
}
.newsletter-inner form>div {
display: block;
}
.newsletter-inner input,
.newsletter-inner button {
border-radius: 3px;
width: 100%;
}
.newsletter-inner input {
border-right: 1px solid #33445b;
}
.newsletter-inner button {
margin-top: 8px;
}
footer {
padding-top: 42px;
}
.footer-grid {
grid-template-columns: repeat(2,1fr);
gap: 30px 20px;
}
.footer-brand,
.footer-grid>div:last-child {
grid-column: 1/-1;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.mobile-share-bar {
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 150;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
background: #fbf8f1f0;
border: 1px solid #97897457;
border-radius: 4px;
justify-content: center;
align-items: center;
gap: 2px;
width: min(100% - 24px,356px);
min-height: 48px;
padding: 5px 7px;
display: flex;
position: fixed;
left: 50%;
transform: translate(-50%);
box-shadow: 0 7px 22px #0c121821;
}
.mobile-share-label {
color: #716e68;
letter-spacing: .11em;
text-transform: uppercase;
border-right: 1px solid #ddd4c7;
margin-right: 3px;
padding: 0 11px 0 7px;
font-size: 8px;
font-weight: 700;
}
.mobile-share-bar button,
.mobile-share-bar a {
color: #55575a;
cursor: pointer;
background: 0 0;
border: 0;
flex: 0 0 39px;
place-items: center;
width: 39px;
height: 36px;
transition: color .16s,background .16s;
display: grid;
}
.mobile-share-bar button:active,
.mobile-share-bar a:active {
color: var(--gold-dark);
background: #d6ac5b1f;
}
.mobile-share-bar svg {
width: 18px;
height: 18px;
}
.mobile-share-bar button:last-child {
border-left: 1px solid #ddd4c7;
margin-left: 2px;
}
.share-overlay {
align-items: end;
padding: 0;
}
.share-sheet {
width: 100%;
padding: 24px 17px calc(24px + env(safe-area-inset-bottom));
border: 0;
border-radius: 12px 12px 0 0;
}
.share-options {
grid-template-columns: repeat(3,1fr);
}
.toast {
right: 12px;
bottom: calc(72px + env(safe-area-inset-bottom));
justify-content: center;
left: 12px;
}
}
@media (prefers-reduced-motion:reduce) {
*,
:before,
:after {
scroll-behavior: auto!important;
transition-duration: .01ms!important;
animation-duration: .01ms!important;
animation-iteration-count: 1!important;
}
}
/* ==========================================================================
=== Archive templates ===
Agent E. Secondary templates (index / archive / category / tag / author /
date / search / 404 / page / content-none) have no comp. Every declaration
below is copied verbatim from an existing component in
assets/css/home.css or assets/css/article.css and re-pointed at a new,
`nria-`-prefixed selector, because:
- home.css is scoped to `body.home` and never loads off the front page;
- article.css only loads on `is_singular('post')`.
Nothing here shares a selector with home.css or article.css, so the
design-system invariant of zero cross-file selector overlap still holds.
The provenance of every rule is named in the comment above it.
========================================================================== */
/* --- Archive surface -------------------------------------------------------
Token block copied verbatim from `body.home` (home.css) minus --maxw, so an
archive renders in the homepage's light-on-navy palette rather than the
article's dark-on-paper one. --line / --line-2 carry home's *resolved*
values (the comp declares each twice; the trailing "calibrated editorial
separators" block wins). `color` must be restated: redefining --ink on a
descendant does not re-resolve the `color` already inherited from .
-------------------------------------------------------------------------- */
.nria-archive {
--navy-900: #0a1524;
--navy-850: #0d1a2d;
--navy-800: #112236;
--navy-750: #152840;
--navy-700: #1b3251;
--line: rgba(173,194,224,.095);
--line-2: rgba(173,194,224,.17);
--ink: #eef3f9;
--ink-2: #a9b8cc;
--ink-3: #7d8da4;
--gold: #d6ac5b;
--gold-bright: #ecca7f;
--gold-deep: #a87f33;
--red: #e0584a;
--green: #5fb98f;
color: var(--ink);
font-family: var(--sans);
line-height: 1.5;
}
/* from `body.home .sect` + its trailing border-bottom-color override */
.nria-arch-section {
padding: 38px 0;
border-bottom: 1px solid rgba(173,194,224,.085);
}
.nria-arch-section:last-child {
border-bottom: 0;
padding-bottom: 64px;
}
/* --- Archive header --------------------------------------------------------
The `sect-head` treatment scaled up: eyebrow from `body.home .kicker`,
title from `body.home .bigread h2`, dek from `body.home .bigread .dek`,
meta from `body.home .meta`, hairline from `body.home .sect-head .ln`
(visible here, as `.section-rule-heading .rule` is in article.css).
-------------------------------------------------------------------------- */
.nria-arch-head {
padding: 38px 0 0;
}
/* from `.breadcrumbs` (article.css:66) — the trail archive-header.php and
author-card.php print since 1.4.0 (HOME-22). Archives load base.css only,
whose breadcrumb rules were scoped to `.nria-page-intro`, so the trail
rendered as default-size inline text. Same values as that block except the
colour: the article's #728096 is 4.58:1 on the navy; --ink-3 (#7d8da4, the
`.nria-arch-meta` colour) is 5.43:1 on #0a1524 and 4.76:1 on the darkest
card ground, so the trail is not the lowest-contrast text on the page
(A11Y-R2-01 walk). Rank Math wraps its crumbs in a
, hence the second
rule. */
.nria-archive .breadcrumbs,
.nria-archive .rank-math-breadcrumb {
color: var(--ink-3);
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 22px;
font-size: 11px;
display: flex;
}
.nria-archive .rank-math-breadcrumb p {
color: inherit;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0;
font-size: inherit;
display: flex;
}
.nria-archive .breadcrumbs a,
.nria-archive .rank-math-breadcrumb a {
color: inherit;
text-decoration: none;
}
.nria-archive .breadcrumbs a:hover,
.nria-archive .rank-math-breadcrumb a:hover {
color: var(--gold-light);
}
/* On author pages the trail is printed before `.nria-authorcard` rather than
inside a `.nria-arch-head`, so it supplies the header's 38px top padding
itself; the card's own margin-top separates the two. */
.nria-archive .site-width > .breadcrumbs,
.nria-archive .site-width > .rank-math-breadcrumb {
padding-top: 38px;
margin-bottom: 0;
}
/* from `body.home .kicker` */
.nria-arch-eyebrow {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold);
}
/* from `body.home .bigread h2` */
.nria-arch-head h1 {
font-family: var(--display);
font-weight: 600;
font-size: 34px;
line-height: 1.06;
letter-spacing: -.012em;
margin: 12px 0 12px;
color: var(--ink);
}
/* from `body.home .bigread .dek` */
.nria-arch-dek {
font-family: var(--serif);
font-size: 17px;
line-height: 1.5;
color: var(--ink-2);
max-width: 50ch;
}
.nria-arch-dek p {
margin: 0 0 .6em;
}
.nria-arch-dek p:last-child {
margin-bottom: 0;
}
/* from `body.home .meta` */
.nria-arch-meta {
font-size: 11.5px;
color: var(--ink-3);
letter-spacing: .02em;
margin-top: 16px;
}
/* from `body.home .sect-head .ln` */
.nria-arch-rule {
display: block;
height: 1px;
background: var(--line-2);
margin-top: 24px;
}
/* --- Archive card grid -----------------------------------------------------
`body.home .desks` / `body.home .dk`, the Across the Diaspora card.
Row gap raised from the comp's single-row 22px to 38px (a comp value:
`body.home .sect` padding) because an archive stacks many rows.
-------------------------------------------------------------------------- */
.nria-arch-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 38px 22px;
}
/* from `body.home .dk` */
.nria-card {
cursor: pointer;
display: block;
min-width: 0;
}
/* from `body.home .ph` + `body.home .dk .ph` */
.nria-card-ph {
position: relative;
overflow: hidden;
background: var(--navy-750);
height: 150px;
border-radius: 4px;
margin-bottom: 11px;
}
/* from `body.home .ph img` */
.nria-card-ph img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* from `body.home .ph::after` */
.nria-card-ph::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
box-shadow: inset 0 0 0 1px var(--line);
pointer-events: none;
}
/* from `body.home .f1` … `body.home .f6` — placeholder wells for posts with
no featured image, picked deterministically from the post ID */
.nria-f1 {
background: radial-gradient(120% 120% at 20% 0%,#27486f,#16273e 55%,#0e1b2c);
}
.nria-f2 {
background: radial-gradient(120% 130% at 80% 10%,#3a5070,#1c2c44 60%,#101d2f);
}
.nria-f3 {
background: radial-gradient(130% 120% at 10% 90%,#7a5e2e,#2a3147 55%,#111e30);
}
.nria-f4 {
background: radial-gradient(120% 120% at 70% 20%,#2f5d5a,#1a2c3e 60%,#0f1c2d);
}
.nria-f5 {
background: radial-gradient(120% 120% at 30% 30%,#5a3550,#241f3a 55%,#101a2c);
}
.nria-f6 {
background: radial-gradient(120% 130% at 85% 85%,#274a6b,#172a42 60%,#0e1c2e);
}
/* from `body.home .dk .place` */
.nria-card-place {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold);
}
/* from `body.home .dk h3`. The element is an h2 on archives (the cards sit
directly under the page h1 — A11Y-08 / A11Y-R2-02) and an h3 wherever a
caller has already printed an h2; the class carries the size either way. */
.nria-card h3,
.nria-card .nria-card-title {
font-family: var(--display);
font-weight: 500;
font-size: 18px;
line-height: 1.14;
margin: 6px 0;
color: var(--ink);
}
/* from `body.home .meta` + `body.home .meta .au` */
.nria-card-meta {
font-size: 11.5px;
color: var(--ink-3);
letter-spacing: .02em;
}
.nria-card-meta .nria-au {
color: var(--ink-2);
font-weight: 600;
}
/* --- Hindi archives --------------------------------------------------------
Font stacks copied verbatim from `body.home .hindi-card h3` /
`body.home .hindi-byline` / `body.home .hindi-tag`. Applied via the
`.nria-hi` class, which is set alongside lang="hi" on the container (whole
Hindi archive) or on an individual card (nria_is_hindi() post in a mixed
archive).
-------------------------------------------------------------------------- */
.nria-hi .nria-arch-head h1,
.nria-hi .nria-card h3,
.nria-hi .nria-card .nria-card-title,
.nria-card.nria-hi h3,
.nria-card.nria-hi .nria-card-title {
font-family: "Noto Serif Devanagari","Nirmala UI",serif;
font-weight: 600;
line-height: 1.34;
letter-spacing: 0;
}
.nria-hi .nria-arch-dek {
font-family: "Noto Serif Devanagari","Nirmala UI",serif;
line-height: 1.55;
}
.nria-hi .nria-arch-eyebrow,
.nria-hi .nria-card-place,
.nria-card.nria-hi .nria-card-place,
.nria-hi .nria-card-meta,
.nria-card.nria-hi .nria-card-meta {
font-family: "Noto Sans Devanagari","Nirmala UI",sans-serif;
letter-spacing: .04em;
}
/* --- Pagination ------------------------------------------------------------
Box from `.action-button` (article.css); 44px minimum touch target and
7px 12px padding from `.google-source-button`; uppercase tracking from
`body.home .sect-head .more`.
-------------------------------------------------------------------------- */
.nria-pagination {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
margin-top: 44px;
}
.nria-pagination .page-numbers {
border: 1px solid var(--dark-line);
color: #aab6c6;
cursor: pointer;
background: 0 0;
border-radius: 4px;
justify-content: center;
align-items: center;
min-width: 44px;
min-height: 44px;
padding: 7px 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
transition: color .18s,border-color .18s,background .18s;
display: flex;
}
.nria-pagination a.page-numbers:hover,
.nria-pagination .page-numbers.current {
color: var(--gold-light);
background: #d6ac5b14;
border-color: #d6ac5b80;
}
.nria-pagination .page-numbers.dots {
border-color: #0000;
min-width: 0;
padding-inline: 2px;
}
/* Paper variant, for wp_link_pages() inside a static page's reading surface.
Rest colour from `.article-copy .source-line` / --line; hover from
`.share-rail button:hover`, the comp's paper-side button state. */
.nria-page-copy .nria-pagination {
font-family: var(--sans);
}
.nria-page-copy .nria-pagination .page-numbers {
border-color: var(--line);
color: var(--ink-soft);
}
.nria-page-copy .nria-pagination a.page-numbers:hover {
border-color: var(--gold-dark);
color: var(--gold-dark);
background: #fffdf8;
}
/* --- Search field ----------------------------------------------------------
The field itself is searchform.php and is styled by the chrome block further
down this file (`form.nria-search-form`, copied from the comp's newsletter
input — the only field treatment either comp contains). Only the wrapper
geometry belongs here, so the two blocks cannot fight and the masthead's own
`.masthead-search` icon button is never touched.
-------------------------------------------------------------------------- */
.nria-search {
max-width: 460px;
margin-top: 24px;
}
/* --- Quiet empty state -----------------------------------------------------
`content-none.php`. Header voice from the archive header above; body copy
from `body.home .bigread .dek`.
-------------------------------------------------------------------------- */
.nria-none {
max-width: 640px;
}
/* from `body.home .sect-head h2` — the comp's section label, unscaled */
.nria-sect-label {
font-family: var(--display);
font-weight: 600;
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 14px;
}
.nria-none p {
font-family: var(--serif);
font-size: 17px;
line-height: 1.5;
color: var(--ink-2);
max-width: 50ch;
}
/* --- Recovery list ---------------------------------------------------------
"Also in the news": `body.home .pop .pi` and children, plus the trailing
border-bottom-color override.
-------------------------------------------------------------------------- */
.nria-list {
margin-top: 8px;
}
.nria-list-item {
display: block;
padding: 13px 0;
border-bottom: 1px solid rgba(173,194,224,.08);
}
.nria-list-item:first-child {
padding-top: 0;
}
.nria-list-item:last-child {
border-bottom: 0;
}
/* from `body.home .pop .pi .kicker`, which extends `body.home .kicker` */
.nria-list-item .nria-list-kicker {
display: block;
margin-bottom: 5px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold);
}
/* from `body.home .pop .pi h4` */
.nria-list-item :is(h3, h4) {
font-family: var(--display);
font-weight: 500;
font-size: 17px;
line-height: 1.16;
color: var(--ink);
}
/* from `body.home .pop .pi .sh` */
.nria-list-item .nria-list-date {
font-size: 10.5px;
color: var(--ink-3);
margin-top: 5px;
}
/* --- 404 -------------------------------------------------------------------
Wordmark and rule are the global `.wordmark` / `.masthead-rule` from
base.css, reused as-is; only the layout below is new. The two-column split
is `body.home .tp` (Top Stories / Also in the news).
-------------------------------------------------------------------------- */
.nria-404 {
padding: 64px 0;
text-align: center;
}
.nria-404 .masthead-rule {
justify-content: center;
}
.nria-404 .nria-search {
margin-inline: auto;
}
.nria-404-lede {
font-family: var(--serif);
font-size: 17px;
line-height: 1.5;
color: var(--ink-2);
max-width: 50ch;
margin: 22px auto 0;
}
.nria-recovery {
text-align: left;
margin-top: 38px;
}
.nria-404 .nria-recovery {
max-width: 560px;
margin-inline: auto;
}
/* --- Author archive header -------------------------------------------------
`.author-card` and children from article.css, verbatim. It is a paper
component sitting on the navy archive surface, so `color` is restated to
:root's --ink (#171b20) — inside `.nria-archive` that token is inverted to
the light homepage value and would otherwise render near-white on cream.
-------------------------------------------------------------------------- */
.nria-authorcard {
border-top: 3px solid var(--navy-900);
font-family: var(--sans);
background: #f0e9dd;
color: #171b20;
grid-template-columns: 84px 1fr;
gap: 22px;
margin-top: 38px;
padding: 28px;
display: grid;
}
.nria-authorcard-mark {
background: #fbf8f1;
width: 84px;
height: 84px;
color: var(--gold-dark);
font-family: var(--display);
border: 1px solid #9b722f6b;
border-radius: 50%;
place-items: center;
font-size: 24px;
font-weight: 600;
display: grid;
overflow: hidden;
}
.nria-authorcard-mark img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* The mark itself can be an when the author has an uploaded portrait. */
img.nria-authorcard-mark {
object-fit: cover;
display: block;
}
/* The monogram is always drawn and the portrait is laid OVER it, so a Gravatar
URL that 404s falls back to the initials rather than to an empty circle
(1.1.1). Absolute, not a grid child: `.nria-authorcard-mark` is
`display: grid`, and a nested image would otherwise take a second row and
push the monogram out of the circle. */
.nria-authorcard-mark {
position: relative;
}
.nria-authorcard-mark img {
position: absolute;
inset: 0;
}
/* Staff title under the name on an author archive, mirroring
.author-card-role on the article page. */
.nria-authorcard .author-card-role {
color: var(--gold-dark);
font-family: var(--sans);
letter-spacing: .06em;
text-transform: uppercase;
margin: -2px 0 10px;
font-size: 10px;
font-weight: 600;
line-height: 1.4;
}
.nria-authorcard .eyebrow {
color: var(--gold-dark);
}
.nria-authorcard h1 {
margin: 6px 0;
font-size: 24px;
font-family: var(--display);
font-weight: 600;
line-height: 1.14;
}
.nria-authorcard p {
color: #5d5b57;
margin: 0 0 12px;
font-size: 12px;
line-height: 1.55;
}
/* from `.in-article-ad a, .read-next-link, .author-card a` */
.nria-authorcard .nria-authorcard-meta {
color: var(--gold-dark);
letter-spacing: .04em;
text-transform: uppercase;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
display: inline-flex;
margin: 0;
}
/* --- Static page (page.php) ------------------------------------------------
The article reading surface without the article furniture.
`.article-intro`, `.article-intro h1`, `.paper-surface`, `.article-copy`
and children, all copied verbatim from article.css, which does not load
outside is_singular('post').
-------------------------------------------------------------------------- */
.nria-page-intro {
color: #f6f8fb;
background: radial-gradient(circle at 78% 18%, #3f5f8245, transparent 27%), radial-gradient(circle at 14% 100%, #d6ac5b14, transparent 32%), var(--navy-900);
padding: 46px 0 56px;
position: relative;
overflow: hidden;
}
/* from `.article-intro:after` */
.nria-page-intro:after {
content: "";
background: linear-gradient(90deg,#0000,#d6ac5b94,#0000);
height: 1px;
position: absolute;
inset: auto 0 0;
}
/* from `.article-header-width` */
.nria-page-width {
width: min(1080px,100% - 56px);
margin-inline: auto;
}
/* from `.breadcrumbs`. The second selector catches Rank Math's own markup,
which nria_breadcrumbs() hands over to whenever the plugin is active. */
.nria-page-intro .breadcrumbs,
.nria-page-intro .rank-math-breadcrumb {
color: #728096;
align-items: center;
gap: 8px;
margin-bottom: 34px;
font-size: 11px;
display: flex;
}
/* Rank Math wraps its crumbs in a
, so the row lives one level deeper. */
.nria-page-intro .rank-math-breadcrumb p {
color: inherit;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0;
font-size: inherit;
display: flex;
}
/* from `.breadcrumbs a:hover` */
.nria-page-intro .breadcrumbs a:hover,
.nria-page-intro .rank-math-breadcrumb a:hover {
color: var(--gold-light);
}
/* from `.article-intro h1` */
.nria-page-intro h1 {
max-width: 960px;
font-family: var(--display);
letter-spacing: -.04em;
text-wrap: balance;
margin: 18px 0 0;
font-size: clamp(58px,6.2vw,88px);
font-weight: 500;
line-height: .96;
}
/* from `.standfirst` */
.nria-page-standfirst {
color: #c3cedd;
max-width: 840px;
font-family: var(--reading);
margin: 25px 0 0;
font-size: 23px;
line-height: 1.45;
}
/* from `.paper-surface`; padding-bottom from `.reading-layout` */
.nria-page-surface {
background: var(--paper);
padding-top: 42px;
padding-bottom: 70px;
position: relative;
}
/* from `.reading-layout`'s middle column */
.nria-page-body {
width: min(720px,100% - 56px);
margin-inline: auto;
padding-top: 22px;
}
/* from `.article-copy` */
.nria-page-copy {
min-width: 0;
font-family: var(--reading);
font-size: 20px;
line-height: 1.72;
}
/* from `.article-copy>p` */
.nria-page-copy > p,
.nria-page-copy li {
color: #282b2e;
margin: 0 0 1.35em;
}
/* the global preflight strips list markers; restored here so page content
authored in Gutenberg renders as written */
.nria-page-copy ul,
.nria-page-copy ol {
margin: 0 0 1.35em;
padding-left: 1.3em;
}
.nria-page-copy ul {
list-style: disc;
}
.nria-page-copy ol {
list-style: decimal;
}
.nria-page-copy li {
margin-bottom: .45em;
}
/* from `.article-copy h2` */
.nria-page-copy h2 {
color: #13171c;
font-family: var(--display);
letter-spacing: -.025em;
margin: 2em 0 .65em;
font-size: 34px;
font-weight: 600;
line-height: 1.12;
}
/* from `.article-copy h2`, stepped down to `.author-card h2`'s 24px */
.nria-page-copy h3 {
color: #13171c;
font-family: var(--display);
letter-spacing: -.025em;
margin: 1.7em 0 .55em;
font-size: 24px;
font-weight: 600;
line-height: 1.14;
}
/* from `.article-copy h2`, stepped down to `.next-read-card h2`'s 17px */
.nria-page-copy h4,
.nria-page-copy h5,
.nria-page-copy h6 {
color: #13171c;
font-family: var(--display);
margin: 1.6em 0 .5em;
font-size: 17px;
font-weight: 600;
line-height: 1.16;
}
/* from `.article-notes a, .article-tags a`.
Colour AND underline, and the paper-safe gold: `--gold-dark` on the cream
page ground is 4.08:1, and the /contact/ page sets this at 20px normal
weight, which is not WCAG "large text" (A11Y-01). Colour alone would fail
SC 1.4.1 regardless of the ratio (CODE-01). */
.nria-page-copy a {
color: var(--gold-paper);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.nria-page-copy a:hover,
.nria-page-copy a:focus-visible {
text-decoration-thickness: 2px;
}
/* from `.article-copy blockquote` */
.nria-page-copy blockquote {
border-left: 3px solid var(--gold);
margin: 52px 0;
padding: 8px 20px 9px 32px;
position: relative;
}
/* from `.article-copy blockquote p` */
.nria-page-copy blockquote p {
z-index: 1;
color: var(--navy-900);
font-family: var(--display);
margin: 0;
font-size: 31px;
font-weight: 500;
line-height: 1.25;
position: relative;
}
.nria-page-copy figure,
.nria-page-copy img {
margin: 34px 0;
}
.nria-page-copy figure img {
margin: 0;
}
/* Gutenberg alignments. add_theme_support('align-wide') is registered, so the
editor offers wide and full; without these a wide block would be clipped to
the reading measure. Both resolve to `.article-header-width`'s 1080px — the
comp's one step out from the reading column — rather than a 100vw bleed,
which overflows horizontally whenever a scrollbar is present. */
.nria-page-copy .alignwide,
.nria-page-copy .alignfull {
width: min(1080px, 100vw - 56px);
max-width: none;
margin-left: 50%;
transform: translateX(-50%);
}
.nria-page-copy .aligncenter {
margin-inline: auto;
}
.nria-page-copy .alignleft {
float: left;
margin: 6px 28px 18px 0;
}
.nria-page-copy .alignright {
float: right;
margin: 6px 0 18px 28px;
}
.nria-page-copy::after {
content: "";
display: table;
clear: both;
}
/* Overflow containment. The same treatment `.article-copy` gets in article.css,
for the same reason: an embed iframe, a full-size upload, a wide table or a
holding one unbroken line must scroll inside itself, never widen the
page or squeeze the column it sits in. `.alignwide` / `.alignfull` above are
0,2,0 and still step outside the measure exactly as before. */
.nria-page-copy {
overflow-wrap: break-word;
}
.nria-page-copy :is(img, svg, video, canvas, iframe, embed, object, figure, pre) {
max-width: 100%;
}
.nria-page-copy :is(pre, .wp-block-table, .wp-block-embed__wrapper) {
overflow-x: auto;
}
.nria-page-copy table {
width: max-content;
max-width: 100%;
display: block;
overflow-x: auto;
}
/* from `.lead-figure figcaption` */
.nria-page-copy figcaption {
color: var(--ink-faint);
font-family: var(--sans);
font-size: 11px;
line-height: 1.55;
margin-top: 10px;
}
/* from `.article-notes` */
.nria-page-copy hr {
border: 0;
border-top: 1px solid var(--line);
margin: 48px 0;
}
.nria-page-copy table {
width: 100%;
border-collapse: collapse;
font-family: var(--sans);
font-size: 15px;
margin: 34px 0;
}
.nria-page-copy th,
.nria-page-copy td {
border-bottom: 1px solid var(--line);
padding: 10px 12px 10px 0;
text-align: left;
}
.nria-page-copy th {
color: var(--navy-900);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
}
/* --- Responsive ------------------------------------------------------------
Breakpoints copied from home.css's own `body.home .desks` overrides, so the
archive grid reflows exactly where the Across the Diaspora grid does. The
page-title override is article.css's own.
-------------------------------------------------------------------------- */
@media (max-width:760px) {
.nria-arch-grid {
grid-template-columns: 1fr 1fr;
}
.nria-arch-head h1 {
font-size: 28px;
}
.nria-authorcard {
grid-template-columns: 1fr;
gap: 16px;
}
}
@media (max-width:480px) {
.nria-arch-grid {
grid-template-columns: 1fr;
}
}
@media (width<=820px) {
.nria-page-width {
width: min(100% - 36px,740px);
}
.nria-page-intro h1 {
font-size: 62px;
}
.nria-page-body {
width: min(100% - 36px,720px);
}
}
@media (width<=640px) {
.nria-page-width {
width: calc(100% - 34px);
}
.nria-page-intro {
padding: 27px 0 34px;
}
.nria-page-intro .breadcrumbs,
.nria-page-intro .rank-math-breadcrumb {
margin-bottom: 25px;
font-size: 10px;
}
.nria-page-intro h1 {
letter-spacing: -.045em;
text-wrap: pretty;
margin-top: 14px;
font-size: clamp(43px,12.3vw,55px);
line-height: .99;
}
.nria-page-standfirst {
margin-top: 19px;
font-size: 19px;
line-height: 1.42;
}
.nria-page-surface {
padding-top: 0;
}
.nria-page-copy {
font-size: 19px;
line-height: 1.7;
}
.nria-page-copy h2 {
margin-top: 1.8em;
font-size: 29px;
}
.nria-page-copy blockquote {
margin: 42px 0;
padding-left: 24px;
}
.nria-page-copy blockquote p {
font-size: 26px;
}
}
/* ==========================================================================
=== Global chrome: the two panels the comp did not specify ===
Agent B. The article comp ships the hamburger and the masthead search button
but no panels behind them, so the mobile menu and the search overlay are
built here. Every declaration reuses an existing token or a literal already
present in the canonical chrome above — the overlay geometry and both
animations are the share sheet's (`.share-overlay` / `.share-sheet`), the
menu link treatment is `.nav-inner a`, the field treatment is
`.newsletter-inner input/button`. No selector above this line was modified,
and nothing here collides with home.css, article.css or Agent E's block.
========================================================================== */
/* --- Scroll lock ------------------------------------------------------------
Applied to by assets/js/nav.js while a panel is open. position:fixed
rather than overflow:hidden because iOS Safari ignores the latter on ;
nav.js stores and restores the scroll offset either side.
-------------------------------------------------------------------------- */
body.nria-scroll-locked {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
/* --- Shared backdrop --------------------------------------------------------
`.share-overlay`, one step further forward so a panel can sit over the share
sheet, and with its own class so article.js's closeShare() — which *removes*
.share-overlay from the DOM — can never reach these panels.
-------------------------------------------------------------------------- */
.nria-overlay {
z-index: 320;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: #030910d9;
padding: 20px;
animation: .18s both fade-in;
display: grid;
position: fixed;
inset: 0;
}
.nria-overlay[data-nria-panel="search"] {
place-items: start center;
padding-top: 12vh;
}
.nria-overlay[data-nria-panel="menu"] {
place-items: stretch start;
padding: 0;
}
/* --- Panel surface ----------------------------------------------------------
`.site-header`'s navy with the header's own hairline, so an open panel reads
as part of the chrome rather than as article furniture.
-------------------------------------------------------------------------- */
.nria-panel {
background: var(--navy-900);
border: 1px solid var(--dark-line);
color: #eef3f9;
animation: .22s both sheet-in;
box-shadow: 0 26px 90px #00000061;
}
.nria-panel-menu {
border-width: 0 1px 0 0;
width: min(340px,88vw);
height: 100%;
padding: 22px 24px calc(28px + env(safe-area-inset-bottom));
overflow-y: auto;
}
.nria-panel-search {
width: min(560px,100%);
padding: 26px;
}
.nria-panel-head {
border-bottom: 1px solid var(--dark-line);
justify-content: space-between;
align-items: center;
gap: 20px;
padding-bottom: 16px;
display: flex;
}
.nria-panel-head .eyebrow {
color: var(--gold-light);
}
/* Geometry from `.share-sheet-head button`, repainted for the navy surface. */
.nria-panel-close {
border: 1px solid var(--dark-line);
color: #9cabbf;
cursor: pointer;
background: 0 0;
border-radius: 50%;
place-items: center;
width: 34px;
height: 34px;
transition: color .16s,border-color .16s;
display: grid;
}
.nria-panel-close:hover {
border-color: var(--gold);
color: var(--gold-light);
}
/* --- Menu panel links -------------------------------------------------------
`.nav-inner a` stacked. The active marker is the primary nav's gold bar,
turned onto its side as an inset shadow so the row never shifts.
-------------------------------------------------------------------------- */
.nria-menu-links {
padding-top: 6px;
display: block;
}
.nria-menu-links a {
border-bottom: 1px solid var(--dark-line);
color: #a7b3c3;
letter-spacing: .075em;
text-transform: uppercase;
align-items: center;
padding: 15px 0 15px 11px;
font-size: 12px;
font-weight: 700;
transition: color .18s;
display: flex;
}
.nria-menu-links a:hover,
.nria-menu-links a.active {
color: #fff;
}
.nria-menu-links a.active {
box-shadow: inset 3px 0 0 var(--gold);
}
.nria-menu-links a:last-child {
border-bottom: 0;
}
/* --- Menu panel utility row -------------------------------------------------
`.utility-links` / `.utility-links .utility-subscribe`, wrapped instead of a
single row because the panel is 340px wide.
-------------------------------------------------------------------------- */
.nria-menu-utility {
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
margin-top: 24px;
font-size: 11px;
display: flex;
}
.nria-menu-utility a {
color: #8391a4;
transition: color .18s;
}
.nria-menu-utility a:hover {
color: #fff;
}
.nria-menu-utility .utility-subscribe {
background: var(--gold);
color: #211807;
padding: 9px 14px;
font-weight: 700;
}
/* --- Search form ------------------------------------------------------------
searchform.php. Field and submit copied from `.newsletter-inner input` and
`.newsletter-inner button` — the comp's only field treatment — with the
masthead's search glyph on the button. Written as `form.nria-search-form` so
it also wins inside Agent E's `.nria-search` wrapper on search.php and 404,
whose markup assumption (a flat form) differs from this one.
-------------------------------------------------------------------------- */
form.nria-search-form {
display: block;
}
.nria-panel form.nria-search-form {
margin-top: 18px;
}
form.nria-search-form label {
color: #8c9aae;
letter-spacing: .1em;
text-transform: uppercase;
width: auto;
margin-bottom: 8px;
font-size: 10px;
font-weight: 700;
display: block;
}
form.nria-search-form>div {
display: flex;
}
form.nria-search-form input[type="search"] {
color: #fff;
background: #0d1b2d;
border: 1px solid #33445b;
border-right: 0;
border-radius: 3px 0 0 3px;
outline: none;
flex: 1;
min-width: 0;
height: 48px;
padding-inline: 15px;
font-family: var(--sans);
-webkit-appearance: none;
appearance: none;
}
form.nria-search-form input[type="search"]:focus {
border-color: var(--gold);
}
form.nria-search-form button {
border: 1px solid var(--gold);
background: var(--gold);
color: #211806;
cursor: pointer;
white-space: nowrap;
border-radius: 0 3px 3px 0;
align-items: center;
gap: 8px;
height: 48px;
padding-inline: 18px;
font-size: 11px;
font-weight: 700;
font-family: var(--sans);
display: flex;
}
form.nria-search-form button svg {
width: 17px;
height: 17px;
}
/* --- Keyboard focus ---------------------------------------------------------
The comp draws no focus ring on the two masthead buttons, and the panels are
required to be fully keyboard operable, so a gold ring is added on
:focus-visible only — invisible to pointer users, unchanged for everyone else.
-------------------------------------------------------------------------- */
.header-icon:focus-visible,
.nria-overlay :focus-visible,
form.nria-search-form :focus-visible,
/* A11Y-12: `.newsletter-inner input { outline: none }` (:1104) suppressed the
UA ring, and the only replacement was a 1px border shifting #33445b → gold
(:1111) — a marginal indicator on a dark field, and the one input on the site
with no ring at all. It is styled from the same comp treatment as the search
field, which this rule already covers; it was simply missed. */
.newsletter-inner :focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
.screen-reader-text — the theme's own definition
--------------------------------------------------------------------------
The theme has used this class since 1.0 (the post-list columns, the 404
heading, the trivia verdicts, the search form's label) and never defined it:
on the live site it resolves because WordPress' own `wp-block-library`
stylesheet ships a definition, which is why the a11y pass measured it working
(position: absolute, clip-path: inset(50%), 1×1px).
That is a dependency on a sheet the theme does not control and that TECH-16
proposes dequeuing. Caught by the 1.3.0 regression, where the new skip link
rendered as visible body text on every template because no core CSS was
present. Core's own rule, restated so the theme owns it.
-------------------------------------------------------------------------- */
.screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
word-wrap: normal !important;
}
/* --------------------------------------------------------------------------
A11Y-03 — the skip link
--------------------------------------------------------------------------
Nineteen focusable controls preceded on every page and `` had no
id, so there was nothing to skip to. Hidden with the theme's own
`.screen-reader-text` until focused, then drawn as the gold-on-navy chip the
chrome already uses.
-------------------------------------------------------------------------- */
.skip-link:focus,
.skip-link:focus-visible {
clip: auto;
clip-path: none;
background: var(--navy-900);
border: 1px solid var(--gold);
border-radius: 3px;
color: var(--gold);
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
height: auto;
left: 16px;
letter-spacing: .06em;
line-height: 1;
margin: 0;
padding: 14px 20px;
position: fixed;
text-decoration: none;
text-transform: uppercase;
top: 16px;
width: auto;
z-index: 1000;
}
/* `tabindex="-1"` makes a focus target; it must not draw a ring of its
own when the skip link sends focus there. */
main:focus {
outline: none;
}
/* --------------------------------------------------------------------------
CODE-07 — five headings the design sets in Hanken Grotesk
--------------------------------------------------------------------------
`theme.json`'s `styles.elements.h1`–`h6` declare `font-family: Fraunces` and
this install emits them UNWRAPPED, at specificity 0,0,1 — so they land on the
only five headings in the theme that nothing else declares a family for: the
two rail headings and the three footer column headings, which recur on every
template. Measured on staging: 5 differing elements on the homepage, 4 on an
article, 3 on the 404, all font-family, no colour.
Declaring the intended family here is the robust half of the fix — the
decision belongs in the stylesheet, not in a JSON file whose output form
varies by install. `theme.json`'s `styles.elements.caption` is deliberately
left alone: it is currently the only thing styling a body figcaption on
surfaces this sheet does not reach.
-------------------------------------------------------------------------- */
footer .footer-grid h2,
.rail h3.rh {
font-family: var(--sans);
}
/* --------------------------------------------------------------------------
HOME-15 — 24px minimum touch target
--------------------------------------------------------------------------
Twelve controls measured under 24px tall at 375: every section "more →" link
at 17px, the trend-strip headline links at 14px, and About/Contact inside the
open mobile panel at 17px (the nine section links there are a healthy 49px).
Most are full-bleed wide so they are hittable, but 14–17px of vertical target
on a phone is a repeated miss — WCAG 2.2 SC 2.5.8.
Padding only: no box, no colour, nothing that changes the comp's appearance.
-------------------------------------------------------------------------- */
@media (width<=900px) {
.sect-head .more,
.hindi-head .more,
.break-head .more {
display: inline-block;
padding-block: 5px;
}
.trend-inner a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
.nria-panel-menu .nria-panel-utility a,
.nria-panel-menu a.utility-subscribe {
display: flex;
align-items: center;
min-height: 44px;
}
}
/* --------------------------------------------------------------------------
A11Y-15 — third-party credit line, suppressed
--------------------------------------------------------------------------
"WP Twitter Auto Publish Powered By: XYZScripts.com" renders after
at #171b20 on #0a1524 — 1.05:1, effectively invisible to everyone — and sits
outside every landmark, which is what makes axe's `region` rule fire on the
article template. This is a stopgap: the plugin has a setting for it, and the
real question is whether that plugin ships to production at all (FIXLIST
P-05). CSS cannot fix the `title`-only share link in the same finding.
-------------------------------------------------------------------------- */
body > div[style]:has(> a[href*="xyzscripts"]),
body > a[href*="xyzscripts"],
.wp-twitter-auto-publish-credit {
display: none !important;
}
/* --------------------------------------------------------------------------
404 — the wordmark is now an
wrapping the numeral in a span
--------------------------------------------------------------------------
`.wordmark span { color: var(--gold) }` would otherwise paint the whole
"404" gold instead of the zero. The nesting is one level deeper; the
appearance is identical (HOME-17 / TECH-18 / A11Y-09).
-------------------------------------------------------------------------- */
.nria-404 .wordmark > span[aria-hidden] {
color: inherit;
}
.nria-404 .wordmark > span[aria-hidden] > span {
color: var(--gold);
}
/* --- Custom logo ------------------------------------------------------------
masthead.php prefers a Site Identity logo over the text wordmark. Bound to
the wordmark's optical height so the masthead keeps its 116px box.
-------------------------------------------------------------------------- */
.masthead .custom-logo-link {
display: block;
}
.masthead .custom-logo-link img {
width: auto;
max-height: 64px;
margin-inline: auto;
}
/* --- Trend strip: five headlines, not two -----------------------------------
The comp hardcodes two headlines and hides the second below 640px. The strip
is now the five most recent Top Stories, so extend the comp's own intent —
one headline on mobile — rather than leaving 3/4/5 visible with every
separator hidden.
-------------------------------------------------------------------------- */
@media (width<=640px) {
.trend-inner p:nth-of-type(n+2) {
display: none;
}
.masthead .custom-logo-link img {
max-height: 44px;
}
}
/* --- Article: newsletter band -----------------------------------------------
The comp nests .newsletter-block inside .paper-surface, so its 28px top
margin shows paper. The block is global chrome now and renders outside
, where that margin would show the body's navy instead. A paper border
of the same height restores the comp exactly; it collapses below 640px,
where the comp zeroes the margin anyway.
-------------------------------------------------------------------------- */
body.single-post .newsletter-block {
border-top: 28px solid var(--paper);
margin-top: 0;
}
@media (width<=640px) {
body.single-post .newsletter-block {
border-top-width: 0;
}
}
/* --- Forms in page copy (1.1.2) ---------------------------------
Contact Form 7 (the /contact/ and /advertise/ forms, shortcode 5267) and The
Newsletter Plugin both render their controls inside post content, and until
1.1.2 nothing here styled them. The unlayered hardening block at the foot of
base.css deliberately restates the preflight's `button, input, select,
textarea { font: inherit; color: inherit; background-color: transparent;
border-radius: 0 }` at 0,0,2 so a legacy plugin sheet cannot re-type the
site's fields — which left every field on a paper page transparent on paper,
borderless (the preflight zeroes borders) and therefore invisible: labels
with nothing under them and no submit button. That block is correct and is
not weakened; the fields are given a treatment here instead, above it on
specificity.
Nothing below is invented. The geometry (48px control, 3px radius, 15px
inline padding, 10px/700/.1em label, the gold submit) is
`.newsletter-inner input` / `button` / `form label` — the comps' only field
treatment. The paper colours are the article comp's own field-like chip,
`.article-tags a` ({ border: 1px solid var(--line); background: #fffdf8 }),
the small-caps navy of `.nria-page-copy th`, the sent-state wash of
`.subscribe-success` (#d6ac5b12) and the comps' live red #ec6d5f for the
invalid state. The focus ring is `--navy-900` rather than the dark band's
gold, because gold on paper is the link colour.
Every element-level rule carries `:where(:not(.newsletter-block *))`. The
`[newsletter]` shortcode (inc/compat.php) renders the dark newsletter band
*inside* `.nria-page-copy`, so without that guard the paper treatment would
overwrite the band's own dark fields. `:where()` contributes no specificity,
so the guard costs nothing and `.wpcf7-not-valid` below can still win.
-------------------------------------------------------------------------- */
/* CF7 and tnp wrappers. Both are direct children of the copy column and both
set their own measure; the sans face is the form system's, not the prose's. */
.nria-page-copy .wpcf7,
.nria-page-copy .tnp-subscription {
font-family: var(--sans);
margin: 34px 0;
}
.nria-page-copy .wpcf7-form,
.nria-page-copy .tnp-subscription form {
margin: 0;
}
/* CF7 emits one
per field; the hardening block zeroes its margin. */
.nria-page-copy .wpcf7-form p,
.nria-page-copy .tnp-field {
margin: 0 0 22px;
font-family: var(--sans);
font-size: 15px;
line-height: 1.5;
}
.nria-page-copy .wpcf7-form p:last-child,
.nria-page-copy .tnp-field:last-child {
margin-bottom: 0;
}
/* from `.newsletter-inner form label`, recoloured to `.nria-page-copy th`'s
navy for the paper surface. CF7 wraps the control inside the