@charset "utf-8"; /* ============================================================================ FANTASY ART — the imprint stylesheet ---------------------------------------------------------------------------- One publication, five plates. The shell is a warm press-black gallery; each plate keeps its own visual world and retints the shell's chrome through --accent / --accent-deep. Nothing here is fetched: system font stacks only, no webfonts, no remote images, no scripts required for legibility. Contract and class-name reference: site/DESIGN.md ========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS ------------------------------------------------------------------------ */ :root { color-scheme: dark; /* -- Ground and ink ----------------------------------------------------- */ --ground: #0F0E0D; /* the wall */ --ground-raised: #171613; /* hovered rows, nav panes */ --ground-sunk: #0A0908; /* frame wells, scrims */ --ink: #EFE8DA; /* primary text 15.8:1 on ground */ --ink-muted: #A9A296; /* secondary prose 7.7:1 on ground */ --ink-faint: #857F73; /* labels, meta 5.2:1 on ground */ --rule: #2B2823; /* hairline, visible */ --rule-faint: #1E1C19; /* hairline, structural */ --scrim: rgba(10, 9, 8, 0.74); /* -- Accent (overridden per plate; default is the imprint's own) --------- */ --accent: #C8894A; /* readable on ground — use for text/rules */ --accent-deep: #A9662F; /* graphic fills only — NOT for small text */ --accent-wash: rgba(200, 137, 74, 0.14); /* -- Type stacks (local only) ------------------------------------------- */ --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif; --sans: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* -- Modular scale (fluid; ratio ~1.22 at the small end, wider at top) --- */ --text-xs: clamp(0.700rem, 0.680rem + 0.10vw, 0.775rem); --text-sm: clamp(0.840rem, 0.810rem + 0.15vw, 0.940rem); --text-base: clamp(1.020rem, 0.980rem + 0.22vw, 1.155rem); --text-md: clamp(1.150rem, 1.080rem + 0.34vw, 1.380rem); --text-lg: clamp(1.380rem, 1.250rem + 0.62vw, 1.850rem); --text-xl: clamp(1.560rem, 1.380rem + 0.90vw, 2.400rem); --text-2xl: clamp(1.880rem, 1.520rem + 1.80vw, 3.500rem); --text-3xl: clamp(2.280rem, 1.700rem + 2.90vw, 5.600rem); /* -- Optical tracking --------------------------------------------------- */ --track-display: -0.028em; /* large grotesque, set tight */ --track-title: -0.016em; --track-label: 0.155em; /* small caps / mono labels, set open */ --track-meta: 0.085em; /* -- Spacing rhythm ----------------------------------------------------- */ --sp-1: 0.35rem; --sp-2: 0.60rem; --sp-3: 1.00rem; --sp-4: clamp(1.20rem, 1.00rem + 0.70vw, 1.75rem); --sp-5: clamp(1.80rem, 1.40rem + 1.40vw, 2.90rem); --sp-6: clamp(2.60rem, 1.90rem + 2.60vw, 4.60rem); --sp-7: clamp(3.60rem, 2.40rem + 4.40vw, 7.20rem); --sp-8: clamp(5.00rem, 3.00rem + 7.00vw, 10.0rem); /* -- Layout ------------------------------------------------------------- */ --gutter: clamp(1.15rem, 4vw, 3rem); --measure: 62ch; /* prose line length ceiling */ --rail: minmax(0, 4rem); --shell: 88rem; /* outer ceiling for the whole publication */ /* -- Motion ------------------------------------------------------------- */ --dur-fast: 140ms; --dur: 280ms; --dur-slow: 560ms; --ease: cubic-bezier(0.20, 0.70, 0.30, 1.00); --ease-inout: cubic-bezier(0.65, 0.00, 0.25, 1.00); } /* -- Per-plate retint. Set on ------------------------ */ [data-plate="value-terrain"] { --accent: #C8894A; --accent-deep: #A9662F; --accent-wash: rgba(200, 137, 74, 0.14); } [data-plate="draft-constellation"] { --accent: #EBC069; --accent-deep: #C08F35; --accent-wash: rgba(235, 192, 105, 0.13); } [data-plate="season-fingerprint"] { --accent: #7FA3D4; --accent-deep: #2F4E7E; --accent-wash: rgba(127, 163, 212, 0.14); } [data-plate="hivemind-tides"] { --accent: #E2704A; --accent-deep: #CF4A2A; --accent-wash: rgba(226, 112, 74, 0.14); } [data-plate="the-wire"] { /* #CE4B33 was the plate's spot vermilion, but it lands at 4.30:1 on --ground: below AA for text at label sizes, which is exactly where this token is used. Lifted to 4.74:1. The ink on the printed sheet is unchanged — this is the web page's text accent only. */ --accent: #D5543C; --accent-deep: #A8331F; --accent-wash: rgba(213, 84, 60, 0.15); } /* --------------------------------------------------------------------------- 2. RESET + BASE ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--serif); font-size: var(--text-base); line-height: 1.62; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.08; } p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } ::selection { background: var(--accent-deep); color: var(--ink); } /* -- Focus: one ring, always visible against any plate ground -------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; } .plate-entry__link:focus-visible, .lead-entry__link:focus-visible { outline-offset: 6px; } /* -- Skip link ------------------------------------------------------------- */ .skip-link { position: absolute; left: var(--gutter); top: 0; transform: translateY(-140%); z-index: 100; padding: 0.7rem 1.1rem; background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-meta); text-transform: uppercase; text-decoration: none; transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translateY(0.6rem); } /* --------------------------------------------------------------------------- 3. LAYOUT GRID --------------------------------------------------------------------------- A three-register breakout grid. Children default to the text column; opt out with .u-wide (figures, tables, nav) or .u-full (edge-to-edge plates). ------------------------------------------------------------------------ */ .grid { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [wide-start] var(--rail) [text-start] min(var(--measure), 100% - (var(--gutter) * 2)) [text-end] var(--rail) [wide-end] minmax(var(--gutter), 1fr) [full-end]; } .grid > * { grid-column: text; } .grid > .u-wide { grid-column: wide; } .grid > .u-full { grid-column: full; } /* The wide register opens up as the viewport does, so figures and catalogue rows get real width on a laptop while prose keeps its 62ch measure. */ @media (min-width: 64em) { :root { --rail: minmax(0, 13rem); } } @media (min-width: 80em) { :root { --rail: minmax(0, 18rem); } } @media (min-width: 96em) { :root { --rail: minmax(0, 22rem); } } .shell { max-width: var(--shell); margin-inline: auto; } /* --------------------------------------------------------------------------- 4. TYPE PRIMITIVES ------------------------------------------------------------------------ */ .label { font-family: var(--mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); line-height: 1.4; } .label--accent { color: var(--accent); } .mono { font-family: var(--mono); font-size: var(--text-sm); letter-spacing: var(--track-meta); font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums lining-nums; } .prose { max-width: var(--measure); color: var(--ink-muted); font-size: var(--text-base); line-height: 1.66; text-wrap: pretty; } .prose + .prose { margin-top: var(--sp-3); } .prose strong, .prose b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; } .prose em { font-style: italic; } .dropcap::first-letter { float: left; font-family: var(--serif); font-size: 3.44em; line-height: 0.82; padding: 0.06em 0.09em 0 0; color: var(--accent); } /* -- Rules ---------------------------------------------------------------- */ .rule { height: 1px; border: 0; background: var(--rule-faint); margin: 0; } .rule--strong { background: var(--rule); } .rule--accent { background: var(--accent-deep); } /* -- Section heading with trailing hairline -------------------------------- */ .section-label { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .section-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule-faint); } /* --------------------------------------------------------------------------- 5. MASTHEAD (front door) ------------------------------------------------------------------------ */ .masthead { padding-top: var(--sp-5); padding-bottom: var(--sp-5); } .masthead__kicker { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); } .masthead__title { font-family: var(--sans); font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--track-display); line-height: 0.90; text-transform: uppercase; margin-bottom: var(--sp-4); text-wrap: balance; } .masthead__title .thin { display: block; font-weight: 200; color: var(--ink-muted); } .masthead__lede { max-width: 46ch; font-size: var(--text-md); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; } .masthead__lede strong { color: var(--ink); font-weight: 400; } .masthead__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); } .masthead__meta b { color: var(--ink-muted); font-weight: 500; } /* -- The imprint mark: five bands, one per plate, in hanging order --------- Composition device carrying exactly one fact — that there are five plates, in this order, each with the accent used throughout its own page. */ .imprint-bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; height: 5px; margin-top: var(--sp-5); } .imprint-bands span { background: var(--b, var(--rule)); } /* --------------------------------------------------------------------------- 6. PLATE INDEX — lead entry + catalogue rows ------------------------------------------------------------------------ */ .plate-index { display: grid; gap: var(--sp-7); } /* -- Shared bits ----------------------------------------------------------- */ .entry-num { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); } .entry-title { font-family: var(--sans); font-weight: 600; letter-spacing: var(--track-title); line-height: 1.02; text-wrap: balance; transition: color var(--dur) var(--ease); } .entry-thesis { color: var(--ink-muted); text-wrap: pretty; } .entry-craft { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); } /* Figure frame shared by both entry kinds */ .entry-figure { position: relative; overflow: hidden; background: var(--ground-sunk); border: 1px solid var(--rule-faint); aspect-ratio: 3 / 2; } .entry-figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .entry-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--accent-wash), transparent 55%); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; } /* -- The headline number --------------------------------------------------- Stacked, never inline: the label is a full clause and reads badly as a four-line mono column beside a numeral. Number in accent, label beneath in sentence case at body-adjacent size. */ .stat { display: block; } .stat__num { display: block; font-family: var(--sans); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums lining-nums; color: var(--accent); line-height: 1.05; margin-bottom: var(--sp-1); } .stat__label { display: block; font-family: var(--sans); font-size: var(--text-sm); letter-spacing: 0; color: var(--ink-faint); max-width: 42ch; line-height: 1.45; text-wrap: pretty; } /* -- Lead entry (plate I) -------------------------------------------------- */ .lead-entry { position: relative; } .lead-entry .entry-figure { aspect-ratio: 3 / 2; } .lead-entry__body { padding-top: var(--sp-4); } .lead-entry .entry-num { display: block; margin-bottom: var(--sp-2); } .lead-entry .entry-title { font-size: var(--text-2xl); margin-bottom: var(--sp-3); } .lead-entry .entry-thesis { font-size: var(--text-md); max-width: 54ch; margin-bottom: var(--sp-4); } .lead-entry .entry-craft { margin-top: var(--sp-4); } .lead-entry__link { text-decoration: none; } .lead-entry__link::after { content: ""; position: absolute; inset: 0; z-index: 2; } @media (min-width: 64em) { .lead-entry .entry-figure { aspect-ratio: 2 / 1; } .lead-entry__body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); align-items: start; padding-top: var(--sp-5); } .lead-entry .entry-thesis { margin-bottom: 0; } } /* -- Catalogue rows (plates II–V) ------------------------------------------ */ .plate-catalogue { display: grid; gap: var(--sp-6); } .plate-entry { position: relative; display: grid; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--rule-faint); } .plate-entry:first-child { border-top: 0; padding-top: 0; } .plate-entry .entry-title { font-size: var(--text-xl); margin-bottom: var(--sp-2); } .plate-entry .entry-num { display: block; margin-bottom: var(--sp-2); } .plate-entry .entry-thesis { margin-bottom: var(--sp-4); } .plate-entry__link { text-decoration: none; } .plate-entry__link::after { content: ""; position: absolute; inset: 0; z-index: 2; } .plate-entry__body > .stat { margin-bottom: var(--sp-3); } @media (min-width: 48em) { .plate-entry { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: center; } } @media (min-width: 64em) { .plate-entry { gap: var(--sp-6); align-items: center; } } /* -- Entry interaction: one hover state, shared --------------------------- */ @media (hover: hover) { .lead-entry:hover .entry-figure img, .plate-entry:hover .entry-figure img { transform: scale(1.028); } .lead-entry:hover .entry-figure::after, .plate-entry:hover .entry-figure::after { opacity: 1; } .lead-entry:hover .entry-title, .plate-entry:hover .entry-title { color: var(--accent); } } .lead-entry:focus-within .entry-title, .plate-entry:focus-within .entry-title { color: var(--accent); } /* --------------------------------------------------------------------------- 7. PAGE HEADER (plate pages) ------------------------------------------------------------------------ */ .page-header { padding-top: var(--sp-6); padding-bottom: var(--sp-5); } .page-header__eyebrow { margin-bottom: var(--sp-4); } /* The masthead word is the only way back up from inside a plate other than the footer nav, so it has to read as a link. A hairline under it on hover/focus, never a default underline — the eyebrow is set in open-tracked mono and a permanent rule would fight the letterspacing. */ .page-header__home { position: relative; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* The word is set at label size, so its box is only ~15px tall — too small to hit with a thumb. Grow the target with a pseudo-element instead of padding, so the underline stays welded to the baseline. */ .page-header__home::before { content: ""; position: absolute; inset: -0.65rem -0.4rem; } .page-header__home:hover, .page-header__home:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } .page-header__title { font-family: var(--sans); font-weight: 700; font-size: var(--text-2xl); letter-spacing: var(--track-display); line-height: 0.94; text-transform: uppercase; margin-bottom: var(--sp-4); text-wrap: balance; /* The titles used to be set with non-breaking spaces to hold them on one line. At 320px "SEASON FINGERPRINT" then measured 322px inside a 283px column and pushed the whole document sideways by 21px. They are plain spaces now: balance keeps the rag decent, and a two-line title on a small phone is the right outcome. break-word is the backstop for a title with no space in it at all. */ overflow-wrap: break-word; } .page-header__standfirst { max-width: 52ch; font-size: var(--text-md); line-height: 1.52; color: var(--ink-muted); text-wrap: pretty; } .page-header__standfirst strong { color: var(--ink); font-weight: 400; } .page-header__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--rule-faint); } /* --------------------------------------------------------------------------- 8. PLATE FIGURE — the frame that carries the artwork --------------------------------------------------------------------------- The sheet is never reflowed and never cropped to fake a fit. It is shown whole, scaled to the column, with its true aspect held by --plate-ratio. The focal box is a loupe: it dims everything outside the region a given .detail is talking about. See DESIGN.md §"The plate-and-detail rule". ------------------------------------------------------------------------ */ .plate-figure { margin: var(--sp-5) 0 var(--sp-6); } .plate-figure__frame { position: relative; aspect-ratio: var(--plate-ratio, 1600 / 2000); background: var(--plate-bg, var(--ground-sunk)); border: 1px solid var(--rule); overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -18px rgba(0, 0, 0, 0.8); } .plate-figure__img { width: 100%; height: 100%; object-fit: contain; } /* The loupe. JS sets --fx/--fy/--fw/--fh (0–1 of the frame) from the active .detail; the huge spread shadow dims everything outside the box. */ .plate-figure__focal { position: absolute; left: calc(var(--fx, 0.1) * 100%); top: calc(var(--fy, 0.1) * 100%); width: calc(var(--fw, 0.8) * 100%); height: calc(var(--fh, 0.2) * 100%); outline: 1px solid var(--accent); box-shadow: 0 0 0 100vmax var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), left var(--dur-slow) var(--ease-inout), top var(--dur-slow) var(--ease-inout), width var(--dur-slow) var(--ease-inout), height var(--dur-slow) var(--ease-inout); } .plate-figure.is-focused .plate-figure__focal { opacity: 1; } /* Survey ticks on the loupe corners */ .plate-figure__focal::before, .plate-figure__focal::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--accent); } .plate-figure__focal::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; } .plate-figure__focal::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; } .plate-figure__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--rule-faint); } /* Sticky behaviour on wide screens: the plate holds while details scroll. */ @media (min-width: 64em) { .plate-spread { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; } .plate-spread .plate-figure { position: sticky; top: var(--sp-4); margin-top: 0; } } /* -- Open-the-full-plate affordance --------------------------------------- */ .plate-open { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.62em 1em; border: 1px solid var(--rule); background: var(--ground-raised); color: var(--ink-muted); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-meta); text-transform: uppercase; text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .plate-open:hover { color: var(--ink); border-color: var(--accent); background: var(--ground); } .plate-open span[aria-hidden] { color: var(--accent); } /* --------------------------------------------------------------------------- 9. DETAILS — the annotation layer, re-set as real HTML --------------------------------------------------------------------------- On a phone these ARE the plate's annotations. Never below var(--text-base). ------------------------------------------------------------------------ */ .detail-list { display: grid; } .detail { padding: var(--sp-4) 0; border-top: 1px solid var(--rule-faint); transition: border-color var(--dur) var(--ease); } .detail.is-active { border-top-color: var(--accent-deep); } .detail__key { margin-bottom: var(--sp-2); color: var(--accent); } .detail__num { display: block; font-family: var(--sans); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); line-height: 1.05; margin-bottom: var(--sp-2); } .detail__body { color: var(--ink-muted); font-size: var(--text-base); line-height: 1.62; max-width: var(--measure); text-wrap: pretty; } .detail__body strong { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 10. CAPTION / FOOTNOTE / PROVENANCE ------------------------------------------------------------------------ */ .caption { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-faint); max-width: 58ch; } .caption strong { color: var(--ink-muted); font-weight: 400; } .footnotes { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); } .footnote { position: relative; padding-left: var(--sp-4); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-faint); max-width: 64ch; } .footnote::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--accent-deep); } .footnote strong { color: var(--ink-muted); font-weight: 400; } /* -- Data provenance block ------------------------------------------------- */ .provenance { padding: var(--sp-5) 0 var(--sp-6); border-top: 1px solid var(--rule); } .provenance__grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); } @media (min-width: 56em) { .provenance__grid { grid-template-columns: 1.15fr 1fr 1fr; gap: var(--sp-6); } } .provenance__head { margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule-faint); color: var(--ink-muted); } .provenance__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: 0.44em 0; border-bottom: 1px dotted var(--rule); font-size: var(--text-sm); color: var(--ink-muted); } .provenance__row:last-child { border-bottom: 0; } .provenance__when { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-meta); color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; } .provenance__note { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); } .provenance__note strong { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; } .rails { display: grid; gap: var(--sp-2); } .rails li { position: relative; padding-left: var(--sp-4); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); } .rails li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--accent-deep); } .colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) 0 var(--sp-7); border-top: 1px solid var(--rule-faint); } .colophon b { color: var(--accent); font-weight: 500; } /* --------------------------------------------------------------------------- 11. PLATE NAV (prev / next) ------------------------------------------------------------------------ */ .plate-nav { display: grid; gap: 1px; background: var(--rule-faint); border-block: 1px solid var(--rule-faint); margin-top: var(--sp-6); } @media (min-width: 44em) { .plate-nav { grid-template-columns: 1fr 1fr; } } .plate-nav a { display: block; padding: var(--sp-4); background: var(--ground); text-decoration: none; transition: background var(--dur) var(--ease); } .plate-nav a:hover { background: var(--ground-raised); } .plate-nav__dir { display: block; margin-bottom: var(--sp-2); } .plate-nav__title { font-family: var(--sans); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--track-title); line-height: 1.1; transition: color var(--dur) var(--ease); } .plate-nav a:hover .plate-nav__title, .plate-nav a:focus-visible .plate-nav__title { color: var(--accent); } .plate-nav__next { text-align: right; } .plate-nav__next .plate-nav__dir { color: var(--accent); } /* --------------------------------------------------------------------------- 12. SCROLL HINT ------------------------------------------------------------------------ */ .scroll-hint { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); color: var(--ink-faint); } .scroll-hint__line { display: block; width: 42px; height: 1px; background: linear-gradient(to right, var(--accent), transparent); transform-origin: left center; animation: hint-sweep 2.6s var(--ease-inout) infinite; } @keyframes hint-sweep { 0%, 100% { transform: scaleX(0.4); opacity: 0.45; } 50% { transform: scaleX(1); opacity: 1; } } /* --------------------------------------------------------------------------- 13. MOTION — reveal on scroll (enhancement only) --------------------------------------------------------------------------- Base state is VISIBLE. The hidden state only applies once the inline head script has set .js on , so a no-JS reader loses nothing. ------------------------------------------------------------------------ */ .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } /* --------------------------------------------------------------------------- 14. REDUCED MOTION --------------------------------------------------------------------------- Motion is never load-bearing. Everything that moved still changes state — it just changes instantly. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } .entry-figure img { transform: none !important; } .scroll-hint__line { animation: none; transform: none; opacity: 0.8; } } /* --------------------------------------------------------------------------- 15. UTILITIES ------------------------------------------------------------------------ */ .u-measure { max-width: var(--measure); } .u-center { margin-inline: auto; } .u-mt-4 { margin-top: var(--sp-4); } .u-mt-5 { margin-top: var(--sp-5); } .u-mt-6 { margin-top: var(--sp-6); } .u-mb-4 { margin-bottom: var(--sp-4); } .u-mb-5 { margin-bottom: var(--sp-5); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 16. PRINT ------------------------------------------------------------------------ */ @media print { :root { --ground: #fff; --ink: #111; --ink-muted: #333; --ink-faint: #555; --rule: #bbb; --rule-faint: #ddd; } body { background: #fff; color: #111; } .plate-figure__focal, .scroll-hint, .plate-nav, .plate-open { display: none; } .plate-figure__frame { box-shadow: none; border-color: #bbb; } .js .reveal { opacity: 1; transform: none; } a { text-decoration: none; } }