/* ============================================================================ The Batheaston Times — style.css One hand-editable stylesheet. No build step, no framework, no dependencies. THE SEASONAL COLOUR Set data-season on : spring | summer | autumn | winter. The whole page re-tints from --accent / --accent-ink. Nothing else changes. THE OBJECT LANGUAGE The interface is flat, like a newspaper page: rules, small caps, columns. The magazines are the only things with depth — page edges, a spine, a shadow where they meet the shelf. One idea, kept everywhere: the site is the reading room; the issues are the things in it. ========================================================================== */ /* ---- 1. Font (self-hosted, ONE file, latin subset) ------------------------ */ /* Figtree is the magazine's own voice — the covers and the printed pages are set in it, so the site is too, from masthead to body. */ @font-face { font-family: "Figtree"; src: url("assets/fonts/figtree.woff2") format("woff2-variations"); font-weight: 400 800; font-style: normal; font-display: swap; } /* ---- 2. Design tokens ---------------------------------------------------- */ :root { /* Bath-stone & Avon-valley palette (light) */ --paper: #f6f3ec; /* warm limestone paper */ --panel: #ece7db; /* deeper stone — the reading-room bands */ --ink: #23272e; /* cool slate near-black — body text */ --ink-soft: #545c66; /* cool slate grey — secondary */ --rule: #d5cdbd; /* hairline rules (greige) */ --rule-strong:#bdb49f; /* heavier stone rule */ --river: #3f5f4e; /* Avon river green — links */ --sky: #5d8296; /* valley sky — decorative */ /* Four seasonal accents, for rules, flags and blocks. */ --spring: #4c8a52; --summer: #b3761f; --autumn: #9f4f2c; --winter: #3f6b83; /* The same four deepened to clear 4.5:1 as small text on BOTH paper and the stone panel. Used only where the accent carries words. */ --spring-ink: #3b6d43; --summer-ink: #8a5a12; --autumn-ink: #98492a; --winter-ink: #3d687f; /* A second, louder temperature: the current year's cover grounds. Shapes only (the griffin, the nav underline) — never body text. Re-sample when the covers change. */ --spring-display: #f96c25; --summer-display: #1aafb5; --autumn-display: #f7991f; --winter-display: #7ba3d8; /* The two seasonal controls. Default = current issue (Summer). */ --accent: var(--summer); --accent-ink: var(--summer-ink); --display: var(--summer-display); /* The magazine object: fore-edge page colours + a soft modern shadow. */ --edge-a: #fdfbf5; --edge-b: #e6dfcf; --mag-line: rgba(35, 39, 46, 0.30); --mag-shadow: 0 1px 1px rgba(32, 34, 40, 0.10), 0 6px 14px -4px rgba(32, 34, 40, 0.16), 0 22px 44px -16px rgba(32, 34, 40, 0.28); --mag-shadow-lift: 0 2px 2px rgba(32, 34, 40, 0.10), 0 10px 20px -6px rgba(32, 34, 40, 0.18), 0 30px 56px -18px rgba(32, 34, 40, 0.32); --page-shadow: 0 1px 0 rgba(32, 34, 40, 0.18), 0 9px 22px rgba(32, 34, 40, 0.20); /* Type */ --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Measure & rhythm */ --measure: 66ch; --gap: clamp(1.5rem, 4vw, 3rem); --pad-x: clamp(1.25rem, 5vw, 4rem); } /* Seasonal switches — set data-season on or any wrapper. */ [data-season="spring"] { --accent: var(--spring); --accent-ink: var(--spring-ink); --display: var(--spring-display); } [data-season="summer"] { --accent: var(--summer); --accent-ink: var(--summer-ink); --display: var(--summer-display); } [data-season="autumn"] { --accent: var(--autumn); --accent-ink: var(--autumn-ink); --display: var(--autumn-display); } [data-season="winter"] { --accent: var(--winter); --accent-ink: var(--winter-ink); --display: var(--winter-display); } /* ---- Dark mode: automatic, the reading room after hours ------------------- */ @media (prefers-color-scheme: dark) { :root { --paper: #191b1e; --panel: #212429; --ink: #e8e7e2; --ink-soft: #a6acb4; --rule: #313640; --rule-strong:#454b56; --river: #86ac92; --sky: #86a7b8; --spring: #74b079; --summer: #d6a24e; --autumn: #d17d52; --winter: #74a1ba; /* On near-dark grounds the lifted accents clear AA as text. */ --spring-ink: var(--spring); --summer-ink: var(--summer); --autumn-ink: var(--autumn); --winter-ink: var(--winter); --edge-a: #31373e; --edge-b: #23282d; --mag-line: rgba(0, 0, 0, 0.6); --mag-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 6px 16px -4px rgba(0, 0, 0, 0.45), 0 24px 48px -16px rgba(0, 0, 0, 0.6); --mag-shadow-lift: 0 2px 2px rgba(0, 0, 0, 0.35), 0 10px 22px -6px rgba(0, 0, 0, 0.5), 0 32px 60px -18px rgba(0, 0, 0, 0.65); --page-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 9px 24px rgba(0, 0, 0, 0.5); } } /* ---- 3. Reset & base ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Components below set explicit display values, which would otherwise beat the browser's rule for the hidden attribute. Keep hidden hidden — the archive filter and the reader depend on it. */ [hidden] { display: none !important; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.125rem; /* 18px floor for this readership */ line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--sans); font-weight: 650; line-height: 1.12; margin: 0 0 0.5em; text-wrap: balance; overflow-wrap: break-word; color: var(--ink); } p { margin: 0 0 1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--river); text-decoration-line: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--accent-ink); text-decoration-color: var(--accent-ink); } /* ---- 4. Focus & skip link (WCAG 2.2) ------------------------------------- */ :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 1px; } /* On ink-filled controls the ink outline would vanish, so ring in paper. */ .btn--primary:focus-visible, .tool--primary:focus-visible, .chip[aria-pressed="true"]:focus-visible, .skip-link:focus-visible { outline-color: var(--paper); box-shadow: 0 0 0 6px var(--ink); } .skip-link { position: absolute; left: 0.5rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; text-decoration: none; font-family: var(--sans); font-weight: 600; transition: top 0.15s ease; } .skip-link:focus { top: 0.5rem; color: var(--paper); } /* ---- 5. Layout shell ----------------------------------------------------- */ .wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--pad-x); } .wrap--narrow { max-width: 48rem; } .section { padding-block: clamp(2.25rem, 5vw, 3.5rem); } /* A band: the deeper stone of the reading room behind the shelves. */ .band { background: var(--panel); border-block: 1px solid var(--rule); } .band + .band { border-top: 0; } /* ---- 6. Masthead --------------------------------------------------------- */ .masthead { padding-top: clamp(1rem, 3vw, 1.75rem); text-align: center; border-top: 4px solid var(--ink); } .masthead__folio { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); padding: 0.55rem 0; margin: 0; border-bottom: 1px solid var(--rule); display: flex; gap: 0.9em; justify-content: center; flex-wrap: wrap; } .masthead__griffin { display: flex; justify-content: center; margin: 0.9rem 0 0; } .masthead__griffin img { height: clamp(2.5rem, 5vw, 3.4rem); width: auto; } .masthead--compact .masthead__griffin { margin-top: 0.7rem; } .masthead--compact .masthead__griffin img { height: 1.9rem; } .masthead__title { font-family: var(--sans); font-weight: 725; font-size: clamp(2.5rem, 8.5vw, 6rem); line-height: 0.98; letter-spacing: -0.011em; margin: clamp(0.6rem, 2vw, 1.1rem) 0 0; } .masthead__title a { color: inherit; text-decoration: none; } .masthead__title a:hover { color: inherit; } .masthead__strap { font-family: var(--sans); font-weight: 500; font-size: clamp(1.02rem, 2.3vw, 1.3rem); color: var(--ink-soft); margin: 0.5rem 0 0; } /* Double rule beneath the title — the newspaper cue, done plainly. */ .masthead__rule { margin-top: clamp(0.8rem, 2vw, 1.2rem); margin-bottom: 0; border: 0; border-top: 3px solid var(--ink); position: relative; } .masthead__rule::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--ink); } /* Compact header for interior pages */ .masthead--compact .masthead__title { font-size: clamp(1.9rem, 5vw, 3rem); } /* ---- 7. Navigation ------------------------------------------------------- */ .site-nav { border-bottom: 1px solid var(--rule); } .site-nav__list { list-style: none; margin: 0; padding: 0.4rem 0; display: flex; gap: clamp(0.5rem, 3vw, 2rem); justify-content: center; flex-wrap: wrap; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .site-nav__list a { display: block; padding: 0.55rem 0.35rem; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; } .site-nav__list a:hover { color: var(--accent-ink); } .site-nav__list a[aria-current="page"] { border-bottom-color: var(--display); color: var(--ink); } /* ---- 8. Rubrics ----------------------------------------------------------- */ /* One centred serif title per section, nothing else competing with it. */ .rubric { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } .rubric__title { font-family: var(--sans); font-size: clamp(1.55rem, 3.8vw, 2.1rem); font-weight: 650; line-height: 1.15; margin: 0; } .rubric__note { font-family: var(--sans); font-size: 0.98rem; color: var(--ink-soft); margin: 0.6rem auto 0; max-width: 60ch; } /* ---- 9. Buttons, tools & chips ------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5em; max-width: 100%; min-height: 3rem; /* ≈48px target */ padding: 0.7rem 1.4rem; font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border: 1.5px solid var(--ink); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { background: transparent; color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn__note { font-weight: 400; font-size: 0.82rem; opacity: 0.8; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .btn-row--centre { justify-content: center; } /* Compact controls for the reader chrome. */ .tool { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 2.75rem; min-width: 2.75rem; padding: 0.35rem 0.9rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; text-decoration: none; background: transparent; color: var(--ink); border: 1.5px solid var(--rule-strong); cursor: pointer; } .tool:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); } .tool:disabled { opacity: 0.4; cursor: default; } .tool--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .tool--primary:hover:not(:disabled) { background: transparent; color: var(--ink); } .chip { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; padding: 0.5rem 1rem; min-height: 2.75rem; background: transparent; color: var(--ink); border: 1.5px solid var(--rule-strong); cursor: pointer; } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .chip:hover { border-color: var(--ink); } /* ---- 10. The magazine object --------------------------------------------- */ /* A copy of the Times: the cover, a crisp hint of page edges at the fore-edge and foot, a whisper of spine, and one soft, modern shadow. All CSS — no image weight, no furniture. */ .mag { display: block; position: relative; background: var(--panel); aspect-ratio: 27 / 40; box-shadow: 1px 1.5px 0 var(--edge-a), 2px 3px 0 var(--edge-b), 3px 4.5px 0 var(--mag-line), var(--mag-shadow); } .mag img { width: 100%; height: 100%; object-fit: cover; } /* Spine crease and a hairline frame, in one quiet overlay. */ .mag::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(32, 34, 40, 0.12), rgba(255, 255, 255, 0.07) 1.8%, rgba(32, 34, 40, 0.05) 3.6%, rgba(32, 34, 40, 0) 7%); box-shadow: inset 0 0 0 1px rgba(32, 34, 40, 0.14); } @media (prefers-color-scheme: dark) { .mag::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.05) 1.8%, rgba(0, 0, 0, 0.10) 3.6%, rgba(0, 0, 0, 0) 7%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); } } /* Pick it up: the lift on hover and keyboard focus. */ a.mag-link { display: block; text-decoration: none; } a.mag-link .mag { transition: transform 0.18s ease, box-shadow 0.18s ease; } a.mag-link:hover .mag, a.mag-link:focus-visible .mag { transform: translateY(-4px); box-shadow: 1px 1.5px 0 var(--edge-a), 2px 3px 0 var(--edge-b), 3px 4.5px 0 var(--mag-line), var(--mag-shadow-lift); } /* ---- 11. The collection --------------------------------------------------- */ .shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); column-gap: clamp(1.5rem, 4vw, 2.75rem); row-gap: clamp(2.25rem, 5vw, 3.25rem); align-items: start; } @media (min-width: 40rem) { .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); } } /* The home page shows the three most recent, stretched across the measure. */ .shelf-grid--recent { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); } .mag-card { display: flex; flex-direction: column; } .mag-card__meta { padding-top: 0.9rem; } .mag-card__season { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); margin: 0; } .mag-card__links { font-family: var(--sans); font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; } /* Padded so each link clears the 24×24px minimum target (WCAG 2.5.8). */ .mag-card__links a { display: inline-block; min-width: 2.5rem; padding-block: 0.3rem; } /* ---- 12. The counter (current-issue hero) --------------------------------- */ .hero { padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.25rem, 5vw, 3.25rem); } .hero__grid { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: start; } .hero__cover { position: relative; } .hero__body { padding-top: 0.25rem; } .hero__dateline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0; font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 0.5rem; } .hero__issueline { font-family: var(--sans); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.9rem); line-height: 1.04; letter-spacing: -0.007em; margin: 0.1rem 0 0.7rem; } .hero__lede { font-size: 1.15rem; color: var(--ink); max-width: 46ch; } /* One quiet line on what's inside — the full list lives on the issue page. */ .hero__inside { font-family: var(--sans); font-size: 1.1rem; line-height: 1.55; color: var(--ink); max-width: 52ch; margin: 1.6rem 0 0; } .hero__inside strong { font-weight: 600; } /* ---- 13. The article block ----------------------------------------------- */ /* Body copy set as the paper itself would set it: two columns with a rule down the middle, and a drop cap to open. */ .article { font-size: 1.15rem; max-width: 58ch; margin-inline: auto; } .article p { margin-bottom: 1em; } .dropcap::first-letter { font-family: var(--sans); font-weight: 725; float: left; font-size: 3.4em; line-height: 0.74; padding: 0.06em 0.12em 0 0; color: var(--accent-ink); } /* ---- 14. Sponsors --------------------------------------------------------- */ /* On the home page, sponsors are credited the way print would do it: named, in the running text of a thank-you line. Logos live on the advertise page, where each sponsor has room for proper billing. */ .sponsors-credit { font-family: var(--sans); font-size: clamp(1.15rem, 2.4vw, 1.3rem); line-height: 1.8; text-align: center; max-width: 44rem; margin-inline: auto; } .sponsors-credit a { color: var(--ink); } .sponsors-credit a:hover { color: var(--accent-ink); } /* Full sponsor billing (advertise page). */ .sponsor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 54rem; } .sponsor { display: grid; grid-template-columns: 6.5rem 1fr; gap: clamp(1rem, 4vw, 2.25rem); align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); } .sponsor:first-child { border-top: 1px solid var(--rule); } .sponsor__logo { background: #fff; border: 1px solid var(--rule-strong); padding: 0.5rem; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .sponsor__logo img { max-height: 100%; width: auto; object-fit: contain; } .sponsor__name { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; margin: 0 0 0.2rem; } .sponsor__name a { color: var(--ink); text-decoration: none; } .sponsor__name a:hover { color: var(--accent-ink); text-decoration: underline; } .sponsor__line { color: var(--ink-soft); margin: 0; font-size: 1.02rem; } /* ---- 15. Contact ---------------------------------------------------------- */ .contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); } .contact__cell { padding-block: 0.25rem; } .contact__label { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.4rem; } .contact__value { font-family: var(--sans); font-weight: 600; font-size: 1.2rem; overflow-wrap: break-word; } /* ---- 16. Archive ---------------------------------------------------------- */ .archive-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); font-family: var(--sans); } .filter-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-right: 0.5rem; } .year-group { margin-bottom: clamp(2.5rem, 6vw, 4rem); } .year-group:last-child { margin-bottom: 0; } .year-group__head { font-family: var(--sans); font-size: clamp(1.4rem, 3.5vw, 1.9rem); font-weight: 650; margin: 0 0 1.4rem; display: flex; align-items: baseline; gap: 0.9rem; } .year-group__count::before { content: "\00b7 "; } .year-group__count { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.08em; } /* ---- 17. The issue page --------------------------------------------------- */ .issue-lead { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: start; padding-block: clamp(1.75rem, 4vw, 3rem); } .issue-lead__cover { position: relative; } .issue-lead__date { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin: 0; } .issue-lead__title { font-weight: 700; font-size: clamp(2rem, 5.5vw, 3.3rem); line-height: 1.04; letter-spacing: -0.007em; margin: 0.3rem 0 1rem; } .issue-lead__meta { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); } /* Contents with dot leaders — the print table of contents. */ .contents { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); max-width: 56rem; } .contents li { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); } .contents__dept { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: 0.2rem; } .contents__line { display: flex; align-items: baseline; gap: 0.7rem; margin: 0; } .contents__title { font-family: var(--sans); font-weight: 600; font-size: 1.2rem; color: var(--ink); } .contents__leader { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--rule-strong); transform: translateY(-0.28em); } .contents__page { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .contents__desc { color: var(--ink-soft); font-size: 1rem; margin: 0.25rem 0 0; max-width: 58ch; } .issue-pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--sans); font-size: 0.98rem; font-weight: 600; border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1.5rem; } .issue-pager a { display: inline-block; padding-block: 0.3rem; } .issue-pager span { color: var(--ink-soft); font-weight: 400; } /* ---- 18. The reader -------------------------------------------------------- */ /* Without JavaScript this is the whole issue, page after page, down the screen. With it, reader.js turns the same list into an open magazine: spreads, page turns, a slider. */ .reader-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--panel); } .reader-bar { background: var(--paper); border-top: 4px solid var(--ink); border-bottom: 1px solid var(--rule); } .reader-bar__inner { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; padding-block: 0.55rem; } .reader-bar__wordmark { font-family: var(--sans); font-size: 1.15rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; } .reader-bar__wordmark:hover { color: var(--accent-ink); } .reader-bar__issue { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); } .reader-bar__spacer { flex: 1 1 auto; } .reader-stage { flex: 1 1 auto; position: relative; display: flex; padding: clamp(1rem, 2.5vw, 2rem) var(--pad-x); } /* Without JavaScript (or if the reader cannot start), the fallback is the route in: open the PDF itself, or the contents page. An inline one-liner adds .js to before first paint, so script users never see it. */ .reader-fallback { margin: auto; max-width: 30rem; text-align: center; padding: 2rem 0; } .reader-fallback h2 { font-size: 1.6rem; } .reader-fallback p { color: var(--ink-soft); font-family: var(--sans); font-size: 1rem; } .js .reader-fallback { display: none; } .reader-loading { margin: auto; text-align: center; font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); } .reader-loading::before { content: ""; display: block; width: 9rem; height: 3px; margin: 0 auto 1rem; background: linear-gradient(90deg, var(--accent) 0 30%, transparent 30%) no-repeat, var(--rule); background-size: 200% 100%; animation: seek 1.1s ease-in-out infinite; } @keyframes seek { from { background-position: -100% 0; } to { background-position: 200% 0; } } /* The open copy: one or two pages drawn from the PDF itself. */ .reader-spread canvas { cursor: pointer; } .reader-spread { margin: auto; display: flex; align-items: center; justify-content: center; } .page-slot { position: relative; margin: 0; } .page-slot canvas { display: block; background: #fff; animation: pageset 0.16s ease; } @keyframes pageset { from { opacity: 0.35; } } .page-slot.is-left canvas { box-shadow: -5px 10px 24px rgba(32, 34, 40, 0.28), 0 1px 0 rgba(32, 34, 40, 0.2); } .page-slot.is-right canvas { box-shadow: 5px 10px 24px rgba(32, 34, 40, 0.28), 0 1px 0 rgba(32, 34, 40, 0.2); } .page-slot.is-single canvas { box-shadow: 0 12px 28px rgba(32, 34, 40, 0.30), 0 1px 0 rgba(32, 34, 40, 0.2); } /* The gutter: where the two pages meet and curve into the binding. */ .page-slot.is-left::after, .page-slot.is-right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; } .page-slot.is-left::after { right: 0; background: linear-gradient(90deg, rgba(32, 34, 40, 0), rgba(32, 34, 40, 0.12) 82%, rgba(32, 34, 40, 0.26)); } .page-slot.is-right::after { left: 0; background: linear-gradient(270deg, rgba(32, 34, 40, 0), rgba(32, 34, 40, 0.10) 82%, rgba(32, 34, 40, 0.22)); } @media (prefers-color-scheme: dark) { .page-slot.is-left canvas { box-shadow: -5px 10px 26px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(0, 0, 0, 0.5); } .page-slot.is-right canvas { box-shadow: 5px 10px 26px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(0, 0, 0, 0.5); } .page-slot.is-single canvas { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(0, 0, 0, 0.5); } } /* Tap the outer margins to turn, like flicking a page. */ .tapzone { position: absolute; top: 0; bottom: 0; width: 16%; border: 0; background: transparent; cursor: pointer; z-index: 2; padding: 0; } .tapzone--prev { left: 0; } .tapzone--next { right: 0; } .reader-controls { position: sticky; bottom: 0; z-index: 5; background: var(--paper); border-top: 1px solid var(--rule); padding: 0.6rem var(--pad-x); display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.1rem); } .pageind { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); min-width: 10ch; text-align: center; } .pageslider { flex: 1 1 auto; min-width: 0; /* the native range has a wide default */ min-height: 2.75rem; margin: 0; accent-color: var(--accent-ink); } /* On a phone the slider takes the top row, whole-width — easier under a thumb. */ @media (max-width: 30rem) { .reader-controls { flex-wrap: wrap; } .pageslider { order: -1; flex-basis: 100%; } .pageind { flex: 1; } } .reader-foot { background: var(--paper); border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); padding-block: 0.7rem; } .reader-foot__inner { display: flex; gap: 0.5rem 1.5rem; flex-wrap: wrap; justify-content: space-between; } /* ---- 19. Footer ------------------------------------------------------------ */ .site-footer { background: var(--panel); border-top: 4px solid var(--ink); position: relative; margin-top: clamp(3rem, 8vw, 5rem); padding-block: clamp(2.5rem, 6vw, 4rem); font-family: var(--sans); } .site-footer::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; border-top: 1px solid var(--ink); } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--gap); } .site-footer h2 { font-family: var(--sans); font-size: 1.4rem; margin: 0 0 0.5rem; } .site-footer__blurb { color: var(--ink-soft); font-size: 0.95rem; max-width: 26ch; } .site-footer__label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.6rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 0.45rem; } .site-footer__legal { margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } /* ---- 20. Utilities --------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lede { font-size: 1.2rem; color: var(--ink); max-width: var(--measure); } .lede--centre { margin-inline: auto; } .stack-list > * + * { margin-top: 1rem; } .centre { text-align: center; } .note { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); } /* ---- 21. Responsive -------------------------------------------------------- */ @media (max-width: 48rem) { .hero__grid, .issue-lead { grid-template-columns: 1fr; } .hero__cover, .issue-lead__cover { max-width: 19rem; margin-inline: auto; width: 100%; } .sponsor { grid-template-columns: 5rem 1fr; gap: 1.25rem; } .btn { width: 100%; } .btn-row { flex-direction: column; } } /* ---- 22. Motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } a.mag-link:hover .mag, a.mag-link:focus-visible .mag { transform: none; } } /* ---- 23. Print ------------------------------------------------------------- */ @media print { .site-nav, .skip-link, .archive-controls, .btn-row, .issue-pager, .reader-controls, .tapzone { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } a { text-decoration: underline; } .mag, .mag img, .page-slot canvas { box-shadow: none !important; } }