/**
* SALTY & CLEVER — LAYOUT CONTRACT (one file, 2026-09-24)
* ---------------------------------------------------------------------------
* Part A is the fleet flexible layout contract (was flexible-layout-contract
* .css); part B is house layout contract 07 (was house-bleed.css). Both were
* printed inline on every page (~26 KB of uncacheable HTML). They are now one
* cached file linked at wp_head:101, after core Additional CSS and before
* salt-notes.css (wp_head:102).
*
* FLEET DIVERGENCE: the two source files were fleet copies. Salty now carries
* them merged; do not re-sync either from the fleet.
* ---------------------------------------------------------------------------
*/
/* ============================ A. FLEXIBLE LAYOUT ========================== */
/**
* Fleet flexible layout contract — Salty & Clever
* Keep brand shells. Free every content component from rigid min-height cages.
*/
/* —— Columns reach 80% of the viewport ——
* The five hub pages (/drinks/, /recipes/, /hosting/, /kitchen-systems/,
* /research-and-standards/) build their dark bands with an inline side padding
* of clamp(24px,6vw,88px) — 12vw in total — which held the columns inside at
* 74.7% of the viewport, under the fleet's 80% floor for Gutenberg columns.
* 2.5vw a side still leaves real room on the dark band (36px at 1440) and puts
* the columns at 82%, 80% at 1024. 16px at the bottom end is the fleet's phone
* gutter. Matched on the exact inline value, which occurs on these five pages
* and nowhere else; !important only because the value it answers is inline. */
.wp-block-group[style*="clamp(24px,6vw,88px)"] {
padding-left: clamp(16px, 2.5vw, 40px) !important;
padding-right: clamp(16px, 2.5vw, 40px) !important;
}
/* —— All content modules size to copy —— */
:is(
.sci-related-card,
.sci-story,
.sci-story--lead,
.sci-route-story,
.sci-result,
.sci-person-card,
.sci-card,
.sci-pathway,
.sci-split,
.sci-intel-card,
.sci-kitchen-kit__card,
.sci-route-bridge__steps article,
.sci-post-nav a,
.sci-404__routes a,
.ri-card,
.ri-card--v2,
.nlh-card
){
min-height:0!important;
height:auto!important;
}
/* No empty flex/grid rows trapping short copy */
:is(
.sci-related-card,
.sci-story,
.sci-route-story,
.sci-person-card,
.sci-pathway,
.sci-intel-card
){
overflow:visible!important;
grid-template-rows:auto!important;
}
/* Kill staggered “empty box” offsets */
.sci-related-card:nth-child(2),
.sci-story:nth-child(3n+2),
.sci-intel-card:nth-child(2),
.sci-intel-card:nth-child(3){
transform:none!important;
margin-top:0!important;
}
/* Interior hero / plate bleed.
* Every non-home hero surface uses the same viewport-based rail: 90vw on
* desktop, then the fleet tablet/mobile step-down. This intentionally sits in
* the late inline contract so older template CSS cannot pull a hero back to a
* capped well or full-viewport width. */
:root{--sc-interior-hero-bleed:90vw;}
@media (max-width:1024px){:root{--sc-interior-hero-bleed:94vw;}}
@media (max-width:768px){:root{--sc-interior-hero-bleed:calc(100vw - 1.5rem);}}
body.fleet-bleed-interior:not(.home):not(.scf-home) :is(.evs-hero,.sci-arrival){
width:var(--sc-interior-hero-bleed)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
box-sizing:border-box;
}
body.fleet-bleed-interior:not(.home):not(.scf-home) :is(.evs-hero>img,.sci-arrival__image){
width:100%!important;
max-width:100%!important;
}
/* Pages that own their opening in Gutenberg do not render .evs-hero. Promote
* the first cover or first direct figure to the same 90% plate instead. */
body.page.fleet-bleed-interior .evs-article:not(:has(> .evs-hero)) .evs-body > .wp-block-cover:first-of-type,
body.page.fleet-bleed-interior .evs-article:not(:has(> .evs-hero)) .evs-body > figure:first-of-type{
width:var(--sc-interior-hero-bleed)!important;
max-width:none!important;
justify-self:start!important;
/* Centred by arithmetic, not by auto margins: since the reading column
became 80vw, this hero is wider than its grid area, and auto margins on
an overflowing grid item resolve to zero — the hero hung off the right
edge. calc() centres it whether or not it overflows. */
margin-left:calc(50% - (var(--sc-interior-hero-bleed) / 2))!important;
margin-right:0!important;
transform:none!important;
box-sizing:border-box;
}
/* Page shells never clip */
:is(
.sci-prose,
.sci-route-content,
.sci-main,
.sci-page__content,
.sci-page,
.sci-article,
.sci-archive
){
overflow:visible!important;
}
/* Reading: one column rails; prose measure on text only */
.sci-page{
background:var(--sn-linen)!important;
}
:is(
.sci-page__grid,
.sci-route-thesis__grid,
.sci-route-bridge__grid,
.sci-evidence__grid,
.sci-state-panel__grid,
.sci-tool-intro__grid
){
grid-template-columns:1fr!important;
gap:clamp(1.5rem,4vw,3rem)!important;
}
@media (max-width:900px){
.sci-article__layout{
grid-template-columns:1fr!important;
gap:clamp(1.5rem,4vw,3rem)!important;
}
}
.sci-page__index,
.sci-article__rail{
position:static!important;
}
.sci-page__content{
box-shadow:none!important;
padding:clamp(1.25rem,3vw,2.5rem)!important;
max-width:100%!important;
}
.sci-prose > :is(figure,.wp-block-image,.wp-block-group,.wp-block-columns,.wp-block-gallery,.wp-block-table){
max-width:100%!important;
width:100%!important;
}
.sci-split{
overflow:visible!important;
}
/* Galleries / media: soft floors only on large screens */
.sci-route-gallery__grid,
.sci-route-gallery figure,
.sci-route-gallery figure:first-child{
min-height:0!important;
}
@media (min-width:901px){
.sci-route-gallery figure{min-height:18rem}
.sci-route-gallery figure:first-child{min-height:22rem}
.sci-story__image img{min-height:14rem!important}
}
/* Pathway / intel cards: padding rhythm, not 25rem cages */
.sci-pathway,
.sci-intel-card,
.sci-kitchen-kit__card,
.sci-route-bridge__steps article{
min-height:0!important;
padding:clamp(1.25rem,3vw,2.25rem)!important;
}
/* Search results */
.sci-result{
min-height:0!important;
}
/* —— ≤900px: one column everywhere content lives —— */
@media (max-width:900px){
:is(
.sci-related__grid,
.sci-story-grid,
.sci-route-featured__grid,
.sci-people-grid,
.sci-pathways__grid,
.sci-intelligence-ledger__grid,
.sci-route-bridge__steps,
.sci-kitchen-kit__grid,
.sci-route-gallery__grid,
.sci-post-nav,
.sci-result,
.sci-empty,
.sci-page__stamp,
.sci-arrival__inner,
.wp-block-columns
){
display:grid!important;
grid-template-columns:1fr!important;
gap:1rem!important;
}
/* The hero's children were missing from this list, and that was a real bug
between 681px and 900px: the block above forces .sci-arrival__inner to a
single 1fr column, but interiors.css still gave .sci-arrival__deck
grid-column:3/-1. Against a one-column grid that resolves to implicit
columns, so the copy column — which carries the breadcrumb, the meta line
and the H1 — collapsed to about 96px and the headline wrapped one word
per line. Below 620px an inline rule already forced both to 1/-1, which is
why the phone layout looked right and the tablet one did not. */
:is(
.sci-story,
.sci-story--lead,
.sci-route-story,
.sci-route-story:first-child,
.sci-pathway,
.sci-intel-card,
.sci-kitchen-kit__card,
.sci-arrival__copy,
.sci-arrival__deck
){
grid-column:1/-1!important;
min-height:0!important;
height:auto!important;
margin:0 0 .9rem!important;
}
.sci-story--lead{
display:flex!important;
flex-direction:column!important;
}
.sci-story__image,
.sci-story--lead .sci-story__image,
.sci-story__image img,
.sci-story--lead .sci-story__image img{
min-height:12rem!important;
height:auto!important;
}
.sci-related-card{
grid-template-rows:auto!important;
}
.sci-related-card .sci-related-card__image,
.sci-result__image{
min-height:12rem!important;
}
.sci-arrival,
.sci-arrival--compact,
.sci-arrival--tall{
min-height:clamp(16rem,42svh,26rem)!important;
overflow:hidden; /* media crop only on hero */
}
.sci-arrival__rail,
.sci-article__aside,
.scf-toc,
.scf-toc-mobile{
display:none!important;
}
.sci-post-nav a{
min-height:0!important;
padding:1.5rem 1rem!important;
}
.sci-post-nav a+a{
border-left:0!important;
border-top:1px solid var(--sn-brass);
text-align:left!important;
}
.sci-route-gallery figure,
.sci-route-gallery figure:first-child{
min-height:14rem!important;
}
.wp-block-column{
flex-basis:100%!important;
width:100%!important;
}
}
@media (max-width:620px){
.sci-shell{
width:min(100% - 1.25rem,var(--sc-shell,90rem))!important;
}
.sci-arrival__copy,
.sci-arrival__deck{
grid-column:1/-1!important;
padding-left:0!important;
border-left:0!important;
}
.sci-arrival__rail{
grid-template-columns:1fr!important;
}
.sci-arrival,
.sci-arrival--compact,
.sci-arrival--tall{
min-height:auto!important;
height:auto!important;
}
.sci-route-story figure,
.sci-route-story:first-child figure{
height:12rem!important;
min-height:0!important;
}
.sci-404__routes a{
min-height:0!important;
}
}
/* ============================ B. HOUSE CONTRACT 07 ======================== */
/**
* SALTY & CLEVER — HOUSE LAYOUT CONTRACT 07
* Full-bleed front page, 90%-bleed interior.
* Spec: standards/07-BLEED-LAYOUT.md, adopted 3 September 2026.
* ---------------------------------------------------------------------------
* Linked at wp_head:101 by inc/fleet-bleed-runtime.php, after every enqueued
* stylesheet and before salt-notes.css (wp_head:102). It used to be printed
* inline (17 KB per page, uncacheable); a plain in the same slot keeps
* the same cascade position and is cached by the browser and the CDN.
*
* What this file corrects, and where the wrong value lives:
*
* assets/css/measure-system.css
* --ms-shell: min(90vw, 1680px) -> 90vw
* the 1680px cap stranded a fixed-width column in a wide window
* --ms-measure: min(78ch, 100%) -> 100% (and min(72ch,100%) at <=1280px)
* the narrow column the contract exists to remove
* --ms-shell: calc(100% - 2rem) -> 90vw (at <=768px)
* .evs-body five-track flow grid -> one track (+ aside only when used)
* it reserved a 19rem aside column on EVERY article whether or not
* anything sat in it, plus two 1fr gutters, which is what left body
* copy at ~40% of the window inside a 90% well
*
* assets/css/editorial.css
* .evs-body :where(p,h2,h3,h4,ul,ol,blockquote,.wp-block-list)
* max-width: var(--evs-measure, 58rem) -> none
*
* assets/css/flexible-layout-contract.css (printed inline at wp_head:100)
* .sci-prose > :is(p,ul,ol,blockquote) max-width: min(70ch,100%) -> none
*
* typography-normalization.css / text-display-standard-v1.css /
* restaurant-index.css — 68ch caps on .entry-content p and .scrx-intro
*
* Deliberate full-bleed elements are NOT reduced to 90%: .evs-hero and
* .sci-arrival keep the 90vw interior plate set in flexible-layout-contract
* .css, and the home .scf-* bands keep their edge-to-edge sections.
* ---------------------------------------------------------------------------
*/
:root {
--bleed-w: 90%;
--bleed-max: none;
--bleed-prose-size: clamp(1.0625rem, 0.88rem + 0.6vw, 1.625rem);
/* The spec writes this clamp unitless; a unitless number cannot be added to
a vw length, so that declaration does not compute. em units give the same
ratio behaviour against the element's own (fluid) font-size. */
--bleed-prose-lh: clamp(1.5em, 1.42em + 0.35vw, 1.72em);
/* Re-point the theme's own width tokens. This block is printed after
measure-system.css, including after its media-query :root blocks, so a
plain declaration is enough — no !important needed. */
--ms-shell: 90vw;
--ms-measure: 100%;
--evs-well: 90vw;
--evs-measure: 100%;
/* The reading column. Contract as of 23 September 2026: the interior page
is a 90% bleed, and the column the words sit in is 80% of the window,
centred in it. Heroes, card grids and archive shells keep the full 90%;
only the article body steps in. On tablet and phone the 90% well is
already the whole usable width, so the column fills it. */
--sc-col-w: 80vw;
}
@media (max-width: 1024px) {
:root { --sc-col-w: 100%; }
}
/* ===========================================================================
1. FRONT PAGE — nothing constrains it
=========================================================================== */
body.home :is(#scf-main, main, .scf-home, .sc-home) > section {
width: 100%;
max-width: none;
margin-inline: 0;
}
/* The shell inside a home band carries that section's own inner padding. It is
not allowed to become a centred cap on the whole page. */
body.home :is(.scf-shell, .sc-band__inner, .sc-inner) {
width: 100%;
max-width: none;
margin-inline: 0;
}
/* ===========================================================================
2. INTERIOR — one 90% container
=========================================================================== */
/* --ms-shell is 90vw above, so .evs-well / .evs-hero are already correct.
These are the interior containers that do not go through --ms-shell. */
/* ONE container gets the 90%, and it is the outermost one. The .sci-*
templates nest shells inside shells, so applying 90% to each of them
compounds: 90% of 90% is 81%, which is how the category archive ended up at
80.2% with its card grid at 72%. */
body:not(.home) :is(main.sci-main, main.sci-page, main.sci-article,
main.sci-archive, .sc-reading, .sc-reading--archive) {
width: var(--bleed-w);
max-width: var(--bleed-w);
margin-inline: auto;
box-sizing: border-box;
}
/* Nothing nested inside that container re-applies the 90%. */
body:not(.home) main :is(.sci-shell, .sci-main, .sci-page, .sci-page__content,
.sci-article, .sci-archive, .sc-reading, .sc-reading--archive) {
width: 100%;
max-width: 100%;
margin-inline: 0;
box-sizing: border-box;
}
/* --- the nested-shell correction ------------------------------------------
assets/css/bleed-layout.css lines 83-99 apply `width: var(--sc-bleed-interior)`
to EVERY .sci-shell, .scf-shell and .sci-page__grid on an interior page,
with no regard for whether an ancestor already took the 90%. Its selectors
run to (0,3,1) and (0,3,2), which outranks the (0,2,2) rule at line 98
above, so that rule never applied and the compounding it was written to stop
came straight back: on a category archive, main.sci-main took 90% and the
.sci-shell inside it took 90% of that — 81% of the viewport, with the story
cards inside landing at 21.5%.
These selectors reach (0,4,1) by carrying both body :not() classes, which is
the minimum needed to win. The ancestor list is what makes this safe: a shell
only drops to 100% when something above it already owns the 90%. A
header > .sci-shell or footer > .scf-shell has no such ancestor and keeps the
90% assigned below. */
body:not(.home):not(.scf-home) :is(main, .sci-main, .sci-archive, .sci-page,
.sci-article, .sci-kitchen-kit, .evs, .evs-article) :is(.sci-shell,
.scf-shell, .sci-page__grid) {
width: 100%;
max-width: 100%;
margin-inline: 0;
box-sizing: border-box;
}
/* Header and footer chrome sit outside main and take the 90% directly. */
body:not(.home) :is(header, footer) > .scf-shell,
body:not(.home) :is(header, footer) > .sci-shell {
width: var(--bleed-w);
max-width: var(--bleed-w);
margin-inline: auto;
box-sizing: border-box;
}
/* editorial.css pairs its measure cap with `margin-inline: auto`. With the cap
removed, those auto inline margins make every one of these grid items
shrink-wrap instead of filling its track: a section heading collapsed to the
width of its own text (93px inside a 976px column, taking its section rule
with it) and short paragraphs drifted to the centre. */
body:not(.home) .evs-body :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-list),
body:not(.home) .evs-body > * {
margin-inline: 0;
}
/* --- the article flow grid ------------------------------------------------
One track by default: the prose fills the flow. The aside track exists only
when there is something to place in it. */
@media (min-width: 760px) {
body:not(.home) .evs-body {
grid-template-columns:
[full-start wide-start text-start] minmax(0, 1fr)
[text-end aside-start aside-end wide-end full-end];
}
body:not(.home) .evs-body:has(> .ms-aside),
body:not(.home) .evs-body:has(> .ms-note),
body:not(.home) .evs-body:has(> .sc-note) {
grid-template-columns:
[full-start wide-start text-start] minmax(0, 1fr)
[text-end aside-start] minmax(0, var(--ms-aside))
[aside-end wide-end full-end];
}
}
/* --- nothing narrower inside the container --------------------------------
Heading caps measured in `ch` are deliberate display typography and are
left alone; these are the body-copy caps. */
body:not(.home) :is(.evs-body, .sci-prose, .entry-content, .article-content,
.post-content, .sc-prose) > *,
body:not(.home) :is(.evs-body, .sci-prose, .entry-content, .article-content,
.post-content, .sc-prose) :is(p, ul, ol, dl, .wp-block-list),
body:not(.home) :is(.scrx-intro, .sci-callout, .scf-callout, .scf-author-bio,
.sci-split, .evs-desk-stream__header .evs-dek),
body:not(.home) :is(.evs-handoff, .evs-subscribe) p,
body:not(.home) .evs-figure-handoff > p:not(.evs-kicker) {
max-width: none;
}
/* --- the 80% reading column ----------------------------------------------
One element per template carries it: the article body (.evs-body) on posts,
pages, products and restaurant records; .sci-prose on the tool and hub
pages that use it. Whether that element is the 90% well itself (pages) or
sits inside it (posts), it lands at 80vw centred — never compounding, never
the ~700px Gutenberg measure. */
body:not(.home) .evs-body,
body:not(.home) main .sci-prose {
width: var(--sc-col-w);
max-width: 100%;
margin-inline: auto;
box-sizing: border-box;
}
/* The case-file sections on restaurant records put a label rail beside the
body. The rail was a third of the section, leaving the text itself at ~58%
of the window; a narrower rail gives the words the column. */
@media (min-width: 900px) {
body:not(.home) .ri-casefile-section {
grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
}
/* restaurant-intelligence-polish.css caps the body at 52rem and each
paragraph at 72ch — the narrow column, in two places. */
body:not(.home) .ri-casefile-section__body,
body:not(.home) .ri-casefile-section p,
body:not(.home) .sci-prose .ri-casefile-section p {
max-width: none;
}
/* --- readability fixes measured in the 23 September crawl ----------------- */
/* Archive and page hero rail: the third numeral took --sc-coral, which the
palette now resolves to a navy (rgb 36,64,94) — 1.66:1 on the rail's own
navy glass. It printed "03 —" in near-invisible ink on 218 pages. A warm
light coral keeps the four-colour sequence and reads at ~8:1. The rail
text itself was 0.58rem (about 9px) mono caps; it is raised to a size
that can be read without leaning in. */
.sci-arrival__rail span {
font-size: max(0.7rem, 11px);
color: rgb(var(--sn-linen-rgb) / 0.82);
}
.sci-arrival__rail span:nth-child(3) b {
color: var(--sn-candle);
}
/* The fourth numeral has the same defect: --sc-sea-glass now resolves to a
navy too. A pale sea-glass restores it (1.66:1 → ~10:1). */
.sci-arrival__rail span:nth-child(4) b {
color: var(--sn-linen);
}
/* Antique gold (#C8A968) is a colour for dark grounds. On ivory it measures
2.0:1 and it was carrying real text: the fact labels on every restaurant
record (Hours, Reservations, Dress guidance — 253 instances), the "Salty
note:" lead-in, and the Kitchen Kit eyebrow. Those take the palette's
gold-for-light-grounds instead, which keeps the metal and reads at ~5:1. */
body:not(.home) .ri-fact-list dt,
body:not(.home) .sc-salty-note strong {
color: var(--sn-rosemary);
}
/* Some Kitchen Kit cards carry their own inline palette, so the token is
re-pointed as well as the colour. */
body:not(.home) .sc-kit,
body:not(.home) [class*="sc-kit"] {
--sc-kit-eyebrow: var(--sn-rosemary);
}
body:not(.home) .sc-kit__eyebrow {
color: var(--sn-rosemary) !important;
}
/* Prices, in shop grids and on the product page: the orange measured 3.8:1
on ivory at 14px. */
body:not(.home) .woocommerce .price,
body:not(.home) .woocommerce .price bdi,
body:not(.home) .woocommerce-Price-amount,
body:not(.home) .woocommerce-Price-amount bdi {
color: var(--sn-rosemary);
}
/* --- full-width blocks inside the reading column --------------------------
A Gutenberg cover or group set to "full width" inside an article used to
inherit three contradictory rules (interiors.css x2, editorial.css) — one
centred it with a transform, one pinned it to 82vw, one forced 100% with
zero margins but left the transform in place. On /drinks/ the hero cover
started at the column's left edge and ran off the right side of the
window, cutting the headline. Full width inside an interior page now means
the page's own 90% bleed, centred; wide means the 80% column. */
body:not(.home) .evs-body .alignfull,
body:not(.home) .evs .alignfull {
width: 90vw !important;
max-width: 90vw !important;
justify-self: start !important;
margin-left: calc(50% - 45vw) !important;
margin-right: 0 !important;
transform: none !important;
box-sizing: border-box;
}
body:not(.home) .evs-body .alignwide,
body:not(.home) .evs .alignwide {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
}
@media (max-width: 1024px) {
body:not(.home) .evs-body .alignfull,
body:not(.home) .evs .alignfull {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
}
}
/* The content-object CTA keeps its ivory text on hover and focus; the
article-link hover would otherwise turn it brass on midnight. */
body .evs-body a.sc-co-action--primary,
body .evs-body a.sc-co-action--primary:hover,
body .evs-body a.sc-co-action--primary:focus-visible {
color: var(--sn-linen);
}
/* A link held back because its target has not been published yet
(inc/unpublished-link-guard.php). It reads as text, not as a dead link. */
.sc-forthcoming {
text-decoration: underline dotted;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
cursor: help;
}
/* ===========================================================================
3. THE FLUID PROSE SCALE
The column stays at 90%; the type grows with the viewport so characters per
line stay inside a sane band — 17px at 390, ~23px at 1440, 26px at 2560 (raised 2026-09-24:
the 80% column is long at 1440, so the type grows rather than the column
narrowing).
Applied to the whole recipe body: ingredient lists, method lists and table
cells included, not only plain paragraphs.
=========================================================================== */
body:not(.home) :is(.evs-body, .sci-prose, .entry-content, .article-content,
.post-content, .sc-prose, .sc-recipe-card, .scf-kitchen-kit,
.sc-kitchen-kit) {
font-size: var(--bleed-prose-size);
line-height: var(--bleed-prose-lh);
}
/* The theme pins .evs-body :where(p, li) to a flat var(--type-body) of 18px.
Inherit instead, so ingredient lists, method lists and table cells scale
with the body. Rail notes, captions, kickers, data labels, salty notes and
pull quotes keep their own deliberate sizes. */
body:not(.home) :is(.evs-body, .sci-prose, .entry-content, .article-content,
.post-content, .sc-prose, .sc-recipe-card, .scf-kitchen-kit, .sc-kitchen-kit)
:where(p, li, dd, dt, td, th):not(.evs-kicker):not(.sc-salty-note):not(.ms-aside):not(.ms-note):not(.sc-note):not(.ms-aside *):not(.ms-note *):not(.sc-note *):not(figcaption *):not(.ms-data *):not(.wp-element-caption) {
font-size: inherit;
line-height: inherit;
}
/* A long measure wants a little more air between list rows, and its markers
kept attached to the text. */
body:not(.home) :is(.evs-body, .sci-prose, .entry-content) :is(ul, ol) {
padding-inline-start: 1.4em;
}
body:not(.home) :is(.evs-body, .sci-prose, .entry-content) :is(ul, ol) > li + li {
margin-block-start: 0.5em;
}
/* ===========================================================================
4. NO HORIZONTAL SCROLL — wide things scroll inside their own box
=========================================================================== */
:is(.evs-body, .sci-prose, .entry-content, .article-content, .post-content,
.sc-prose) :is(.wp-block-table, figure.wp-block-table, .wp-block-code,
.ms-data, .scrollable) {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:is(.evs-body, .sci-prose, .entry-content, .article-content, .post-content,
.sc-prose) :is(.wp-block-table, figure.wp-block-table) > table {
display: table;
width: 100%;
margin: 0;
}
:is(.evs-body, .sci-prose, .entry-content, .article-content, .post-content,
.sc-prose) pre {
max-width: 100%;
overflow-x: auto;
}
/* A bare
has no block wrapper to scroll inside, so it becomes its own
scroll box. Wrapped tables above keep normal table layout. */
:is(.evs-body, .sci-prose, .entry-content, .article-content, .post-content,
.sc-prose) > table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body :is(img, video, iframe, svg, canvas, embed, object) {
max-width: 100%;
}
/* ===========================================================================
5. PRINT — the page box, not the 90%
=========================================================================== */
@media print {
:root {
--bleed-w: 100%;
--bleed-prose-size: 10.5pt;
--bleed-prose-lh: 1.45em;
--ms-shell: 100%;
--ms-measure: 100%;
--evs-well: 100%;
--evs-measure: 100%;
}
body:not(.home) :is(.sci-shell, .scf-shell, .sc-reading, .sc-reading--archive,
.sci-page__content, .sci-main, .sci-article, .sci-archive, .evs-well) {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
body:not(.home) .evs-body {
display: block;
}
}