/* * BROKEN EDITORIAL GRID — global foundation. * * Ported from the approved prototype's design tokens (design-exploration/ * site-foundation/concept-1-broken-grid/concept.css) — the palette, type * scale, spacing scale, page width, and 12-column grid — as production * theme assets. This stage establishes the shared foundation only: the * homepage/archive/detail *compositions* are not restyled yet, so most * content below the header/footer still reads structurally plain in this * stage, sitting on the new palette and type. * * Every directional rule uses logical properties (inline/block, not * left/right/top/bottom) so Persian (RTL) and English (LTR) mirror * naturally with no separate RTL stylesheet. * * Type scale — a ~1.2 ratio, fluid clamps holding from 390px to 1440px+: * --step--1 caption / metadata 12–13px * --step-0 body 16–17px * --step-1 lede / large body 18–20px * --step-2 small heading (h4) 22–26px * --step-3 section heading (h3) 28–34px * --step-4 page heading (h2) 38–50px * --step-5 display heading (h1) 56–76px * --step-6 hero display 72–96px * * Spacing scale — an 8px base: * --space-1 4px --space-4 24px --space-7 64px * --space-2 8px --space-5 32px --space-8 96px * --space-3 16px --space-6 48px */ :root { --paper: #f2efe7; --paper-2: #e9e5da; --ink: #17130d; --ink-2: #5f584c; --ink-3: #8d8577; --rule: #cdc5b3; --accent: #a8412a; --gutter: clamp( 14px, 1.3vw, 22px ); --pad: clamp( 20px, 3.6vw, 64px ); --step--1: clamp( 12px, 0.75vw + 10px, 13px ); --step-0: clamp( 16px, 0.3vw + 15.5px, 17px ); --step-1: clamp( 18px, 0.5vw + 17px, 20px ); --step-2: clamp( 22px, 1.2vw + 19px, 26px ); --step-3: clamp( 28px, 2vw + 23px, 34px ); --step-4: clamp( 38px, 3.2vw + 29px, 50px ); --step-5: clamp( 56px, 4.8vw + 38px, 76px ); --step-6: clamp( 72px, 6vw + 48px, 96px ); --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; } body { background: var( --paper ); color: var( --ink ); font-size: 17px; line-height: 1.62; } /* Long titles (Persian or English) must never force horizontal scroll. */ h1, h2, h3, h4, .entry-title { overflow-wrap: break-word; word-break: break-word; hyphens: none; } .grid12 { display: grid; grid-template-columns: repeat( 12, minmax( 0, 1fr ) ); column-gap: var( --gutter ); } /* * Named .fehrest-shell, not .page — WordPress's own body_class() emits a * bare "page" class on every Page post type (this theme's front page and * every static Page use one), which collided with this rule and applied it * twice (once to , once to the wrapper div), silently doubling the * page's inline padding and shrinking every bleed/overlap measurement * calculated against --pad. */ .fehrest-shell { padding-inline: var( --pad ); max-width: 1680px; margin-inline: auto; } /* Any Latin/URL-shaped token (an email address, a phone number, a domain) placed inside RTL text needs explicit isolation — global utility, since the site footer (every page) and the Contact page both use it. */ .ltr-token { direction: ltr; unicode-bidi: isolate; display: inline-block; }