/* ============================================================ MAGAZINE — FULL-PAGE ARTICLE VIEW ------------------------------------------------------------ Replaces the old center-screen popup/modal with a real full page, in the way Fortune, Forbes, and The Economist render a story: it takes over the page in normal document flow (not a dimmed floating box), gets a wide editorial column, a large serif headline, a rule under the masthead area, and a proper drop cap on the lede — while reusing the exact same DOM/IDs the app already populates (#m-title, #m-content, etc.), so no article data or TTS/translation wiring had to change. The JS toggles a "page-open"/"article-open" class on instead of the old modal ".open" fixed-overlay class; see js/app.js for openArticle()/closeModal(). ============================================================ */ /* Turn the old dimmed, centered overlay into a plain in-flow section. */ .modal-backdrop { position: static; inset: auto; background: none; padding: 0; display: none; overflow: visible; align-items: initial; justify-content: initial; } .modal-backdrop.open { display: block; } /* While an article is open, hide the listing/hero/filter chrome so the article genuinely IS the page, not a layer floating over it. */ body.article-open .shell > .hero, body.article-open .shell > .filter-bar, body.article-open .shell > .main-wrap { display: none; } /* The site footer (publisher name/address, "Published by" block) belongs only on the main magazine listing page — the way Fortune/Forbes/The Economist keep publisher/masthead details off individual story pages. Previously it stayed visible under every open article; hide it here. */ body.article-open .site-footer { display: none; } /* ── Article shell ── */ .modal { max-width: 720px; width: 100%; margin: 0 auto 3rem; padding-top: 1.5rem; border-top: none; box-shadow: none; background: transparent; } .modal-close { position: static; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); padding: 0; margin: 0 2.2rem 1.2rem; background: none; border: none; cursor: pointer; } .modal-close:hover { color: var(--gold); } .modal-head { padding: 0 2.2rem 1.6rem; border-bottom: 3px solid var(--gold); } .modal-issue { font-size: 0.62rem; letter-spacing: 0.16em; } .modal-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.9rem; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 0.7rem; } .byline-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; } .modal-body { padding: 2.2rem 2.2rem 0; } .modal-abstract { font-size: 1.2rem; line-height: 1.6; border-left: 3px solid var(--gold); } .modal-content { font-size: 1.02rem; line-height: 1.85; max-width: 62ch; } /* Drop cap on the first paragraph, the classic feature-magazine opener. */ .modal-content p:first-of-type::first-letter { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 3.6rem; font-weight: 600; float: left; line-height: 0.82; padding: 0.05em 0.08em 0 0; color: var(--gold); } .modal-foot { margin: 2rem 2.2rem 0; padding: 1.2rem 0; border-top: 1px solid var(--gold-b); background: none; } @media (max-width: 720px) { .modal-title { font-size: 2rem; } .modal-body, .modal-head { padding-left: 1.2rem; padding-right: 1.2rem; } .modal-foot { margin-left: 1.2rem; margin-right: 1.2rem; } }