/* @CODE-LABEL v1 id: thirdsinfo-style parent: thirdsinfo scope: module name: Page styling does: The whole visual treatment -- paper palette, serif prose measure, the step/clip grid, the deck presentation and its controls, and the phone-width collapse. for: Reach for this to change how the page looks. There is no build step and no preprocessor; it is one stylesheet loaded directly. reuse: THIS FILE IS IN TWO LAYERS AND THE ORDER IS LOAD-BEARING. Everything outside the `.js-deck` blocks styles the page as STACKED, SCROLLABLE SLIDES -- that is what a reader with no scripting, a crawler, a reader mode and the printer get, and it must stay readable on its own. The `.js-deck` rules, which app.js switches on by putting that class on , are what turn the same markup into one-slide-at-a-time. Never move a base typographic rule inside a `.js-deck` block or the no-script page loses it. Fonts are system stacks on purpose -- the page loads nothing from a third-party origin, so do not introduce a webfont link. Colours are declared once as custom properties at :root; the contrast of --ink-muted on --paper was checked and is the floor, so darken rather than lighten if it changes. THE SLIDE, NOT ITS INNER DIV, IS THE SCROLLER when a slide is taller than the viewport, and app.js resets both scrollTops on every flip -- a slide that opened half-scrolled from the previous one reads as a broken page. The step grid does NOT alternate sides in the deck: alternation reads as rhythm down a scrolling page and as a jump-cut when each slide replaces the last. stack: css3, custom properties, grid tags: css, layout, responsive, typography, deck updated: 2026-09-15 */ :root { --paper: #fbfaf7; --paper-alt: #f2f0e9; --ink: #1c1b18; --ink-muted: #56534b; --rule: #ddd8ce; --accent: #14496b; --accent-soft: #e7eef4; --measure: 34rem; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --nav-h: 4.25rem; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.65 var(--serif); overflow-wrap: break-word; } a { color: var(--accent); } a:focus-visible, button:focus-visible, .slide:focus-visible, .skip:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .slide:focus { outline: none; } .skip { position: absolute; left: -9999px; top: 0; background: var(--paper); padding: .75rem 1rem; z-index: 40; } .skip:focus { left: 0; } /* ---------- slides, stacked (the no-script base) ---------- */ .slide { padding: 4rem 1.5rem; border-top: 1px solid var(--rule); } .slide:first-child { border-top: 0; } .slide-inner { width: 100%; max-width: 68rem; margin: 0 auto; } .slide-title { font: 400 clamp(1.75rem, 4vw, 2.5rem)/1.15 var(--serif); letter-spacing: -.015em; margin: 0 0 1.25rem; } /* A section opener carries more air than a content slide. It used to carry a tint as well, to mark the start of a section on a scrolling page; with one opener left in the deck that tint read as a single slide flickering a different colour, so the paper is now uniform throughout. */ .kind-section-open .slide-title { margin-bottom: 1rem; } .band-intro { max-width: var(--measure); color: var(--ink-muted); margin: 0 0 1rem; } /* The "How it works" opener lists the seven steps; each is a deep link to its own slide, which app.js turns into a flip and a no-script reader into a scroll. Base layer on purpose -- the list must read without scripting. */ .step-list { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; max-width: var(--measure); } .step-list li { counter-increment: step; display: flex; gap: .875rem; align-items: baseline; padding: .625rem 0; border-top: 1px solid var(--rule); } .step-list li:last-child { border-bottom: 1px solid var(--rule); } .step-list li::before { content: counter(step, decimal-leading-zero); font: 600 .75rem/1.4 var(--sans); letter-spacing: .1em; color: var(--accent); flex: 0 0 auto; } .step-list a { text-decoration-thickness: 1px; text-underline-offset: .15em; } .step-list-note { color: var(--ink-muted); font-size: .9375rem; } /* Two stills that belong side by side: a narrow index and the thing it points at. The index keeps its own width rather than taking half the column. */ .pair { display: grid; gap: 1.25rem; } @media (min-width: 40rem) { .pair { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: start; } } .pair img { max-height: 54vh; width: 100%; object-fit: contain; } /* A prose slide that carries one graphic: text and figure share the width instead of the figure sitting under a narrow reading column. */ .split { display: grid; gap: 2.5rem; } .glyph { margin: 0; align-self: center; } .glyph-svg { display: block; width: 100%; height: auto; } .glyph-eq { font: italic 400 96px/1 var(--serif); fill: var(--ink); } .glyph figcaption { font: .875rem/1.5 var(--sans); color: var(--ink-muted); margin-top: 1rem; max-width: 24rem; } /* A photograph used as a band, cropped rather than scaled: it sets a tone and is not something to study. */ .banner { margin: 2rem 0 0; } .banner img { display: block; width: 100%; height: auto; max-height: min(30vh, calc(100vh - 39rem)); object-fit: cover; object-position: center 38%; border-radius: 3px; } .banner figcaption { font: .75rem/1.5 var(--sans); color: var(--ink-muted); margin-top: .5rem; } /* ---------- the document viewer ---------- */ /* Opens over the deck so a reader can actually read a delivered list. The markup is a plain link to the image, so with no scripting the file just opens -- these rules only dress the version app.js takes over. */ .zoom { display: block; cursor: zoom-in; } .zoom-hint { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; } .viewer { position: fixed; inset: 0; z-index: 60; background: rgba(16, 18, 20, .93); } .viewer-scroll { position: absolute; inset: 0; display: grid; place-items: center; overflow: auto; padding: 3.5rem 1.5rem; } .viewer-img { max-width: 100%; max-height: 100%; background: #fff; cursor: zoom-in; border-radius: 2px; } .viewer.is-zoomed .viewer-img { max-width: none; max-height: none; cursor: grab; } .viewer.is-dragging .viewer-img { cursor: grabbing; } .viewer-close { position: absolute; top: 1rem; right: 1.25rem; z-index: 1; font: 600 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: .6rem 1rem; cursor: pointer; } .viewer-close:hover { background: rgba(255, 255, 255, .2); } .viewer-hint { position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0; text-align: center; font: .8125rem/1.4 var(--sans); color: rgba(255, 255, 255, .62); pointer-events: none; } /* The deck behind it must not scroll while the viewer is open. */ .viewer-open, .viewer-open body { overflow: hidden; } /* The company mark closes the deck: the same file the website serves in its header (logo-full-light.png), self-hosted here because the CSP admits no external origin. NOTE the SVGs in the website folder are an OLDER mark and are not what the site shows -- take the logo from the live header, not from whatever is lying beside it. */ .footer-logo { display: block; width: min(100%, 22rem); height: auto; margin: 0 0 1.5rem; } /* The closing slide is a sign-off, not a paragraph: centre it in deck mode, where it is the last thing on screen. */ .js-deck .kind-footer .wrap { text-align: center; } .js-deck .kind-footer .footer-logo { margin-inline: auto; } .js-deck .kind-footer .prose p { margin-inline: auto; } /* ---------- the agreement gate ---------- */ /* THE DECK IS HIDDEN BY CSS, NOT BY SCRIPT. Hiding it in JavaScript would leave the whole page readable to anyone with scripting off, which is the opposite of a gate. The cost is that with no scripting the page shows only the terms -- stated in the