/* Sprout News — theme styles. Mobile-first editorial news layout. */ *{box-sizing:border-box} /* ===================================================================== P24 — initial-paint layout-shift fix (font swap). "Sprout Fallback" is NOT a new font: it resolves to whatever LOCAL system font the browser would have used anyway (Segoe UI / Roboto / Helvetica Neue / Arial — first match wins, nothing is downloaded). The only thing it adds is metric-adjustment descriptors so that LOCAL font is drawn at close to the same box size (ascent/descent/line-gap/overall scale) as the chosen webfont (Hind/Mukta/Poppins/Noto Sans Devanagari) that is still downloading. inc/branding-system.php's sprout_brand_font_stack() inserts "Sprout Fallback" into the fallback chain immediately before the plain system stack, so it — not an un-tuned system font — occupies the CSS font-display:swap gap between first paint and the real webfont finishing download. This is what was producing the "page renders larger, then visibly shrinks ~2-3s later" bug: with no metric adjustment, the untuned system fallback measures text noticeably wider/taller than the chosen webfont, so headlines/nav wrap differently and sections sit taller until the swap corrects it. Values are a standard, commonly-used approximation for a humanist/ grotesque sans profile (the family this theme's whole font choice list already is) — not a per-font-file measured calibration; if a future pass has access to exact font metrics (e.g. via a browser font-metrics tool), these three numbers are the only thing that would need revising. */ @font-face{ font-family:"Sprout Fallback"; src:local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"); ascent-override:92%; descent-override:24%; line-gap-override:0%; size-adjust:104%; font-display:swap; } /* ===================================================================== Global layout engine — ONE place for every container width/gutter. Modes (set on the .aen-shell wrapper via sprout_layout_class()): .aen-layout--standard editorial reading column .aen-layout--wide archives / State / City / Category / homepage .aen-layout--full edge-to-edge (gutter only) .aen-layout--sidebar content + rail (2-column foundation) Do not hard-code max-width / padding in individual templates. ===================================================================== */ :root{ /* ONE site container + ONE gutter drive every page type. Header chrome, homepage, every archive/category/State/City/search view and the single article all resolve their width from these two tokens — no template sets its own width. Three intentional content measures sit inside the one container: STANDARD (Pages), ARTICLE (news posts), WIDE (all listings). */ --sprout-container:1180px; /* THE site container — header/nav/context/weather/home/archives/article */ --sprout-gutter:24px; /* THE desktop page gutter (each side) */ --sprout-gutter-mobile:16px; /* ≤700px page gutter */ --sprout-gutter-full:clamp(16px,3.5vw,56px); /* FULL layout only — viewport-edge gutter */ --sprout-w-wide:var(--sprout-container); /* WIDE == the container: all listing/editorial views */ --sprout-w-standard:760px; /* STANDARD — reading column for normal Pages */ --sprout-w-article:860px; /* ARTICLE — reading column for single posts (std < this < wide) */ --sprout-rail:320px; /* THE sidebar/rail width, every place a rail appears */ --sprout-section-gap:44px; /* THE gap between main content and its rail / between sections */ --sprout-home-col-gap:28px; /* gap between the homepage top-grid columns */ --sprout-space-block:28px; /* .aen-layout top padding (bottom = +16) */ --sprout-space-block-mobile:18px; --sprout-w-home:var(--sprout-w-wide); /* deprecated — homepage now uses the one container width */ } body{margin:0;background:var(--aen-paper,#f8f7f4);color:var(--aen-ink,#0F172A);font-family:var(--sprout-font-body);line-height:1.5;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit} .screen-reader-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .aen-skip-link{position:absolute;top:-40px;left:8px;background:var(--sp-surface,#fff);padding:6px 10px;z-index:var(--sp-z-modal,100);transition:top .2s} .aen-skip-link:focus{top:8px} /* Outer container — every template wraps in .aen-shell */ .aen-shell{max-width:var(--sprout-container);margin-inline:auto;padding-inline:var(--sprout-gutter)} /* Width modes — the ONLY element that controls page width is the .aen-shell wrapper that also carries .aen-layout. These 3 selectors (0,2,0) out-rank the base .aen-shell (0,1,0), so the mode always wins the cascade. STANDARD → 760px centred (≈712px content inside the 24px gutters) WIDE → 1180px centred (≈1132px content) FULL → 100% viewport, gutter only, NOT centred inside any box */ .aen-layout{padding-block:var(--sprout-space-block) calc(var(--sprout-space-block) + 16px)} .aen-shell.aen-layout--standard{max-width:var(--sprout-w-standard)} .aen-shell.aen-layout--wide{max-width:var(--sprout-w-wide)} .aen-shell.aen-layout--full{max-width:none;margin-inline:0;padding-inline:var(--sprout-gutter-full)} /* nothing inside FULL may re-introduce a centred max-width */ .aen-layout--full > *, .aen-layout--full .aen-page-main, .aen-layout--full .aen-page-body{max-width:none} /* Optional per-Page reading-width tweak (Customizer / page override). Re-points the standard-width token on the wrapper; the .aen-layout--standard rule above recomputes max-width from it, so no width value is repeated. */ .aen-shell.aen-page--cw-narrow{--sprout-w-standard:680px} .aen-shell.aen-page--cw-comfortable{--sprout-w-standard:860px} /* Homepage editorial area — now the SAME width as every other listing view, so the homepage content aligns pixel-for-pixel with the header / nav / context / weather above it and with archive / category / State / City / search pages. (Was a wider 1360px special case — that is the inconsistency this removes.) */ .aen-shell.aen-home-editorial{max-width:var(--sprout-w-wide)} /* Single article — a deliberate centred reading column, one tier narrower than WIDE so news prose keeps a comfortable line length. It lives inside the SAME site container and uses the SAME 24px gutter as everything else; only the content measure is narrower, by design. Selector (0,2,0) wins over .aen-shell.aen-layout--standard, no !important. */ .aen-shell.aen-article{max-width:min(var(--sprout-w-article),calc(100% - 2 * var(--sprout-gutter)))} /* ==== P1.2 — Masthead ==== */ .aen-site-header{background:var(--sp-surface,#fff);border-bottom:1px solid var(--sp-border,#e5e7eb)} .aen-header-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4,16px);padding-block:var(--sp-3,12px)} .aen-brand{display:flex;align-items:center;gap:var(--sp-3,12px);color:var(--sp-heading);text-decoration:none;min-width:0} .aen-brand-mark{background:var(--sp-accent);color:var(--sp-on-accent);font-family:var(--sprout-font-head);font-weight:700;font-size:26px;line-height:44px;text-align:center;width:44px;height:44px;border-radius:var(--sp-radius-sm);flex:0 0 auto;box-shadow:none} /* Brand mark = WordPress Site Icon (Custom Logo absent). The uploaded icon is shown INSIDE the yellow tile: keep the brand-token fill + rounded tile shape, contain the image so it is never cropped/distorted, and inset it from the edges so it never touches the yellow border. Transparent icons simply reveal the yellow behind them. The img+class selector out-ranks the global img rules with no !important. */ img.aen-brand-mark--icon{width:44px;height:44px;object-fit:contain;object-position:center;background:var(--sp-accent);box-shadow:none;padding:5px;flex:0 0 auto;border-radius:var(--sp-radius-sm)} .aen-brand-text{min-width:0} .aen-brand-text strong{font-family:var(--sprout-font-head);font-weight:800;font-size:var(--sp-fs-3,1.375rem);line-height:1.05;display:block;letter-spacing:-.02em;color:var(--sp-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aen-brand-text small{display:block;color:var(--sp-muted);font-size:var(--sp-fs--1,.8125rem);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aen-header-actions{display:flex;gap:var(--sp-2,8px);align-items:center} .aen-header-date{font-size:var(--sp-fs--1,.8125rem);color:var(--sp-muted);white-space:nowrap;margin-right:var(--sp-1,4px)} @media(max-width:1024px){.aen-header-date{display:none}} .aen-header-search{display:flex;gap:var(--sp-2,8px);align-items:center;padding:0 14px;height:40px;border:1px solid var(--sp-border,#e5e7eb);background:var(--sp-surface,#fff);border-radius:var(--sp-radius-pill,999px);color:var(--sp-muted,#64748b);transition:border-color var(--sp-dur) var(--sp-ease)} .aen-header-search:hover,.aen-header-search:focus-within{border-color:var(--sp-accent)} .aen-header-search input{border:0;outline:0;background:transparent;font-family:var(--sprout-font-body);font-size:var(--sp-fs-0,.9375rem);color:var(--sp-text,#0f172a);width:168px} .aen-icon{border:0;background:transparent;cursor:pointer;color:var(--sp-heading);display:grid;place-items:center;padding:6px} .aen-mobile-only{display:none} /* language pill */ .aen-lang-pill{display:inline-flex;background:var(--sp-surface-2);border:1px solid var(--sp-border,#e5e7eb);border-radius:var(--sp-radius-pill,999px);padding:3px;font-family:var(--sprout-font-head);font-weight:700;font-size:var(--sp-fs--1,.8125rem);letter-spacing:.02em} .aen-lang-pill .aen-lang-opt{border:0;background:transparent;font:inherit;letter-spacing:inherit;cursor:pointer;padding:6px 11px;border-radius:var(--sp-radius-pill,999px);color:var(--sp-muted,#64748b);line-height:1;transition:background var(--sp-dur) var(--sp-ease),color var(--sp-dur) var(--sp-ease)} .aen-lang-pill .aen-lang-opt.is-active,.aen-lang-pill .aen-lang-opt[aria-pressed="true"]{background:var(--sp-heading);color:var(--sp-surface)} /* primary nav */ .aen-nav{background:var(--sp-surface,#fff)} .aen-nav-inner{overflow-x:auto;scrollbar-width:none} .aen-nav-inner::-webkit-scrollbar{display:none} .aen-menu,.aen-mobile-menu-list{display:flex;gap:0;list-style:none;padding:0;margin:0} .aen-menu li a,.aen-mobile-menu-list li a{display:block;padding:var(--sp-3,12px) var(--sp-4,16px);color:var(--sp-text-2,#334155);text-decoration:none;font-family:var(--sprout-font-nav);font-weight:600;font-size:var(--sp-fs-0,.9375rem);white-space:nowrap;box-shadow:inset 0 -2px 0 0 transparent;transition:color var(--sp-dur) var(--sp-ease),box-shadow var(--sp-dur) var(--sp-ease)} .aen-menu li.current a,.aen-menu li.current-menu-item > a,.aen-menu li.current_page_item > a,.aen-menu li.current-menu-parent > a,.aen-menu li a:hover{color:var(--sp-heading);box-shadow:inset 0 -2px 0 0 var(--sp-accent)} /* ========================================================================= HEADER NAVIGATION LAYOUTS — Phase P12. Classic (default) uses every rule above completely unchanged. Compact and Magazine are genuinely different structures, not the same bar recoloured: .aen-site-header--compact one sticky row: brand + inline nav + utilities .aen-site-header--magazine a slim utility strip + a large centred brand band; the nav band (.aen-sticky-cluster) is visually separate below it Every component class inside (.aen-menu, .aen-lang-pill, .aen-theme-toggle, .aen-header-search, .aen-nav-aside…) is reused byte-for-byte; only its containing structure/position changes per layout. ====================================================================== */ /* ---- Compact: one tight sticky row. Weather + edition selector stay INSIDE