/* Theme Name: Montlior Wire Theme URI: https://jcdigital.dev/themes/montlior-wire/ Author: Jhon Carl Ignoro Author URI: https://jcdigital.dev/ Description: Press release and media distribution theme for Montlior Group. A newsroom-grade wire service front end - information dense, chronological and fast - built on native WordPress editing with no page builder, no framework and no third-party plugin dependency. Ships with release, FAQ, contact and media-asset post types, a batched content importer, an SEO panel on every editing screen, a global styling panel and an activity log. Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.4 Version: 1.2.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: montlior-wire Tags: news, blog, custom-logo, custom-menu, featured-images, block-patterns, editor-style, full-width-template, rtl-language-support, translation-ready, threaded-comments, accessibility-ready */ /* ========================================================================== MONTLIOR WIRE — Press & Media Release Distribution Montlior Group · Est. 1962 · Meridale, Coravia -------------------------------------------------------------------------- 0. RESET 1. TOKENS 2. BASE / TYPOGRAPHY 3. LAYOUT 4. COMPONENTS 5. UTILITIES 6. PRINT ========================================================================== */ /* ========================================================================== 0. RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; } body { min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* WordPress adds a bare `page` class to , which otherwise matches the `.page` block below and pushes a gap above the header and below the footer. The body must never carry padding, so force it. !important wins over the class collision regardless of load order. */ padding-block: 0 !important; } img, picture, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; font-weight: 700; line-height: 1.2; } p, li { text-wrap: pretty; } ul[class], ol[class] { list-style: none; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } a { color: inherit; } :target { scroll-margin-block-start: 8rem; } /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* --- Brand palette ------------------------------------------------- */ --steel: #1E4E79; /* primary — header, headings, buttons */ --steel-800: #163A5A; /* deeper steel — hovers, footer */ --steel-900: #10293F; /* deepest — utility strip */ --blue: #1D6FE0; /* action — links, active filters */ --blue-700: #1558B4; /* action hover / AA text on tint */ --tint: #E8F1FC; /* filter chips, asset panel */ --tint-deep: #D4E4F8; /* tint border / hover */ --page: #F7F9FC; --card: #FFFFFF; --ink: #111827; --meta: #6B7280; --meta-dark: #4B5563; /* AA-safe meta on tint */ --rule: #E5E7EB; --rule-soft: #EFF2F6; --embargo: #B45309; /* embargo badge only */ --embargo-bg: #FEF6E7; /* --- Fluid type scale ---------------------------------------------- */ --step--2: clamp(0.6875rem, 0.667rem + 0.10vw, 0.75rem); --step--1: clamp(0.8125rem, 0.786rem + 0.13vw, 0.875rem); --step-0: clamp(0.9375rem, 0.911rem + 0.13vw, 1rem); --step-1: clamp(1.0625rem, 1.009rem + 0.27vw, 1.1875rem); --step-2: clamp(1.1875rem, 1.058rem + 0.65vw, 1.5rem); --step-3: clamp(1.4375rem, 1.221rem + 1.08vw, 1.9375rem); /* --- Fluid space scale --------------------------------------------- */ --sp-1: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem); --sp-2: clamp(0.5rem, 0.48rem + 0.1vw, 0.625rem); --sp-3: clamp(0.75rem, 0.72rem + 0.15vw, 0.9375rem); --sp-4: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); --sp-5: clamp(1.5rem, 1.42rem + 0.4vw, 1.875rem); --sp-6: clamp(2rem, 1.85rem + 0.75vw, 2.75rem); --sp-7: clamp(2.75rem, 2.45rem + 1.5vw, 4rem); --sp-8: clamp(3.5rem, 3rem + 2.5vw, 6rem); /* --- Structure ------------------------------------------------------ */ --gutter: clamp(1rem, 0.55rem + 2.25vw, 2.5rem); --measure: 68ch; --shell: 84rem; /* --- Effect --------------------------------------------------------- */ --radius: 3px; --radius-lg: 5px; --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.04); --shadow: 0 1px 2px rgb(17 24 39 / 0.05), 0 4px 14px -6px rgb(30 78 121 / 0.12); --ring: 0 0 0 3px rgb(29 111 224 / 0.32); --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(0.2, 0, 0.2, 1); --dur: 160ms; color-scheme: light; accent-color: var(--blue); } /* ========================================================================== 2. BASE / TYPOGRAPHY ========================================================================== */ body { font-family: var(--sans); font-size: var(--step-0); color: var(--ink); background: var(--page); font-variant-numeric: tabular-nums; } h1 { font-size: var(--step-3); letter-spacing: -0.018em; color: var(--steel); } h2 { font-size: var(--step-2); letter-spacing: -0.012em; color: var(--steel); } h3 { font-size: var(--step-1); letter-spacing: -0.008em; color: var(--steel); } h4 { font-size: var(--step-0); letter-spacing: 0; color: var(--steel); } a { color: var(--blue); text-underline-offset: 0.16em; text-decoration-thickness: from-font; } a:hover { color: var(--blue-700); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--tint); color: var(--steel-900); } hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: var(--sp-5); } code, kbd, samp { font-family: var(--mono); font-size: 0.92em; } /* Monospace signature — timestamps, IDs, codes */ .mono { font-family: var(--mono); font-variant-ligatures: none; font-feature-settings: "zero" 1; } .eyebrow { font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); } .lede { font-size: var(--step-1); line-height: 1.5; color: var(--meta-dark); max-width: var(--measure); } /* ========================================================================== 3. LAYOUT ========================================================================== */ .wrap { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; } .wrap--narrow { --shell: 56rem; } .wrap--prose { --shell: 46rem; } /* Reading pages: the shell is sized so that a measure-width column plus its rail exactly fill it, leaving no dead gutter between the two. */ .wrap--article { --shell: 65rem; } .skip-link { position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% -110%; z-index: 100; padding: var(--sp-3) var(--sp-5); background: var(--steel); color: #fff; font-weight: 500; text-decoration: none; border-radius: 0 0 var(--radius) var(--radius); } .skip-link:focus { translate: -50% 0; color: #fff; } /* --- Group network bar ------------------------------------------------ The house rail. This block is meant to be byte-identical on montliorgroup.com, montliornews.com, montliormedia.com and the Wire, so its two colours are literals rather than theme tokens: each Group site carries its own navy, and the bar must not drift between them — a visitor should read it as one continuous piece of chrome that happens to be sitting on four different mastheads. It sits above the utility strip, not under the masthead: ownership is a tier above the title, and a second row of links directly beneath the primary nav would read as navigation of equal rank. ---------------------------------------------------------------------- */ .gbar { --gbar-navy: #0A1F3D; /* Montlior Group navy */ --gbar-gold: #C9A857; /* Montlior Group champagne */ background: var(--gbar-navy); border-block-end: 1px solid rgb(201 168 87 / 0.3); font-family: var(--mono); /* Deliberately below --step--2. This is chrome, not content: it must be legible without ever out-shouting the nameplate two rows below. */ font-size: clamp(0.5938rem, 0.554rem + 0.2vw, 0.6875rem); letter-spacing: 0.1em; text-transform: uppercase; } /* A fixed height rather than padding, because the bar has to stay a rail: the links carry their own padding-block for a touch target inside it. */ .gbar__inner { display: flex; align-items: center; justify-content: center; min-block-size: 2.125rem; container-type: inline-size; } .gbar__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: var(--sp-1); } .gbar__item { display: flex; align-items: center; } /* The lozenge: a square stood on its corner, drawn rather than typed. The 💠 character is a *blue* diamond on most platforms and renders at a different weight in every font — this stays champagne everywhere. It is a separator, so it is generated content and invisible to assistive tech. */ .gbar__item + .gbar__item::before { content: ""; flex: none; inline-size: 5px; block-size: 5px; rotate: 45deg; background: var(--gbar-gold); margin-inline: clamp(0.55rem, 0.35rem + 0.9vw, 1.05rem); } .gbar__link { color: #D7E0EA; text-decoration: none; white-space: nowrap; /* Buys touch height inside a 2rem bar without making the bar taller. */ padding-block: 0.4rem; transition: color var(--dur) var(--ease); } .gbar__link:hover { color: #fff; } .gbar :focus-visible { outline-color: var(--gbar-gold); outline-offset: 3px; } /* The smallest screens drop the repeated house name rather than wrapping the bar to two rows or scrolling it sideways. Nothing is lost: the credit line immediately below still reads "official channel of Montlior Group", and the full brand name stays in the markup for search engines and screen readers. Container query, matching the strip below it. 22rem is where three full names stop clearing the gutters with room to spare — a 390pt phone and up keeps "Montlior Group", 375 and below shortens to "Group". Should anything push past that anyway (a larger minimum font size, a wider fallback mono), the list wraps to two rows rather than overflowing. */ @container (max-width: 22rem) { .gbar__pre { display: none; } } @media (forced-colors: active) { .gbar { border-block-end-color: CanvasText; } .gbar__item + .gbar__item::before { background: CanvasText; } } /* --- Utility strip ---------------------------------------------------- */ .strip { background: var(--steel-900); color: #C7D6E5; font-family: var(--mono); /* Deliberately below --step--2: the strip is a standing credit line, and at narrow widths it must stay out of the way of the nameplate below it. */ font-size: clamp(0.5938rem, 0.554rem + 0.2vw, 0.75rem); letter-spacing: 0.05em; } /* Two columns at every width: credit line left, wire clock right. Each side wraps to at most two rows, so the strip never grows past ~2 lines. */ .strip__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-4); min-height: 2.25rem; padding-block: var(--sp-2); container-type: inline-size; } /* Block, not flex: a flex container would turn each text run between the inline elements into its own item, and they would wrap independently. */ .strip__note { text-transform: uppercase; line-height: 1.5; } .strip__note b { color: #fff; font-weight: 500; } .strip__note .pulse { display: inline-block; vertical-align: middle; margin-inline-end: 0.5em; } .strip__clock { color: #fff; text-align: right; line-height: 1.5; } /* Date and time each stay intact; the break falls between them when narrow. */ .strip__date, .strip__time { white-space: nowrap; } /* Below roughly a phone width the city is dropped and the clock stacks date over time. Stacking narrows the right track, which is what lets the credit line on the left settle into two rows. Container query, not a media query. */ @container (max-width: 30rem) { .strip__place { display: none; } .strip__clock time { display: grid; justify-items: end; } } /* Smallest phones: the founding year goes, and the credit shortens to "official channel of Montlior Group" — trimming words rather than shrinking the type, which at this size would stop being readable. */ @container (max-width: 20rem) { .strip__est, .strip__dist { display: none; } } .pulse { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgb(74 222 128 / 0.6); animation: pulse 2.4s var(--ease) infinite; flex: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0.55); } 70% { box-shadow: 0 0 0 6px rgb(74 222 128 / 0); } 100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); } } /* --- Masthead --------------------------------------------------------- */ .masthead { position: sticky; inset-block-start: 0; z-index: 50; background: var(--card); border-block-end: 1px solid var(--rule); } .masthead__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); min-height: 4rem; padding-block: var(--sp-3); } .brand { display: block; flex: none; line-height: 0; } .brand img { inline-size: clamp(10.5rem, 8rem + 8vw, 15rem); block-size: auto; } .nav { margin-inline-start: auto; display: flex; align-items: center; gap: clamp(0.25rem, 0.05rem + 1vw, 1.25rem); } .nav__list { display: flex; align-items: center; gap: clamp(0.125rem, -0.2rem + 1.4vw, 1rem); list-style: none; margin: 0; padding: 0; } .nav__link { display: block; padding: var(--sp-2) var(--sp-3); font-size: var(--step--1); font-weight: 500; color: var(--steel); text-decoration: none; border-radius: var(--radius); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav__link:hover { background: var(--tint); color: var(--steel-800); } .nav__link[aria-current="page"] { color: var(--blue-700); box-shadow: inset 0 -2px 0 0 var(--blue); border-radius: var(--radius) var(--radius) 0 0; } .nav__tools { display: flex; align-items: center; gap: var(--sp-2); padding-inline-start: var(--sp-3); border-inline-start: 1px solid var(--rule); } .icon-btn { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius); color: var(--steel); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .icon-btn:hover { background: var(--tint); color: var(--blue-700); } .icon-btn svg { inline-size: 1.125rem; block-size: 1.125rem; } .nav__toggle { display: none; } /* Never let a hidden control claim layout, whatever its display rule. */ [hidden] { display: none !important; } /* Sole media query in the stylesheet — navigation collapse. Scoped to .js so a script-free browser always gets the full nav list. */ @media (max-width: 56.25rem) { .js .nav__toggle { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; margin-inline-start: auto; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--steel); } .js .nav__toggle svg { inline-size: 1.25rem; block-size: 1.25rem; } .js .nav__toggle[aria-expanded="true"] { background: var(--tint); border-color: var(--tint-deep); } .nav { margin-inline-start: 0; flex-direction: column; align-items: stretch; gap: 0; } /* With scripting, the menu is a panel anchored under the masthead and taken out of flow, so opening it overlays the page instead of pushing it down. */ .js .nav { position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 40; padding: var(--sp-2) var(--gutter) var(--sp-4); background: var(--card); border-block-end: 1px solid var(--rule); box-shadow: 0 14px 28px -14px rgb(16 41 63 / 0.35); max-block-size: min(70dvh, 32rem); overflow-y: auto; overscroll-behavior: contain; } .js .nav:not(.is-open) { display: none; } /* Without scripting there is no toggle, so the list simply wraps into the masthead as an ordinary block and stays visible. */ .no-js .nav { order: 3; flex-basis: 100%; padding-block: var(--sp-2) var(--sp-4); border-block-start: 1px solid var(--rule); } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { padding: var(--sp-3) var(--sp-2); font-size: var(--step-0); border-block-end: 1px solid var(--rule-soft); border-radius: 0; } .nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 0 var(--blue); } .nav__tools { padding: var(--sp-3) 0 0; border-inline-start: 0; } } /* --- Page shell ------------------------------------------------------- */ /* Scoped to the element: WordPress puts a bare "page" class on , which would otherwise inherit this padding and open a gap above the masthead and below the footer. */ main.page { padding-block: var(--sp-6) var(--sp-8); } .page-head { padding-block: var(--sp-6) var(--sp-5); border-block-end: 1px solid var(--rule); margin-block-end: var(--sp-6); } .page-head > * + * { margin-block-start: var(--sp-3); } /* Feed + rail: intrinsic reflow, no breakpoints */ .layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-6) var(--sp-6); } .layout__main { flex: 5 1 min(100%, 34rem); min-inline-size: 0; } .layout__rail { flex: 2 1 min(100%, 17rem); min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-4); } /* Reading variant: the text column stops at the measure and the rail takes the remainder, so no gutter opens up between them at wide viewports. */ .layout--article .layout__main { flex: 0 1 min(100%, var(--measure)); } .layout--article .layout__rail { flex: 1 1 min(100%, 16rem); } .layout--article .article { max-inline-size: none; } /* Running text stays readable even where the column itself is wide. */ .layout__main > .stack > p, .layout__main > .stack > ul, .layout__main > .stack > ol, .layout__main > .stack > .steps { max-inline-size: var(--measure); } /* ========================================================================== 4. COMPONENTS ========================================================================== */ /* --- Card ------------------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .card__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--rule); background: linear-gradient(var(--card), var(--page)); } .card__head h2, .card__head h3 { font-size: var(--step--1); font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); } .card__head svg { inline-size: 1rem; block-size: 1rem; color: var(--blue); flex: none; } .card__body { padding: var(--sp-4); } .card__body > * + * { margin-block-start: var(--sp-3); } /* --- Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.625em 1.1em; font-size: var(--step--1); font-weight: 500; line-height: 1.3; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn svg { inline-size: 1em; block-size: 1em; flex: none; } .btn--primary { background: var(--steel); color: #fff; } .btn--primary:hover { background: var(--steel-800); color: #fff; } .btn--action { background: var(--blue); color: #fff; } .btn--action:hover { background: var(--blue-700); color: #fff; } .btn--ghost { background: var(--card); color: var(--steel); border-color: var(--rule); } .btn--ghost:hover { background: var(--tint); border-color: var(--tint-deep); color: var(--steel-800); } .btn--block { inline-size: 100%; } /* --- Category chips --------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.24em 0.62em; font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--blue-700); background: var(--tint); border: 1px solid var(--tint-deep); border-radius: 2px; text-decoration: none; } .chip::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 1px; background: currentColor; flex: none; } .chip--embargo { color: var(--embargo); background: var(--embargo-bg); border-color: #F5D9A8; } .chip--plain::before { display: none; } /* --- Filter bar ------------------------------------------------------- */ .filterbar { position: sticky; inset-block-start: var(--masthead-h, 4.75rem); z-index: 20; background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(8px); border-block: 1px solid var(--rule); margin-block-end: var(--sp-5); } .filterbar__inner { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); flex-wrap: wrap; } .filterbar__label { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); flex: none; } .filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; } .filter { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.42em 0.85em; font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--steel); background: var(--card); border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .filter:hover { background: var(--tint); border-color: var(--tint-deep); color: var(--steel-800); } .filter[aria-pressed="true"], .filter.is-active { background: var(--blue); border-color: var(--blue); color: #fff; } .filter__count { font-size: 0.85em; opacity: 0.72; font-variant-numeric: tabular-nums; } .filter-status { font-family: var(--mono); font-size: var(--step--2); color: var(--meta); margin-inline-start: auto; white-space: nowrap; } /* --- Release feed ----------------------------------------------------- */ .feed { container-type: inline-size; } .feed__day { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding-block: var(--sp-3) var(--sp-2); margin-block-start: var(--sp-5); border-block-end: 2px solid var(--steel); } .feed__day:first-child { margin-block-start: 0; } .feed__date { font-family: var(--mono); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); } .feed__daycount { font-family: var(--mono); font-size: var(--step--2); color: var(--meta); margin-inline-start: auto; } .feed__list { list-style: none; margin: 0; padding: 0; } .release { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-2); padding: var(--sp-4); background: var(--card); border: 1px solid var(--rule); border-block-start: 0; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .feed__list > li:first-child .release { border-block-start: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .feed__list > li:last-child .release { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .feed__list > li:only-child .release { border-radius: var(--radius-lg); } .release:hover { background: #FCFDFF; box-shadow: inset 3px 0 0 0 var(--blue); } .release:has(a:focus-visible) { box-shadow: inset 3px 0 0 0 var(--blue); } .release__time { grid-column: 1; font-family: var(--mono); font-size: var(--step--1); font-weight: 500; color: var(--steel); font-variant-numeric: tabular-nums; white-space: nowrap; } .release__time small { display: block; font-size: 0.8em; font-weight: 400; color: var(--meta); letter-spacing: 0.06em; } .release__body { grid-column: 2; min-inline-size: 0; } .release__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-2); } .release__title { font-size: var(--step-1); font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; color: var(--steel); margin-block-end: var(--sp-2); } .release__title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--blue), var(--blue)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease); } .release__title a:hover { color: var(--blue-700); background-size: 100% 1px; } /* Deliberately no full-row link overlay: an overlay would make the release ID and summary unselectable, and copying an ID is the single most common thing a journalist does on this page. The headline is the link. */ .release__summary { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.5; max-width: 62ch; margin-block-end: var(--sp-2); } .release__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-family: var(--mono); font-size: var(--step--2); color: var(--meta); letter-spacing: 0.04em; } .release__foot span { display: inline-flex; align-items: center; gap: 0.4em; } .release__foot svg { inline-size: 0.9em; block-size: 0.9em; flex: none; } .release[hidden] { display: none; } /* Container-driven collapse: timestamp + chips stack above the headline */ @container (max-width: 34rem) { .release { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); } .release__time { grid-column: 1; display: flex; align-items: baseline; gap: 0.6em; } .release__time small { display: inline; } .release__body { grid-column: 1; } } .feed__empty { padding: var(--sp-7) var(--sp-4); text-align: center; background: var(--card); border: 1px dashed var(--rule); border-radius: var(--radius-lg); color: var(--meta); } .feed__empty p + p { margin-block-start: var(--sp-3); } /* --- Contact card ----------------------------------------------------- */ .contact { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--sp-3); align-items: start; } .contact + .contact { margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--rule-soft); } .contact__photo { inline-size: 3.5rem; block-size: 4.375rem; object-fit: cover; border-radius: 2px; background: var(--tint); border: 1px solid var(--rule); } .contact__name { font-size: var(--step-0); font-weight: 700; color: var(--steel); line-height: 1.25; } .contact__role { font-size: var(--step--2); color: var(--meta); margin-block: 0.15em var(--sp-2); line-height: 1.4; } .contact__links { display: flex; flex-direction: column; gap: 0.2em; font-family: var(--mono); font-size: var(--step--2); } .contact__links a { text-decoration: none; word-break: break-word; } .contact__links a:hover { text-decoration: underline; } /* --- Asset panel ------------------------------------------------------ */ .assets { background: var(--tint); border-color: var(--tint-deep); } .assets .card__head { background: none; border-block-end-color: var(--tint-deep); } .asset-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .asset { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--card); border: 1px solid var(--tint-deep); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .asset:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); color: var(--ink); } .asset__thumb { inline-size: 2.5rem; block-size: 2.5rem; object-fit: cover; border-radius: 2px; border: 1px solid var(--rule); background: var(--page); } .asset__ico { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 2px; background: var(--tint); color: var(--steel); } .asset__ico svg { inline-size: 1.125rem; block-size: 1.125rem; } .asset__name { display: block; font-size: var(--step--1); font-weight: 500; line-height: 1.3; color: var(--steel); } .asset__meta { display: block; font-family: var(--mono); font-size: var(--step--2); color: var(--meta); margin-block-start: 0.15em; } .asset__dl { color: var(--blue); flex: none; } .asset__dl svg { inline-size: 1.125rem; block-size: 1.125rem; } /* --- Subscribe box ---------------------------------------------------- */ .subscribe .card__body > p { font-size: var(--step--1); color: var(--meta-dark); } .field { display: grid; gap: var(--sp-2); } .field label { font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel); } .field .hint { font-size: var(--step--2); color: var(--meta); font-family: var(--sans); letter-spacing: 0; text-transform: none; } .input, .textarea, .select { inline-size: 100%; padding: 0.6em 0.75em; font-size: var(--step--1); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); } .textarea { min-block-size: 8rem; resize: vertical; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem; padding-inline-end: 2.25rem; } .checkline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; font-size: var(--step--1); color: var(--meta-dark); } .checkline input { margin-block-start: 0.25em; inline-size: 1rem; block-size: 1rem; flex: none; } /* --- RSS panel -------------------------------------------------------- */ .rss-line { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-family: var(--mono); font-size: var(--step--2); background: var(--page); border: 1px dashed var(--rule); border-radius: var(--radius); color: var(--meta-dark); overflow-x: auto; white-space: nowrap; } .rss-line svg { inline-size: 0.95rem; block-size: 0.95rem; color: #E8763A; flex: none; } /* --- Release detail --------------------------------------------------- */ .article { max-inline-size: var(--measure); } .article__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-block-end: var(--sp-4); } .article__stamp { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.08em; color: var(--meta); } .article__title { font-size: var(--step-3); line-height: 1.18; letter-spacing: -0.02em; color: var(--steel); } .article__sub { font-size: var(--step-1); font-weight: 400; line-height: 1.45; color: var(--meta-dark); margin-block-start: var(--sp-3); } .article__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding-block: var(--sp-4); margin-block: var(--sp-5); border-block: 1px solid var(--rule); font-family: var(--mono); font-size: var(--step--2); color: var(--meta); letter-spacing: 0.04em; } .article__meta div { display: flex; flex-direction: column; gap: 0.25em; } .article__meta dt, .article__meta b { font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.92em; color: var(--meta); } .article__meta dd, .article__meta span { margin: 0; color: var(--steel); } .prose > * + * { margin-block-start: var(--sp-4); } .prose p { line-height: 1.68; } .prose h2 { font-size: var(--step-2); margin-block-start: var(--sp-6); padding-block-end: var(--sp-2); border-block-end: 1px solid var(--rule); } .prose h3 { font-size: var(--step-1); margin-block-start: var(--sp-5); } /* Content headings promoted to a full section heading, matching .section-head. Applied from the editor via the "Wire section heading" block style. */ .prose h2.is-style-mw-section { border-block-end: 2px solid var(--steel); padding-block-end: var(--sp-3); margin-block-start: var(--sp-6); } .prose ul, .prose ol { padding-inline-start: 1.35em; display: grid; gap: var(--sp-2); } .prose li { line-height: 1.6; } .prose li::marker { color: var(--blue); } .prose strong { color: var(--steel-800); } .prose figure { margin: 0; } .prose figcaption { font-size: var(--step--2); color: var(--meta); margin-block-start: var(--sp-2); padding-inline-start: var(--sp-3); border-inline-start: 2px solid var(--rule); } .dateline { font-family: var(--mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); font-size: 0.92em; } blockquote.pull { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); background: var(--card); border: 1px solid var(--rule); border-inline-start: 3px solid var(--steel); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } blockquote.pull p { font-size: var(--step-1); line-height: 1.5; color: var(--steel-800); } blockquote.pull p + p { margin-block-start: var(--sp-3); } blockquote.pull footer { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--rule-soft); font-size: var(--step--2); font-family: var(--mono); color: var(--meta); letter-spacing: 0.04em; } blockquote.pull footer b { color: var(--steel); font-weight: 500; } .boilerplate { margin-block-start: var(--sp-6); padding: var(--sp-5); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .boilerplate h2 { font-size: var(--step-0); font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: 0; padding: 0; margin-block-start: 0; } .boilerplate p { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.62; margin-block-start: var(--sp-3); } .wire-stamp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-block-start: var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--steel-900); color: #C7D6E5; border-radius: var(--radius); font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; } .wire-stamp svg { inline-size: 1rem; block-size: 1rem; color: #7FB0E8; flex: none; } .wire-stamp b { color: #fff; font-weight: 500; } .wire-stamp span { margin-inline-start: auto; opacity: 0.75; text-transform: none; letter-spacing: 0.04em; } .pager { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--rule); } .pager a { flex: 1 1 min(100%, 16rem); display: grid; gap: var(--sp-1); padding: var(--sp-4); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .pager a:hover { border-color: var(--blue); background: #FCFDFF; } .pager a[rel="next"] { text-align: right; } .pager .eyebrow { color: var(--blue); } .pager b { font-size: var(--step--1); font-weight: 500; color: var(--steel); line-height: 1.4; } /* --- Grids ------------------------------------------------------------ */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 15rem)), 1fr)); gap: var(--sp-4); } .grid--wide { --min: 20rem; } .grid--tight { --min: 11rem; } /* --- Asset / download card -------------------------------------------- */ .acard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .acard:hover { border-color: var(--tint-deep); box-shadow: var(--shadow); } .acard__media { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: cover; background: var(--tint); border-block-end: 1px solid var(--rule); } .acard__media--contain { object-fit: contain; padding: var(--sp-4); background: var(--card); } .acard__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; } .acard__title { font-size: var(--step-0); color: var(--steel); line-height: 1.35; } .acard__desc { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.5; } .acard__spec { font-family: var(--mono); font-size: var(--step--2); color: var(--meta); letter-spacing: 0.05em; margin-block-start: auto; padding-block-start: var(--sp-2); } .acard__foot { padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--rule); background: var(--page); } /* --- Person card ------------------------------------------------------ */ .person { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .person__photo { aspect-ratio: 4 / 5; inline-size: 100%; object-fit: cover; background: var(--tint); } .person__body { padding: var(--sp-4); display: grid; gap: var(--sp-2); flex: 1; } .person__name { font-size: var(--step-0); color: var(--steel); } .person__role { font-size: var(--step--1); color: var(--meta); line-height: 1.45; } .person__foot { padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--rule); background: var(--page); font-family: var(--mono); font-size: var(--step--2); } /* --- Do / Don't ------------------------------------------------------- */ .rule-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--sp-4); display: grid; gap: var(--sp-3); } .rule-card__flag { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .rule-card__flag svg { inline-size: 1rem; block-size: 1rem; } .rule-card--do .rule-card__flag { color: #15803D; } .rule-card--dont .rule-card__flag { color: #B42318; } .rule-card--do { box-shadow: inset 3px 0 0 0 #15803D; } .rule-card--dont { box-shadow: inset 3px 0 0 0 #B42318; } .rule-card p { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.55; } /* --- Fact sheet / data table ------------------------------------------ */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { inline-size: 100%; min-inline-size: 34rem; font-size: var(--step--1); background: var(--card); } .table caption { text-align: left; font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); padding-block-end: var(--sp-3); } .table th, .table td { padding: var(--sp-3) var(--sp-3); text-align: left; border-block-end: 1px solid var(--rule); vertical-align: top; } .table thead th { font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); background: var(--page); border-block-end: 2px solid var(--steel); white-space: nowrap; } .table tbody th { font-weight: 500; color: var(--steel); } .table tbody tr:hover { background: #FCFDFF; } .table td.num, .table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } .table tfoot td, .table tfoot th { font-family: var(--mono); font-weight: 500; color: var(--steel); background: var(--page); border-block-end: 0; border-block-start: 2px solid var(--steel); } .facts { display: grid; gap: 0; } .facts div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-3); border-block-end: 1px solid var(--rule); } .facts dt { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.09em; text-transform: uppercase; color: var(--meta); } .facts dd { margin: 0; font-size: var(--step--1); color: var(--ink); } /* --- Stat strip ------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } .stat { background: var(--card); padding: var(--sp-4); display: grid; gap: var(--sp-1); } .stat__num { font-family: var(--mono); font-size: var(--step-2); font-weight: 500; color: var(--steel); letter-spacing: -0.01em; } .stat__label { font-size: var(--step--2); color: var(--meta); line-height: 1.4; } /* --- Accordion (FAQ) -------------------------------------------------- */ .qa { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } .qa + .qa { margin-block-start: var(--sp-3); } .qa summary { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); font-size: var(--step-0); font-weight: 500; color: var(--steel); cursor: pointer; list-style: none; transition: background var(--dur) var(--ease); } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { background: var(--tint); } .qa summary::after { content: ""; flex: none; margin-inline-start: auto; inline-size: 0.7rem; block-size: 0.7rem; margin-block-start: 0.35em; border-inline-end: 2px solid var(--blue); border-block-end: 2px solid var(--blue); rotate: 45deg; transition: rotate var(--dur) var(--ease); } .qa[open] summary::after { rotate: 225deg; } .qa[open] summary { border-block-end: 1px solid var(--rule); } .qa__body { padding: var(--sp-4); } .qa__body > * + * { margin-block-start: var(--sp-3); } .qa__body p, .qa__body li { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.62; } .qa__body ul { padding-inline-start: 1.25em; display: grid; gap: var(--sp-2); } .qa__num { font-family: var(--mono); font-size: var(--step--2); color: var(--meta); flex: none; padding-block-start: 0.25em; } /* --- Steps ------------------------------------------------------------ */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: step; } .steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-3); counter-increment: step; } .steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: var(--step--2); font-weight: 500; color: var(--blue); padding-block-start: 0.28em; } .steps h3 { font-size: var(--step-0); margin-block-end: var(--sp-1); } .steps p { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.55; } /* --- Notice ----------------------------------------------------------- */ .notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4); background: var(--tint); border: 1px solid var(--tint-deep); border-radius: var(--radius-lg); font-size: var(--step--1); color: var(--meta-dark); line-height: 1.55; } .notice svg { inline-size: 1.125rem; block-size: 1.125rem; color: var(--blue); margin-block-start: 0.12em; } .notice strong { color: var(--steel); } .notice--embargo { background: var(--embargo-bg); border-color: #F5D9A8; } .notice--embargo svg { color: var(--embargo); } .notice--embargo strong { color: var(--embargo); } .notice > div > * + * { margin-block-start: var(--sp-2); } /* --- Hero ------------------------------------------------------------- */ .hero { position: relative; display: grid; align-items: center; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); padding: var(--sp-6); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } .hero__figure { aspect-ratio: 16 / 9; inline-size: 100%; object-fit: cover; border-radius: var(--radius); background: var(--tint); } .hero__body > * + * { margin-block-start: var(--sp-3); } /* --- Breadcrumb ------------------------------------------------------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; font-family: var(--mono); font-size: var(--step--2); color: var(--meta); letter-spacing: 0.05em; list-style: none; padding: 0; margin: 0; } .crumbs li { display: flex; align-items: center; gap: 0.5em; } .crumbs li + li::before { content: "/"; color: var(--rule); } .crumbs a { text-decoration: none; color: var(--meta); } .crumbs a:hover { color: var(--blue); text-decoration: underline; } .crumbs [aria-current] { color: var(--steel); } /* --- Footer ----------------------------------------------------------- */ .footer { background: var(--steel-900); color: #9FB4C8; font-size: var(--step--1); padding-block: var(--sp-7) var(--sp-5); margin-block-start: var(--sp-8); } .footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-6) var(--sp-5); } .footer__brand { display: grid; gap: var(--sp-3); align-content: start; } .footer__plaque { display: inline-block; background: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); inline-size: fit-content; line-height: 0; } .footer__plaque img { inline-size: clamp(9rem, 7rem + 6vw, 12rem); } .footer__brand p { font-size: var(--step--2); line-height: 1.6; max-inline-size: 34ch; } .footer h2 { font-family: var(--mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-block-end: var(--sp-3); } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .footer a { color: #C7D6E5; text-decoration: none; } .footer a:hover { color: #fff; text-decoration: underline; } .footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; margin-block-start: var(--sp-6); padding-block-start: var(--sp-4); border-block-start: 1px solid rgb(255 255 255 / 0.12); font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.04em; color: #7F97AD; } /* --- 404 -------------------------------------------------------------- */ .notfound { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: center; padding-block: var(--sp-7); } .notfound__code { font-family: var(--mono); font-size: clamp(3.5rem, 2rem + 7.5vw, 7rem); font-weight: 500; line-height: 1; color: var(--steel); letter-spacing: -0.04em; } .notfound__figure { inline-size: 100%; max-inline-size: 24rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--rule); margin-inline: auto; } /* ========================================================================== 5. UTILITIES ========================================================================== */ .visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; } .stack > * + * { margin-block-start: var(--flow, var(--sp-4)); } .stack-lg > * + * { margin-block-start: var(--sp-6); } .stack-sm > * + * { margin-block-start: var(--sp-2); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .section { padding-block: var(--sp-6); } .section--rule { border-block-start: 1px solid var(--rule); } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding-block-end: var(--sp-3); margin-block-end: var(--sp-4); border-block-end: 2px solid var(--steel); } .section-head h2 { font-size: var(--step-2); } .section-head > a, .section-head > p { margin-inline-start: auto; font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.06em; color: var(--meta); } .muted { color: var(--meta); } .small { font-size: var(--step--1); } .smaller { font-size: var(--step--2); } .center { text-align: center; } .nowrap { white-space: nowrap; } .measure { max-inline-size: var(--measure); } .mt-0 { margin-block-start: 0; } .text-steel { color: var(--steel); } /* ========================================================================== 6. MOTION / PRINT ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .pulse { animation: none; } } @media print { :root { --page: #fff; --card: #fff; } .gbar, .strip, .masthead, .filterbar, .footer, .pager, .layout__rail, .skip-link, .assets, .nav, .icon-btn, .subscribe, .no-print, [data-copy], .btn { display: none !important; } body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; } main.page { padding-block: 0; } .wrap { width: 100%; --shell: none; } /* Paper has no rail to sit beside, so the text column takes the full page. */ .layout__main, .layout--article .layout__main { flex: 1 1 100% !important; max-inline-size: none !important; } .layout--article .article, .article, .prose, .measure { max-inline-size: none !important; } .prose p, .prose li, blockquote.pull p, .boilerplate p { color: #000; } /* Keep a press photo to a band across the page, not half a sheet. */ figure img { max-block-size: 78mm; width: auto; } a { color: #000; text-decoration: none; } .prose a[href^="http"]::after, .prose a[href^="mailto"]::after { content: " (" attr(href) ")"; font-family: monospace; font-size: 8.5pt; word-break: break-all; } .article { max-inline-size: none; } .article__title { font-size: 20pt; color: #000; } .article__meta { border-color: #000; } blockquote.pull, .boilerplate, .card { border: 0.5pt solid #999; break-inside: avoid; page-break-inside: avoid; } .wire-stamp { background: #fff !important; color: #000 !important; border: 0.5pt solid #000; } .wire-stamp b, .wire-stamp span { color: #000 !important; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #000; } p, li, blockquote { orphans: 3; widows: 3; } figure, img { break-inside: avoid; max-width: 100% !important; } /* Tables must lay flat on paper — the archive is printed and filed. */ .table-scroll { overflow: visible !important; } .table { min-inline-size: 0 !important; font-size: 8.5pt; width: 100%; } .table th, .table td { padding: 3pt 4pt; border-color: #999; } .table thead { display: table-header-group; } .table thead th { background: #fff !important; border-block-end: 1pt solid #000; color: #000; } .table tfoot td, .table tfoot th { background: #fff !important; border-block-start: 1pt solid #000; color: #000; } .table tbody tr { break-inside: avoid; } .stats { border-color: #999; } .stat { padding: 6pt; } .stat__num { color: #000; } /* Answers print whether or not the reader expanded them. */ .qa { border: 0.5pt solid #999; break-inside: avoid; } .qa > *:not(summary) { display: block !important; } .qa summary::after { display: none; } .qa summary { cursor: auto; } .notice, .feed__empty { border: 0.5pt solid #999; background: #fff !important; } .chip { border: 0.5pt solid #666; background: #fff !important; color: #000 !important; } .chip--embargo { border-width: 1pt; } .print-only { display: block !important; } @page { margin: 16mm 14mm; } } .print-only { display: none; }