/* Theme Name: FS Theme Description: Graphite Loop v2 for fredericseraphine.com (block theme; EN/FR/JA via fs-i18n). Version: 0.4.0 Requires at least: 6.5 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: fs-theme */ /* ---------- 0. Tokens ---------- */ :root { color-scheme: light dark; --c-paper: var(--wp--preset--color--paper); --c-paper-2: var(--wp--preset--color--paper-2); --c-surface: var(--wp--preset--color--surface); --c-ink: var(--wp--preset--color--ink); --c-ink-2: var(--wp--preset--color--ink-2); --c-muted: var(--wp--preset--color--muted); --c-accent: var(--wp--preset--color--accent); --c-accent-strong: var(--wp--preset--color--accent-strong); --c-on-accent: var(--wp--preset--color--on-accent); --c-loop: var(--wp--preset--color--loop); --c-border: var(--wp--preset--color--border); --c-hairline: var(--wp--preset--color--hairline); --c-focus: var(--wp--preset--color--focus); --c-mark: var(--wp--preset--color--mark); --c-night: var(--wp--preset--color--night); --c-on-night: var(--wp--preset--color--on-night); --c-on-night-2: var(--wp--preset--color--on-night-2); --c-night-accent: var(--wp--preset--color--night-accent); --c-field: var(--wp--preset--color--field); --c-on-field: var(--wp--preset--color--on-field); --c-ok: var(--wp--preset--color--ok); --c-error: var(--wp--preset--color--error); --c-header: var(--c-paper); --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-text: var(--wp--preset--font-family--text); --font-ui: var(--wp--preset--font-family--ui); --font-mono: var(--wp--preset--font-family--mono); --font-ja: var(--wp--preset--font-family--ja); --font-ja-serif: var(--wp--preset--font-family--ja-serif); --font-display: var(--font-ui); --font-title: var(--font-ui); --font-hand: var(--font-ui); --display-weight: 600; --display-track: -0.025em; --display-lh: 0.96; --display-stretch: 100%; --title-weight: 600; --title-track: -0.005em; --year-weight: 600; --year-stretch: 100%; --em-style: italic; --em-color: var(--c-accent); --label-font: var(--font-ui); --label-case: none; --label-track: 0; --label-weight: 600; --label-size: var(--step--1); --step--2: var(--wp--preset--font-size--step-m-2); --step--1: var(--wp--preset--font-size--step-m-1); --step-0: var(--wp--preset--font-size--step-0); --step-1: var(--wp--preset--font-size--step-1); --step-2: var(--wp--preset--font-size--step-2); --step-3: var(--wp--preset--font-size--step-3); --step-4: var(--wp--preset--font-size--step-4); --step-5: var(--wp--preset--font-size--step-5); --lh-body: 1.6; --s-1: var(--wp--preset--spacing--1); --s-2: var(--wp--preset--spacing--2); --s-3: var(--wp--preset--spacing--3); --s-4: var(--wp--preset--spacing--4); --s-5: var(--wp--preset--spacing--5); --s-6: var(--wp--preset--spacing--6); --s-7: var(--wp--preset--spacing--7); --s-8: var(--wp--preset--spacing--8); --s-9: var(--wp--preset--spacing--9); --s-10: var(--wp--preset--spacing--10); --section-y: clamp(4rem, 2.5rem + 6vw, 9rem); --wrap: 76rem; --wrap-wide: 90rem; --measure: 64ch; --gutter: clamp(1.25rem, 4vw, 3.5rem); --header-h: 4.5rem; --r: 2px; --dur: 180ms; --dur-slow: 500ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --m-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E"); --m-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E"); --m-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5 L20 12 L7 19.5 Z' fill='%23000'/%3E%3C/svg%3E"); --m-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5h10v10M19 5 5 19' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); --pad-wrap: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter))); } @supports (color: color-mix(in srgb, red 50%, blue)) { :root { --c-header: color-mix(in srgb, var(--c-paper) 88%, transparent); } } @media (prefers-color-scheme: dark) { html:root { --wp--preset--color--paper: #0E0E0E; --wp--preset--color--paper-2: #171717; --wp--preset--color--surface: #1A1A1A; --wp--preset--color--ink: #ECE8DF; --wp--preset--color--ink-2: #CBC6BC; --wp--preset--color--muted: #A39E94; --wp--preset--color--accent: #F08A6E; --wp--preset--color--accent-strong: #F6AA94; --wp--preset--color--on-accent: #121211; --wp--preset--color--loop: #7CC8BD; --wp--preset--color--border: #85817A; --wp--preset--color--hairline: rgba(236, 232, 223, 0.16); --wp--preset--color--focus: #8AB6FF; --wp--preset--color--mark: #4A3F26; --wp--preset--color--night: #000000; --wp--preset--color--field: #8E2415; --wp--preset--color--on-field: #F7EDE6; --wp--preset--color--ok: #7FD1A6; --wp--preset--color--error: #FF9C8F; } } @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; --dur-slow: 0s; } *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; } } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--c-paper); color: var(--c-ink); font: 400 var(--step-0)/1.6 var(--font-text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } body { font-synthesis: none; } img, svg, video { display: block; max-width: 100%; height: auto; } /* owner rule: intrinsic ratio; every has width/height */ h1, h2, h3, h4 { margin: 0 0 var(--s-4); text-wrap: balance; } h1, h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); line-height: var(--display-lh); letter-spacing: var(--display-track); } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h1 em, h2 em { font-style: var(--em-style); color: var(--em-color); } h3 { font: 600 var(--step-0)/1.3 var(--font-ui); } p, li, dd, figcaption, blockquote { text-wrap: pretty; } strong, b { font-family: var(--font-ui); font-weight: 600; } em, i, cite { font-family: var(--font-ui); } p { margin: 0 0 var(--s-4); } /* links: ink text, vermilion underline (v1: red text + thin underline = the 1998 hyperlink) */ a { color: var(--c-ink); text-decoration-line: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; transition: color var(--dur) var(--ease), text-decoration-thickness var(--dur) var(--ease); } a:hover { color: var(--c-accent); text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; } ::selection { background: var(--c-mark); color: var(--c-ink); } blockquote { margin: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--wrap-wide); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--s-4); top: -4rem; z-index: 100; padding: var(--s-3) var(--s-4); background: var(--c-ink); color: var(--c-paper); } .skip-link:focus { top: var(--s-3); } .placeholder { background: #F1DDB0; color: #141414 !important; padding: 0 0.3em; font: 500 0.82em/1.5 ui-monospace, Consolas, monospace; font-style: normal; letter-spacing: 0; text-transform: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .data { font: 500 var(--step--1)/1.5 var(--font-mono); color: var(--c-muted); } .small { font-size: var(--step--1); color: var(--c-muted); } .hand { display: block; width: auto; mix-blend-mode: multiply; } @media (prefers-color-scheme: dark) { .hand { filter: invert(1); mix-blend-mode: screen; } } .go { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font: var(--label-weight) var(--label-size)/1.2 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; } .go::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--m-arrow) center / contain no-repeat; mask: var(--m-arrow) center / contain no-repeat; transition: translate var(--dur) var(--ease); flex: none; } .go:hover { color: var(--c-accent); } .go:hover::after { translate: 3px 0; } .go--down::after { -webkit-mask-image: var(--m-down); mask-image: var(--m-down); } .go--ext::after { -webkit-mask-image: var(--m-ext); mask-image: var(--m-ext); width: 0.85em; height: 0.85em; } .go-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; padding: 0; list-style: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0 1.4em; border: 1px solid var(--c-ink); border-radius: var(--r); background: var(--c-ink); color: var(--c-paper); font: 600 var(--step--1)/1.1 var(--font-ui); text-decoration: none; cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .btn--line { background: transparent; color: var(--c-ink); border-color: var(--c-border); } .btn--line:hover { background: transparent; color: var(--c-ink); border-color: var(--c-ink); } .btn .tri { width: 0.95em; height: 0.95em; background: currentColor; -webkit-mask: var(--m-play) center / contain no-repeat; mask: var(--m-play) center / contain no-repeat; } /* ---------- 3. Language (Japanese stays on system fonts) ---------- */ :lang(ja) { font-family: var(--font-ja); line-height: 1.8; line-break: strict; word-break: normal; overflow-wrap: anywhere; letter-spacing: 0; } :lang(ja) :is(h1, h2) { font-family: var(--font-ja-serif); font-weight: 600; font-style: normal; font-stretch: 100%; letter-spacing: 0.02em; line-height: 1.45; } :lang(ja) h1 { font-size: calc(var(--step-4) * 0.6); } :lang(ja) :is(strong, b, em, i, cite) { font-family: var(--font-ja); font-weight: 600; } :lang(ja) :is(em, i, cite) { font-style: normal; text-emphasis: filled sesame; } :lang(ja) .prose { max-width: 40em; font-family: var(--font-ja); } :lang(fr) { hyphens: auto; } :lang(fr) :is(h1, h2, h3) { hyphens: manual; } q:lang(fr) { quotes: "\00AB\202F" "\202F\00BB" "\201C" "\201D"; } q:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; } /* ---------- 4. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--c-header); border-bottom: 1px solid var(--c-hairline); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .site-header { animation: header-rule linear both; animation-timeline: scroll(root); animation-range: 0 120px; } @keyframes header-rule { from { border-bottom-color: transparent; } to { border-bottom-color: var(--c-hairline); } } } } .header-inner { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; } .menu-btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2); border: 0; background: none; color: var(--c-ink); font: 600 var(--step--1)/1 var(--font-ui); cursor: pointer; } .menu-btn__icon { width: 20px; height: 9px; border-block: 2px solid currentColor; } .site-nav { margin: 0; padding: 0; border: 0; background: transparent; color: var(--c-ink); } .site-nav[popover] { inset: var(--header-h) 0 auto 0; width: 100%; max-width: none; padding: var(--s-4) var(--gutter) var(--s-6); background: var(--c-paper); border-bottom: 1px solid var(--c-hairline); } .site-nav[popover]::backdrop { background: rgba(10, 10, 10, 0.3); } .nav { list-style: none; margin: 0; padding: 0; } .nav a { display: flex; align-items: center; min-height: 56px; color: var(--c-ink); text-decoration: none; font: var(--display-weight) var(--step-2)/1.1 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); border-bottom: 1px solid var(--c-hairline); } .nav a:hover, .nav a[aria-current="page"] { color: var(--c-accent); } .lang { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-1); font-size: var(--step--1); } .lang a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--s-2); color: var(--c-ink-2); text-decoration: none; font-weight: 500; } .lang a:hover { color: var(--c-ink); text-decoration: underline; } .lang a[aria-current="true"] { color: var(--c-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; } .site-nav .lang { margin-top: var(--s-4); } .header-lang { display: none; } @media (min-width: 64em) { .menu-btn { display: none; } .site-nav[popover] { display: block; position: static; inset: auto; width: auto; padding: 0; border: 0; background: transparent; overflow: visible; } .site-nav .lang { display: none; } .nav { display: flex; gap: var(--s-5); } .nav a { min-height: 44px; border: 0; font: 500 var(--step--1)/1 var(--font-ui); letter-spacing: 0; font-stretch: 100%; } .nav a[aria-current="page"] { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.5em; } .header-lang { display: flex; margin-left: var(--s-3); } } /* ---------- 6. STUDIO: short path (home) ---------- */ .path { padding-block: var(--section-y) calc(var(--section-y) * 0.6); } .path__title { font-size: var(--step-3); max-width: 16ch; margin-bottom: var(--s-7); } @property --rl-l { syntax: ""; inherits: false; initial-value: 0px; } @property --rl-r { syntax: ""; inherits: false; initial-value: 0px; } .ruler { --stop-min: 7.25rem; --stop-gap: var(--s-4); list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-5); border-top: 2px solid var(--c-ink); } .ruler li { display: grid; grid-column: 1 / -1; grid-template-columns: 6.5rem minmax(0, 1fr); row-gap: 2px; align-items: baseline; padding-block: var(--s-4); border-bottom: 1px solid var(--c-hairline); } @supports (grid-template-columns: subgrid) { .ruler li { grid-template-columns: subgrid; } } .ruler .y { grid-column: 1; grid-row: 1 / span 2; white-space: nowrap; hyphens: none; font: var(--year-weight) var(--step-1)/1.1 var(--font-hand); font-stretch: var(--year-stretch); letter-spacing: var(--display-track); font-variant-numeric: lining-nums tabular-nums; color: var(--c-accent); } .ruler b { grid-column: 2; font: var(--title-weight) var(--step-0)/1.25 var(--font-title); letter-spacing: var(--title-track); } .ruler li > span:last-child:not(.y) { grid-column: 2; font: 400 var(--step--1)/1.45 var(--font-ui); color: var(--c-ink-2); } @media (min-width: 40em) { .ruler { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: var(--stop-gap); border-top: 0; padding: 6px 0 var(--s-4); overflow: auto hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--rl-l), #000 calc(100% - var(--rl-r)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--rl-l), #000 calc(100% - var(--rl-r)), transparent); } .ruler:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; -webkit-mask-image: none; mask-image: none; } .ruler li { position: relative; display: block; grid-column: auto; padding: var(--s-5) 0 0; border-bottom: 0; scroll-snap-align: start; } .ruler li::after { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * var(--stop-gap)); height: 2px; background: var(--c-ink); } .ruler li:last-child::after { right: 0; } .ruler li::before { content: ""; position: absolute; z-index: 1; top: -5px; left: 0; width: 12px; height: 12px; background: var(--c-accent); } .ruler .y { display: block; min-width: var(--stop-min); margin-bottom: var(--s-3); font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1; } .ruler b { display: block; margin-bottom: var(--s-1); font-size: clamp(1rem, 0.85rem + 0.35vw, 1.25rem); line-height: 1.2; text-wrap: balance; } .ruler li > span:last-child:not(.y) { display: block; } @supports (animation-timeline: scroll()) { .ruler { animation: ruler-edges linear both; animation-timeline: scroll(self inline); } } } @keyframes ruler-edges { 0% { --rl-l: 0px; --rl-r: 4rem; } 6%, 94% { --rl-l: 4rem; --rl-r: 4rem; } 100% { --rl-l: 4rem; --rl-r: 0px; } } /* ---------- 7. STUDIO: full trail (About) ---------- */ .trail { padding-block: var(--s-7) var(--section-y); } .trail__head { display: grid; gap: var(--s-5); margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); } .trail__head :is(h1, h2) { margin: 0; max-width: 14ch; font-size: var(--step-4); } .trail__head blockquote { font: var(--title-weight) var(--step-1)/1.45 var(--font-title); letter-spacing: var(--title-track); color: var(--c-ink-2); max-width: 36ch; } .trail__head cite { display: block; margin-top: var(--s-2); font: 500 var(--step--1)/1.4 var(--font-ui); color: var(--c-muted); font-style: normal; } @media (min-width: 64em) { .trail__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-8); } } .stops { list-style: none; margin: 0; padding: 0; } .stop { display: grid; gap: var(--s-2) var(--s-6); padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-top: 1px solid var(--c-hairline); } .stop:last-child { border-bottom: 1px solid var(--c-hairline); } .stop__when { font: var(--year-weight) var(--step-2)/1 var(--font-hand); font-stretch: var(--year-stretch); letter-spacing: var(--display-track); font-variant-numeric: lining-nums tabular-nums; } .stop__what :is(h2, h3) { margin: 0 0 var(--s-1); font: 600 var(--step-0)/1.3 var(--font-ui); letter-spacing: 0; font-stretch: 100%; } .stop__what p { margin: 0; font-size: var(--step--1); color: var(--c-ink-2); max-width: 36ch; } .stop__said { font: var(--title-weight) var(--step-1)/1.4 var(--font-title); letter-spacing: var(--title-track); max-width: 32ch; } .stop__said p { margin: 0; } .stop__said p::before { content: "\201C"; margin-left: -0.45em; color: var(--c-accent); } .stop__said p::after { content: "\201D"; color: var(--c-accent); } .stop__said.is-fact p::before, .stop__said.is-fact p::after { content: none; } .stop__art { margin: var(--s-4) 0 0; width: var(--w-m, 80%); } .stop__art img { width: 100%; height: auto; } .stop__art figcaption { margin-top: var(--s-2); font-size: var(--step--2); color: var(--c-muted); } .stop--key .stop__when { font-size: var(--step-4); } .stop--key .stop__said { font-size: var(--step-2); line-height: 1.22; max-width: 26ch; } .stop--brief { padding-block: var(--s-4); } .stop--brief .stop__when { font-size: var(--step-1); } .stop--brief .stop__said { font-size: var(--step-0); } .stop--now .stop__when { color: var(--c-accent); } .stop--now .stop__said { font: var(--display-weight) var(--step-3)/1.08 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); max-width: 26ch; } @media (min-width: 48em) { .stop { grid-template-columns: 8.5rem minmax(0, 1fr); } .stop > :not(.stop__when) { grid-column: 2; } .stop--key .stop__when { grid-row: 1 / span 3; } } @media (min-width: 64em) { .stop { grid-template-columns: 11rem minmax(0, 15rem) minmax(0, 27rem) minmax(0, 1fr); column-gap: var(--s-7); align-items: start; } .stop > .stop__when { grid-column: 1; grid-row: 1 / span 2; } .stop > .stop__what { grid-column: 2; } .stop > .stop__said { grid-column: 3; grid-row: 1; } .stop > .stop__art { grid-column: 4; grid-row: 1 / span 2; margin: 0; width: var(--w, 100%); justify-self: var(--js, start); } .stop--key > .stop__said { grid-column: 3 / 5; } .stop--now > .stop__said { grid-column: 2 / 5; } } /* ---------- 8. STUDIO: Listen ---------- */ .listen { background: var(--c-night); color: var(--c-on-night); padding-block: var(--section-y); } .listen a:not(.btn) { color: var(--c-on-night); } .listen-grid { display: grid; gap: var(--s-7); align-items: center; } @media (min-width: 64em) { .listen-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-9); } } .listen__art img, .music-grid figure img { width: 100%; height: auto; } .listen__art figcaption { margin-top: var(--s-2); font-size: var(--step--2); color: var(--c-on-night-2); } .listen h2 { color: var(--c-on-night); font-size: var(--step-5); line-height: 0.9; margin: 0 0 var(--s-5); } .listen .kind { margin: 0 0 var(--s-3); font: var(--label-weight) var(--label-size)/1.4 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--c-on-night-2); } .player { display: grid; gap: var(--s-2); margin: 0 0 var(--s-7); } .player .btn, .tracks .btn:hover { background: var(--c-night-accent); border-color: var(--c-night-accent); color: #121211; } .player .btn { justify-self: start; } .player .btn:hover { background: #F6AA94; border-color: #F6AA94; } .player__note { margin: 0; font-size: var(--step--2); color: var(--c-on-night-2); } .more-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(238, 234, 226, 0.2); } .more-tracks li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid rgba(238, 234, 226, 0.2); font-size: var(--step--1); } .more-tracks li > span:last-child { color: var(--c-on-night-2); } .listen--compact { padding-block: calc(var(--section-y) * 0.7); } .listen-row { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); } .listen-row .player { margin: 0; } @media (min-width: 64em) { .listen-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .listen--compact .more-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); } } /* ---------- 10. STUDIO: Home B, the wall + the catalogue ---------- */ .wall-head { display: grid; gap: var(--s-5); padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--s-7); } .wall-head h1 { margin: 0; max-width: 19ch; } .wall-head .roles { margin: 0; } @media (min-width: 64em) { .wall-head { grid-template-columns: minmax(0, 8fr) minmax(0, 3.5fr); align-items: end; column-gap: var(--s-8); } .wall-head .roles { grid-template-columns: 1fr; } } .wall-sec { background: var(--c-paper-2); padding-block: var(--s-8) var(--s-6); } .wall { --h: clamp(7rem, 3rem + 13vw, 15rem); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.25rem, 0.5rem + 2.5vw, 3.5rem) clamp(1rem, 0.5rem + 2vw, 3rem); margin: 0 0 var(--s-5); padding: 0 var(--gutter); list-style: none; } .wall figure { margin: 0; } .wall a { display: block; text-decoration: none; } .wall img { height: calc(var(--h) * var(--k, 1)); width: auto; max-width: none; } .wall figcaption { margin-top: var(--s-2); max-width: 24ch; font: var(--label-weight) var(--step--2)/1.35 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--c-muted); } .catalogue { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .catalogue caption { text-align: left; font: var(--display-weight) var(--step-3)/1 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); padding-bottom: var(--s-5); } .catalogue th, .catalogue td { padding: var(--s-3) var(--s-4) var(--s-3) 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--c-hairline); } .catalogue thead th { font: var(--label-weight) var(--step--2)/1.3 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--c-muted); border-bottom: 2px solid var(--c-ink); } .catalogue td:first-child { font-family: var(--font-mono); color: var(--c-muted); white-space: nowrap; } .catalogue td.w { font: var(--title-weight) var(--step-1)/1.25 var(--font-title); letter-spacing: var(--title-track); } .catalogue td.w a { text-decoration: none; } .catalogue td.w a:hover { color: var(--c-accent); text-decoration: underline; } @media (max-width: 47.99em) { .catalogue thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .catalogue tr { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); padding-block: var(--s-3); border-bottom: 1px solid var(--c-hairline); } .catalogue td { border: 0; padding: 0 0 2px; } .catalogue td:first-child { grid-row: 1 / span 2; } .catalogue td:last-child { grid-column: 2; color: var(--c-muted); } } /* ---------- 11. Index lists, closing, footer ---------- */ .index-sec { padding-block: var(--section-y); border-top: 2px solid var(--c-ink); } .index-cols { display: grid; gap: var(--s-8); } @media (min-width: 64em) { .index-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-9); } } .index-cols h2 { font-size: var(--step-3); margin: 0 0 var(--s-5); } .list { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 1px solid var(--c-hairline); } .list li { position: relative; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--c-hairline); } .list .y { font: 500 var(--step--1)/1.7 var(--font-mono); color: var(--c-muted); } .list a { text-decoration: none; font: var(--title-weight) var(--step-1)/1.25 var(--font-title); letter-spacing: var(--title-track); } .list a::after { content: ""; position: absolute; inset: 0; } .list li:hover a { color: var(--c-accent); } .list .k { display: block; margin-top: 2px; font-size: var(--step--1); color: var(--c-muted); } .oa { color: var(--c-loop); font-weight: 600; } .closing { padding-block: var(--section-y) var(--s-8); background: var(--c-field); color: var(--c-on-field); } .closing p.big { font: var(--display-weight) var(--step-3)/1.05 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); max-width: 24ch; margin-bottom: var(--s-6); } .closing .go, .closing a { color: var(--c-on-field); text-decoration-color: currentColor; } .site-footer { padding-block: var(--s-7); border-top: 1px solid var(--c-hairline); font-size: var(--step--1); color: var(--c-ink-2); } .footer-grid { display: grid; gap: var(--s-6); } @media (min-width: 48em) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } } .site-footer h2 { font: 600 var(--step--1)/1.3 var(--font-ui); letter-spacing: 0; font-stretch: 100%; color: var(--c-ink); margin: 0 0 var(--s-2); } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--c-ink-2); text-decoration: none; } .site-footer li a:hover { color: var(--c-accent); text-decoration: underline; } .fineprint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--c-hairline); color: var(--c-muted); } .fineprint a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; } /* ---------- 12. READING register ---------- */ .crumbs { font-size: var(--step--1); padding-top: var(--s-5); } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; } .crumbs li + li::before { content: "/" / ""; color: var(--c-border); margin-inline: var(--s-2); } .crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink-2); } .crumbs [aria-current] { color: var(--c-muted); } .page-head { padding-block: var(--s-6) clamp(2.5rem, 2rem + 3vw, 4.5rem); border-bottom: 2px solid var(--c-ink); margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .page-head h1 { max-width: 18ch; } .page-head .lede { font: var(--title-weight) var(--step-1)/1.4 var(--font-title); letter-spacing: var(--title-track); color: var(--c-ink-2); max-width: 46ch; margin: 0; } .filters { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: var(--s-5) 0 0; padding: 0; list-style: none; font-size: var(--step--1); } .filters a { display: inline-flex; align-items: center; gap: 0.35em; min-height: 44px; color: var(--c-ink-2); text-decoration: none; font-weight: 500; } .filters a:hover { color: var(--c-ink); text-decoration: underline; } .filters a[aria-current] { color: var(--c-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.4em; } .filters .n { font: 500 0.8125rem/1 var(--font-mono); color: var(--c-muted); } .reading { display: grid; gap: var(--s-8); padding-bottom: var(--section-y); } @media (min-width: 64em) { .reading { grid-template-columns: minmax(0, 1fr) 16rem; column-gap: clamp(3rem, 2rem + 5vw, 8rem); align-items: start; } .reading > aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } } .reading section + section { margin-top: var(--s-9); } .reading h2 { font-size: var(--step-2); } .rail { display: grid; gap: var(--s-6); font-size: var(--step--1); } .rail h2 { font: 600 var(--step--1)/1.3 var(--font-ui); letter-spacing: 0; font-stretch: 100%; margin: 0 0 var(--s-2); } .rail ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); } .rail li { border-bottom: 1px solid var(--c-hairline); } .rail li a { display: flex; align-items: center; min-height: 44px; color: var(--c-ink-2); text-decoration: none; } .rail li a:hover { color: var(--c-accent); } .rail p { color: var(--c-ink-2); } .rail figure { margin: 0; } .rail figcaption { margin-top: var(--s-2); color: var(--c-muted); } .trio { display: grid; gap: var(--s-6); margin: 0; padding: 0; list-style: none; } @media (min-width: 48em) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: var(--s-6); } } .trio > li { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--c-ink); } @supports (grid-template-rows: subgrid) { @media (min-width: 48em) { .trio > li { grid-row: span 4; grid-template-rows: subgrid; } } } .trio .k { margin: 0; font: var(--label-weight) var(--label-size)/1.3 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--c-loop); } .trio h3 { margin: 0; font: var(--title-weight) var(--step-1)/1.2 var(--font-title); letter-spacing: var(--title-track); } .trio h3 a { text-decoration: none; } .trio h3 a::after { content: ""; position: absolute; inset: 0; } .trio li:hover h3 a { color: var(--c-accent); } .trio li:has(:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 6px; } .trio h3 a:focus-visible { outline: none; } .trio p { margin: 0; font-size: var(--step--1); color: var(--c-ink-2); } .trio .data { align-self: end; } .terms { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-hairline); } .terms li { position: relative; display: grid; gap: var(--s-1) var(--s-6); padding-block: var(--s-4); border-bottom: 1px solid var(--c-hairline); } @media (min-width: 48em) { .terms li { grid-template-columns: 13rem minmax(0, 1fr); } } .terms a { font: var(--title-weight) var(--step-1)/1.2 var(--font-title); letter-spacing: var(--title-track); text-decoration: none; } .terms a::after { content: ""; position: absolute; inset: 0; } .terms li:hover a { color: var(--c-accent); } .terms p { margin: 0; color: var(--c-ink-2); font-size: var(--step--1); } .pubs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--c-hairline); } @media (min-width: 48em) { .pubs { grid-template-columns: minmax(0, 1fr) 9rem; column-gap: var(--s-6); } } .pubs > li { display: grid; grid-column: 1 / -1; gap: var(--s-1) var(--s-6); padding-block: var(--s-5); border-bottom: 1px solid var(--c-hairline); } @supports (grid-template-columns: subgrid) { @media (min-width: 48em) { .pubs > li { grid-template-columns: subgrid; } } } @supports not (grid-template-columns: subgrid) { @media (min-width: 48em) { .pubs > li { grid-template-columns: minmax(0, 1fr) 9rem; } } } .pubs .ref { margin: 0; min-width: 0; } .pubs cite { display: block; font: var(--title-weight) var(--step-1)/1.25 var(--font-title); letter-spacing: var(--title-track); font-style: normal; color: var(--c-ink); } .pubs cite a { text-decoration: none; } .pubs cite a:hover { color: var(--c-accent); text-decoration: underline; } .pubs .venue { display: block; margin-top: var(--s-1); color: var(--c-muted); font-size: var(--step--1); } .pubs .type { font: var(--label-weight) var(--label-size)/1.4 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--c-ink-2); padding-top: 0.3em; } .pub-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); margin: var(--s-1) 0 0; padding: 0; list-style: none; font-size: var(--step--1); } .pub-links a { display: inline-flex; align-items: center; min-height: 44px; } .doi { font: 500 0.875rem/1.5 var(--font-mono); color: var(--c-ink-2); overflow-wrap: anywhere; text-decoration-color: var(--c-border); } .doi:hover { color: var(--c-accent); } .year-group + .year-group { margin-top: var(--s-8); } .year-group > h2 { font: var(--year-weight) var(--step-3)/1 var(--font-hand); font-stretch: var(--year-stretch); color: var(--c-muted); margin-bottom: var(--s-4); } .profiles { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: var(--s-6) 0 0; padding: 0; list-style: none; font-size: var(--step--1); } .profiles a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } .talk { display: grid; gap: var(--s-3); padding-block: var(--s-5); border-bottom: 1px solid var(--c-hairline); } @media (min-width: 48em) { .talk { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-6); } } .talk h3 { margin: 0; font: var(--title-weight) var(--step-1)/1.2 var(--font-title); letter-spacing: var(--title-track); } .talk p { margin: var(--s-1) 0 0; font-size: var(--step--1); color: var(--c-ink-2); } .definition { margin: 0 0 var(--s-8); padding-left: clamp(1rem, 0.5rem + 2vw, 2rem); border-left: 3px solid var(--c-accent); } .definition p { margin: 0; font: var(--title-weight) var(--step-2)/1.25 var(--font-title); letter-spacing: var(--title-track); max-width: 34ch; } .definition dfn { font-style: var(--em-style); font-weight: inherit; color: var(--c-accent); } .definition footer { margin-top: var(--s-4); font-size: var(--step--1); color: var(--c-muted); } .definition footer a { display: inline-flex; align-items: center; min-height: 44px; } .facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-3) var(--s-6); margin: 0; font-size: var(--step--1); } .facts dt { color: var(--c-muted); } .facts dd { margin: 0; } .rel { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); } .rel li { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--c-hairline); align-items: baseline; } .rel .how { font-size: var(--step--1); color: var(--c-muted); } .rel a { font: var(--title-weight) var(--step-1)/1.25 var(--font-title); letter-spacing: var(--title-track); text-decoration: none; } .rel a::after { content: ""; position: absolute; inset: 0; } .rel li:hover a { color: var(--c-accent); } .faq { border-top: 1px solid var(--c-hairline); } .faq details { border-bottom: 1px solid var(--c-hairline); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding-block: var(--s-3); cursor: pointer; list-style: none; font: var(--title-weight) var(--step-1)/1.25 var(--font-title); letter-spacing: var(--title-track); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+" / ""; flex: none; font: 300 1.75rem/1 var(--font-ui); color: var(--c-ink-2); transition: rotate var(--dur) var(--ease); } .faq details[open] summary::after { rotate: 45deg; } .faq summary:hover { color: var(--c-accent); } .faq .answer { padding-bottom: var(--s-5); color: var(--c-ink-2); max-width: var(--measure); } @supports selector(::details-content) { @media (prefers-reduced-motion: no-preference) { .faq details { interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-slow) var(--ease), content-visibility var(--dur-slow) allow-discrete; } .faq details[open]::details-content { block-size: auto; } } } .progress { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; background: var(--c-accent); transform-origin: 0 50%; scale: 0 1; display: none; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .progress { display: block; animation: progress linear both; animation-timeline: scroll(root); } @keyframes progress { to { scale: 1 1; } } } } .article-head { padding-block: var(--s-6) var(--s-7); max-width: 60rem; } .article-head .k { margin: 0 0 var(--s-4); font: var(--label-weight) var(--label-size)/1.4 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--c-ink-2); } .article-head h1 { font-size: var(--step-4); margin-bottom: var(--s-5); } .byline { margin: 0 0 var(--s-6); color: var(--c-ink-2); font-size: var(--step--1); } .byline a { font-weight: 600; } .meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-6); padding-block: var(--s-4); border-block: 1px solid var(--c-hairline); font-size: var(--step--1); } .meta dt { color: var(--c-muted); font: var(--label-weight) var(--label-size)/1.6 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); } .meta dd { margin: 0; min-width: 0; } .article { display: grid; gap: var(--s-7); padding-bottom: var(--section-y); } @media (min-width: 64em) { .article { grid-template-columns: 13rem minmax(0, var(--measure)); column-gap: clamp(3rem, 2rem + 4vw, 7rem); align-items: start; } .article > * { grid-column: 2; } .article > .toc { grid-column: 1; grid-row: 1 / span 5; position: sticky; top: calc(var(--header-h) + 1.5rem); } } .toc { font-size: var(--step--1); } .toc h2 { font: var(--label-weight) var(--label-size)/1.3 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); font-stretch: 100%; margin: 0 0 var(--s-2); } .toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); } .toc li { border-bottom: 1px solid var(--c-hairline); } .toc a { display: flex; align-items: center; min-height: 44px; color: var(--c-ink-2); text-decoration: none; } .toc a:hover { color: var(--c-accent); } .abstract { padding-block: var(--s-5); border-block: 2px solid var(--c-ink); } .abstract h2 { font: var(--label-weight) var(--label-size)/1.3 var(--label-font); letter-spacing: var(--label-track); text-transform: var(--label-case); font-stretch: 100%; margin-bottom: var(--s-3); } .abstract p { font: 400 var(--step-0)/1.6 var(--font-text); } .abstract p.keywords { margin: var(--s-4) 0 0; font-size: var(--step--1); color: var(--c-ink-2); } .translations { margin-top: var(--s-4); border-top: 1px solid var(--c-hairline); } .translations summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-weight: 600; font-size: var(--step--1); } .prose { max-width: var(--measure); font: 400 var(--step-0)/1.6 var(--font-text); } .prose h2 { font-size: var(--step-2); margin-top: var(--s-8); } .prose h2 .sec-n { display: block; margin-bottom: var(--s-2); font: 500 var(--step--1)/1 var(--font-mono); color: var(--c-accent); letter-spacing: 0; } .prose li { margin-bottom: var(--s-3); } .prose a.cite { white-space: nowrap; text-decoration-style: dotted; } .prose figure { margin: var(--s-7) 0; } .prose figcaption { margin-top: var(--s-3); font: 400 var(--step--1)/1.5 var(--font-text); color: var(--c-muted); } .note { padding: var(--s-4) 0; border-block: 1px dashed var(--c-border); font: 400 var(--step--1)/1.6 var(--font-text); color: var(--c-ink-2); } .references { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); line-height: 1.6; } .references li { padding-left: 2em; text-indent: -2em; margin-bottom: var(--s-3); overflow-wrap: anywhere; } .references li:target { background: var(--c-mark); } .cite-box { padding-top: var(--s-5); border-top: 2px solid var(--c-ink); } .cite-box h2 { margin-top: 0; } .cite-apa { margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 2em); text-indent: -2em; background: var(--c-paper-2); font-size: var(--step--1); overflow-wrap: anywhere; } .cite-box summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; font-size: var(--step--1); } .cite-box pre { margin: 0; padding: var(--s-4); background: var(--c-paper-2); font: 400 0.8125rem/1.55 var(--font-mono); overflow-x: auto; } .export { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: var(--s-4) 0 0; padding: 0; list-style: none; } /* ---------- 13. Creative ---------- */ .creative-head { padding-block: var(--s-7) var(--s-6); display: grid; gap: var(--s-5); } .creative-head h1 { font-size: var(--step-5); line-height: 0.9; margin: 0; max-width: 12ch; } .creative-head .lede { font: var(--title-weight) var(--step-1)/1.4 var(--font-title); letter-spacing: var(--title-track); color: var(--c-ink-2); max-width: 36ch; margin: 0; } @media (min-width: 64em) { .creative-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-8); } } .filters--bar { position: sticky; top: var(--header-h); z-index: 20; margin: 0; padding: 0 var(--gutter); background: var(--c-header); border-block: 1px solid var(--c-hairline); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .filters--bar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .filters--bar .filters { max-width: calc(var(--wrap-wide) - 2 * var(--gutter)); margin: 0 auto; } .g-sec { padding-block: var(--s-9) var(--s-6); } .g-sec > header { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); } .g-sec > header h2 { margin: 0; } .g-sec > header p { margin: 0; color: var(--c-ink-2); max-width: 46ch; } @media (min-width: 64em) { .g-sec > header { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; column-gap: var(--s-8); } } .artwork { margin: 0; } .artwork a { display: block; text-decoration: none; } .artwork a:focus-visible { outline-offset: 4px; } .artwork img { width: 100%; height: auto; transition: opacity var(--dur) var(--ease); } .artwork a:hover img { opacity: 0.9; } .artwork figcaption { display: grid; gap: 1px; margin-top: var(--s-3); font-size: var(--step--1); color: var(--c-muted); } .artwork .t { font: var(--title-weight) var(--step-1)/1.2 var(--font-title); letter-spacing: var(--title-track); color: var(--c-ink); } .artwork q { margin-top: var(--s-2); color: var(--c-ink-2); max-width: 40ch; font-size: var(--step--1); line-height: 1.5; } .music-sec { background: var(--c-night); color: var(--c-on-night); padding-block: var(--section-y); } .music-sec h2 { color: var(--c-on-night); font-size: var(--step-5); line-height: 0.9; } .music-sec a { color: var(--c-on-night); } .music-grid { display: grid; gap: var(--s-8); } @media (min-width: 64em) { .music-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-9); align-items: start; } } .music-grid figure { margin: 0; } .music-grid figcaption { margin-top: var(--s-2); font-size: var(--step--2); color: var(--c-on-night-2); } .tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(238, 234, 226, 0.25); } .tracks > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid rgba(238, 234, 226, 0.25); align-items: center; } .tracks h3 { margin: 0; font: var(--title-weight) var(--step-1)/1.2 var(--font-title); letter-spacing: var(--title-track); color: var(--c-on-night); } .tracks p { grid-column: 1; margin: 0; font-size: var(--step--1); color: var(--c-on-night-2); } .tracks .btn { grid-column: 2; grid-row: 1 / span 2; background: transparent; border-color: rgba(238, 234, 226, 0.6); color: var(--c-on-night); } .tracks .player-slot { grid-column: 1 / -1; } .tracks .player-slot iframe { width: 100%; border: 0; margin-top: var(--s-3); } .music-sec .note { margin-top: var(--s-5); padding: 0; border: 0; font-size: var(--step--1); color: var(--c-on-night-2); max-width: 52ch; } .lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(11, 11, 10, 0.96); color: #EEEAE2; } .lightbox::backdrop { background: rgba(11, 11, 10, 0.6); } .lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .lb-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--gutter); } .lb-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 1em; border: 1px solid rgba(238, 234, 226, 0.5); border-radius: var(--r); background: transparent; color: #EEEAE2; font: 600 var(--step--1)/1 var(--font-ui); cursor: pointer; } .lb-btn:hover { border-color: #EEEAE2; } .lb-stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); } .lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .lb-cap { padding: var(--s-4) var(--gutter) var(--s-5); text-align: center; font-size: var(--step--1); color: #B5B0A6; } .lb-cap b { display: block; font: var(--title-weight) var(--step-1)/1.3 var(--font-title); color: #EEEAE2; } @media (prefers-reduced-motion: no-preference) { .lightbox[open] { animation: lb-in 200ms var(--ease); } @keyframes lb-in { from { opacity: 0; } } } body:has(.lightbox[open]) { overflow: hidden; } /* ---------- 14. Contact ---------- */ .contact-grid { display: grid; gap: var(--s-8); padding-bottom: var(--section-y); } @media (min-width: 64em) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(3rem, 2rem + 5vw, 8rem); } } .form { display: grid; gap: var(--s-5); max-width: 40rem; } .field { display: grid; gap: var(--s-2); } .field label { font-weight: 600; font-size: var(--step--1); } .field .hint { margin: 0; font-size: 0.875rem; color: var(--c-muted); } .field :is(input, select, textarea) { width: 100%; min-height: 48px; padding: 0.7em 0.85em; border: 1px solid var(--c-border); border-radius: var(--r); background: var(--c-surface); color: var(--c-ink); font: 400 var(--step-0)/1.4 var(--font-ui); } .field textarea { min-height: 10rem; resize: vertical; field-sizing: content; max-height: 30rem; } .field :is(input, select, textarea):hover { border-color: var(--c-ink-2); } .field :is(input, select, textarea):focus-visible { outline: 3px solid var(--c-focus); outline-offset: 0; border-color: var(--c-focus); } .field .err { display: none; margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--c-error); } .field:has([aria-invalid="true"]) .err { display: block; } .field:has([aria-invalid="true"]) :is(input, select, textarea) { border: 2px solid var(--c-error); } .field:has(:user-invalid) :is(input, select, textarea) { border-color: var(--c-error); } .req { color: var(--c-muted); font-weight: 400; } .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); } .notice { display: grid; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--c-hairline); background: var(--c-surface); } .notice h2, .notice h3 { margin: 0; font: 600 var(--step-0)/1.35 var(--font-ui); letter-spacing: 0; font-stretch: 100%; } .notice p { margin: 0; color: var(--c-ink-2); } .notice--error { border: 2px solid var(--c-error); } .notice--error ul { margin: var(--s-2) 0 0; padding-left: 1.2em; } .notice--info { border-left: 3px solid var(--c-loop); } .notice--ok { border: 2px solid var(--c-ok); } /* ---------- 15. Motion (progressive only) + print ---------- */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; } } @media print { .site-header, .toc, .progress, .filters, .listen, .music-sec, .menu-btn { display: none !important; } body { background: #fff; color: #000; } } /* Reading copy remains in the approved custom face; labels, headings and emphasis stay Hanken. */ .page-head .lede, .creative-head .lede, .bstrip__head p, .trail__head blockquote, .stop__said, .definition p, .artwork .t { font-family: var(--font-text); font-weight: 400; letter-spacing: 0; } /* ---------- 13b. Art patterns (from art-preview.css) ---------- */ /* Reusable art fields and image patterns. Color classes are optional; layout is independent. */ .art-panel { --art-surface: var(--c-paper-2); --art-ink: var(--c-ink); --art-muted: var(--c-muted); --art-accent: var(--c-accent); --em-color: var(--art-accent); background:var(--art-surface); color:var(--art-ink); padding-block:clamp(2.5rem,5vw,5rem); } .art-panel--oxblood { --art-surface:#591615; --art-ink:#fff8f4; --art-muted:#edc9c0; --art-accent:#ffad91; --c-ink:#fff8f4; --c-ink-2:#f0d6cf; --c-muted:#edc9c0; --c-accent:#ffad91; --c-border:#d99485; --c-focus:#ffe66f; } .art-panel--lilac { --art-surface:#d6cedd; --art-ink:#211b25; --art-muted:#514956; --art-accent:#563a65; --c-ink:#211b25; --c-ink-2:#39323f; --c-muted:#514956; --c-accent:#563a65; --c-border:#79717e; --c-focus:#174f9b; } .art-panel--sage { --art-surface:#a2bdb4; --art-ink:#15251f; --art-muted:#354b43; --art-accent:#174b3d; --c-ink:#15251f; --c-ink-2:#293b34; --c-muted:#354b43; --c-accent:#174b3d; --c-border:#546c63; --c-focus:#123e85; } .art-panel--stone { --art-surface:#e9e5dd; --art-ink:#211f1a; --art-muted:#514e47; --art-accent:#55463b; --c-ink:#211f1a; --c-ink-2:#39362f; --c-muted:#514e47; --c-accent:#55463b; --c-border:#777168; --c-focus:#14549b; } .art-panel__inner { display:grid; gap:clamp(1rem,2vw,2rem); } .art-panel__heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; } .art-field-label { margin:0; color:var(--art-muted); font:600 .8125rem/1.3 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; } .art-scroll-hint { margin:0; color:var(--art-muted); font:500 .875rem/1.4 var(--font-ui); } .art-panel__all { padding-block:0 var(--s-6); } .art-preview-link { display:grid; grid-template-columns:minmax(0,1fr); color:inherit; text-decoration:none; } .art-preview-link img { display:block; max-width:100%; height:auto; } .art-preview-link:hover img { opacity:1; } .art-preview-link:focus-visible { outline-offset:4px; } .art-view-larger { display:inline-flex; align-items:center; width:fit-content; min-height:44px; margin-top:.25rem; border-bottom:1px solid currentColor; color:inherit; font:600 .875rem/1.2 var(--font-ui); text-decoration:none; } .art-source-link { display:inline-flex; align-items:center; min-height:44px; margin-top:.35rem; color:inherit; font:600 .875rem/1.2 var(--font-ui); } .artwork { margin:0; min-width:0; } .artwork figcaption { display:grid; align-content:start; gap:.25rem; margin:0; color:var(--art-muted,var(--c-muted)); } .artwork .t { font:600 var(--step-1)/1.2 var(--font-ui); color:var(--art-ink,var(--c-ink)); } .artwork .t a { color:inherit; } .artwork q { margin-top:var(--s-2); color:var(--art-ink,var(--c-ink-2)); max-width:40ch; font-size:var(--step--1); line-height:1.5; } .art-meta { color:var(--art-muted,var(--c-muted)); } /* A lead is a reusable layout role; the image's own ratio controls its rendered shape. */ .art-layout--lead { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(15rem,.8fr); gap:clamp(1rem,3vw,3rem); align-items:center; } .art-layout--lead > .art-preview-link { min-width:0; justify-items:center; } .art-layout--lead > .art-preview-link img { width:auto; height:auto; max-width:100%; max-height:clamp(25rem,64vh,36rem); margin-inline:auto; } .art-layout--lead > figcaption { display:grid; align-content:center; gap:.45rem; } .art-layout--lead > figcaption .t { font-size:clamp(1.4rem,2vw,2.15rem); line-height:1.15; letter-spacing:-.025em; } .art-layout--lead > figcaption q { color:var(--art-ink,var(--c-ink)); } /* Auto-fit lists need no per-image selector. Intrinsic ratios make their heights vary naturally. */ .art-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr)); gap:clamp(1.5rem,4vw,4rem) var(--s-6); align-items:start; list-style:none; margin:0; padding:0; } .art-grid > li { min-width:0; } .art-grid .artwork { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(8rem,.75fr); gap:1rem clamp(1rem,2vw,2.5rem); align-items:end; height:100%; } .art-grid .artwork img { display:block; width:100%; height:auto; } .art-grid .artwork figcaption { margin:0; } .art-chapter { width:100%; max-width:none; margin-inline:auto; padding:0; } .art-chapter__head { padding-block:var(--s-8) var(--s-6); } .art-chapter__head > header { display:grid; gap:var(--s-3); margin:0; } .art-chapter .art-panel__inner { padding-inline:var(--gutter); } /* A rail is a grid at wide sizes and a visible, keyboard-scrollable snap row on small screens. */ .art-rail { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:2rem 1rem; list-style:none; margin:0; padding:0; align-items:start; } .art-rail > li { min-width:0; } .art-rail img { display:block; width:100%; height:auto; } .art-rail figure { height:100%; } .art-mini { height:100%; } .art-mini .art-preview-link { justify-items:start; } .art-mini img { display:block; width:100%; height:auto; max-width:100%; } .art-mini figcaption { margin:0; } .art-mini .t { font:600 1rem/1.3 var(--font-ui); } .art-strip-hint { padding:0 var(--gutter) var(--s-2); } @media (max-width:55em) { .art-grid .artwork { grid-template-columns:minmax(0,1fr); } .art-layout--lead { grid-template-columns:minmax(0,1fr); align-items:start; } .art-layout--lead > figcaption { align-content:start; } } @media (max-width:39.99em) { .art-rail { display:flex; overflow-x:auto; gap:1.25rem; padding:0 0 1rem; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:thin; } .art-rail > li { flex:0 0 min(82vw,23rem); scroll-snap-align:start; } .art-grid { display:flex; overflow-x:auto; gap:1.25rem; padding:0 0 1rem; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:thin; } .art-grid > li { flex:0 0 min(82vw,23rem); scroll-snap-align:start; } .art-grid .artwork { grid-template-columns:minmax(0,1fr); } } /* ---------- 16. WordPress adaptation: block styles, block and plugin markup ---------- */ .site-header .header-inner > *, .site-footer .footer-grid > * { margin-block: 0; } .brand { color: var(--c-ink); text-decoration: none; } .brand:hover { color: var(--c-accent); } .brand__mark { display: block; height: 50px; aspect-ratio: 464 / 232; background-color: currentColor; -webkit-mask: url("assets/logo.svg") center / contain no-repeat; mask: url("assets/logo.svg") center / contain no-repeat; } @media (forced-colors: active) { .brand__mark { forced-color-adjust: none; background-color: CanvasText; } } .fineprint a { display: inline-flex; align-items: center; min-height: 44px; } .site-footer .profile-links, .site-footer nav ul { list-style: none; margin: 0; padding: 0; } .footer-bio { margin: 0; max-width: 40ch; } .breadcrumb { font-size: var(--step--1); padding-top: var(--s-5); } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; } .breadcrumb li + li::before { content: "/" / ""; color: var(--c-border); margin-inline: var(--s-2); } .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink-2); } .breadcrumb [aria-current] { color: var(--c-muted); } :is(.is-style-go, .is-style-go-ext) a { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font: var(--label-weight) var(--label-size)/1.2 var(--label-font); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; } :is(.is-style-go, .is-style-go-ext) a::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--m-arrow) center / contain no-repeat; mask: var(--m-arrow) center / contain no-repeat; flex: none; } .is-style-go-ext a::after { -webkit-mask-image: var(--m-ext); mask-image: var(--m-ext); width: 0.85em; height: 0.85em; } :is(.is-style-go, .is-style-go-ext) a:hover { color: var(--c-accent); } p.is-style-lede, .page-head .lede { font: 400 var(--step-1)/1.4 var(--font-text); color: var(--c-ink-2); max-width: 46ch; } .wp-block-group.is-style-wrap { padding: var(--s-7) var(--pad-wrap) var(--s-5); } .wp-block-group.is-style-wall-head { display: grid; gap: var(--s-5); width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding: clamp(2rem, 1rem + 4vw, 4.5rem) var(--gutter) var(--s-7); } .is-style-wall-head h1 { margin: 0; max-width: 19ch; } .is-style-wall-head .roles { margin: 0; } @media (min-width: 64em) { .wp-block-group.is-style-wall-head { grid-template-columns: minmax(0, 8fr) minmax(0, 3.5fr); align-items: end; column-gap: var(--s-8); } .is-style-wall-head .roles { grid-template-columns: 1fr; } } .wp-block-group.is-style-creative-head { display: grid; gap: var(--s-5); padding: var(--s-7) var(--pad-wrap) var(--s-6); } .is-style-creative-head h1 { font-size: var(--step-5); line-height: 0.9; margin: 0; max-width: 12ch; } @media (min-width: 64em) { .wp-block-group.is-style-creative-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-8); } } .wp-block-group.is-style-index { padding: var(--section-y) var(--pad-wrap); border-top: 2px solid var(--c-ink); } .is-style-index > h2 { font-size: var(--step-3); margin: 0 0 var(--s-5); } .wp-block-group.is-style-closing { padding: var(--section-y) var(--pad-wrap) var(--s-8); background: var(--c-field); color: var(--c-on-field); } .is-style-closing p.is-style-big { font: var(--display-weight) var(--step-3)/1.05 var(--font-display); letter-spacing: var(--display-track); max-width: 24ch; margin: 0 0 var(--s-6); } .is-style-closing :is(.is-style-go, .is-style-go-ext) { display: inline-block; margin: 0 var(--s-6) 0 0; } .is-style-closing :is(.is-style-go, .is-style-go-ext) a { color: var(--c-on-field); text-decoration-color: currentColor; } .wp-block-group.is-style-trio { display: grid; gap: var(--s-6); } @media (min-width: 48em) { .wp-block-group.is-style-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: var(--s-6); } } .is-style-trio > .wp-block-group { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--c-ink); } @supports (grid-template-rows: subgrid) { @media (min-width: 48em) { .is-style-trio > .wp-block-group { grid-row: span 4; grid-template-rows: subgrid; } } } .is-style-trio .k { margin: 0; font: var(--label-weight) var(--label-size)/1.3 var(--label-font); color: var(--c-loop); } .is-style-trio h3 { margin: 0; font: var(--title-weight) var(--step-1)/1.2 var(--font-title); } .is-style-trio h3 a { text-decoration: none; } .is-style-trio h3 a::after { content: ""; position: absolute; inset: 0; } .is-style-trio > .wp-block-group:hover h3 a { color: var(--c-accent); } .is-style-trio > .wp-block-group:has(:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 6px; } .is-style-trio h3 a:focus-visible { outline: none; } .is-style-trio p { margin: 0; font-size: var(--step--1); color: var(--c-ink-2); } .is-style-trio .data { align-self: end; font: 500 var(--step--1)/1.5 var(--font-mono); color: var(--c-muted); } .wp-block-columns:is(.is-style-reading, .is-style-contact) { display: grid; gap: var(--s-8); margin: 0; padding-bottom: var(--section-y); } .wp-block-columns:is(.is-style-reading, .is-style-contact) > .wp-block-column { min-width: 0; flex-basis: auto; } @media (min-width: 64em) { .wp-block-columns.is-style-reading { grid-template-columns: minmax(0, 1fr) 16rem; column-gap: clamp(3rem, 2rem + 5vw, 8rem); align-items: start; } .is-style-reading > .wp-block-column:last-child { position: sticky; top: calc(var(--header-h) + 1.5rem); } .wp-block-columns.is-style-contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(3rem, 2rem + 5vw, 8rem); } } .is-style-reading > .wp-block-column:first-child > h2:not(:first-child) { margin-top: var(--s-9); } .is-style-reading > .wp-block-column:first-child > h2 { font-size: var(--step-2); } :is(.is-style-reading, .is-style-contact) > .wp-block-column:last-child { display: grid; gap: var(--s-4); align-content: start; font-size: var(--step--1); } :is(.is-style-reading, .is-style-contact) > .wp-block-column:last-child h2 { font: 600 var(--step--1)/1.3 var(--font-ui); letter-spacing: 0; margin: 0; } :is(.is-style-reading, .is-style-contact) > .wp-block-column:last-child ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); } :is(.is-style-reading, .is-style-contact) > .wp-block-column:last-child li { border-bottom: 1px solid var(--c-hairline); } :is(.is-style-reading, .is-style-contact) > .wp-block-column:last-child li a { display: flex; align-items: center; min-height: 44px; color: var(--c-ink-2); text-decoration: none; } :is(.is-style-reading, .is-style-contact) > .wp-block-column:last-child li a:hover { color: var(--c-accent); } .wp-block-table.is-style-catalogue { margin: 0; } .wp-block-table.is-style-catalogue table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .wp-block-table.is-style-catalogue :is(th, td) { padding: var(--s-3) var(--s-4) var(--s-3) 0; text-align: left; vertical-align: baseline; border: 0; border-bottom: 1px solid var(--c-hairline); } .wp-block-table.is-style-catalogue thead { border: 0; } .wp-block-table.is-style-catalogue thead th { font: var(--label-weight) var(--step--2)/1.3 var(--label-font); color: var(--c-muted); border-bottom: 2px solid var(--c-ink); } .wp-block-table.is-style-catalogue td:first-child { font-family: var(--font-mono); color: var(--c-muted); white-space: nowrap; } .wp-block-table.is-style-catalogue td:nth-child(2) { font: var(--title-weight) var(--step-1)/1.25 var(--font-title); } .wp-block-table.is-style-catalogue td:nth-child(2) a { text-decoration: none; } .wp-block-table.is-style-catalogue td:nth-child(2) a:hover { color: var(--c-accent); text-decoration: underline; } @media (max-width: 47.99em) { .wp-block-table.is-style-catalogue thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wp-block-table.is-style-catalogue tr { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); padding-block: var(--s-3); border-bottom: 1px solid var(--c-hairline); } .wp-block-table.is-style-catalogue td { border: 0; padding: 0 0 2px; } .wp-block-table.is-style-catalogue td:first-child { grid-row: 1 / span 2; } .wp-block-table.is-style-catalogue td:last-child { grid-column: 2; color: var(--c-muted); } } .wp-block-image:is(.is-style-signature, .is-style-signature-write) { margin: 0; } .wp-block-image:is(.is-style-signature, .is-style-signature-write) img { width: auto; height: 5rem; } .is-style-closing :is(.is-style-signature, .is-style-signature-write) img { height: clamp(4rem, 2rem + 5vw, 7rem); margin-top: var(--s-7); } .stop__art--s { --w: 40%; --w-m: 60%; } .stop__art--m { --w: 62%; --w-m: 80%; } .stop__art--l { --w: 100%; --w-m: 100%; } .stop__link { margin: 0; } @media (min-width: 64em) { .stop > .stop__link { grid-column: 3; } } .player-slot iframe { display: block; width: 100%; border: 0; margin-top: var(--s-3); } .player-slot iframe[data-provider="youtube"] { aspect-ratio: 16 / 9; height: auto; } .player-slot iframe[data-provider="soundcloud"] { height: 166px; } .player-slot:empty { display: none; } .talks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); } .talk .player-slot { grid-column: 1 / -1; } .press { padding-block: var(--s-8); } .press > h2 { font-size: var(--step-3); } .press-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hairline); } .press-list > li { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: 1px solid var(--c-hairline); } .press-list .k { margin: 0; font: var(--label-weight) var(--label-size)/1.4 var(--label-font); color: var(--c-ink-2); } .press-list h3 { margin: 0; font: var(--title-weight) var(--step-1)/1.25 var(--font-title); } .press-list h3 a { text-decoration: none; } .press-list h3 a:hover { color: var(--c-accent); text-decoration: underline; } .press-list p { margin: 0; color: var(--c-ink-2); font-size: var(--step--1); } .list .wp-block-post-date { font: 500 var(--step--1)/1.7 var(--font-mono); color: var(--c-muted); } .list .wp-block-post-title { margin: 0; font: var(--title-weight) var(--step-1)/1.25 var(--font-title); } .concepts-index { margin: 0; border-top: 1px solid var(--c-hairline); display: grid; grid-template-columns: minmax(0, 1fr); } .concepts-index dt { padding-top: var(--s-4); font: var(--title-weight) var(--step-1)/1.2 var(--font-title); } .concepts-index dt a { text-decoration: none; } .concepts-index dt a:hover { color: var(--c-accent); } .concepts-index dd { margin: 0; padding: var(--s-1) 0 var(--s-4); border-bottom: 1px solid var(--c-hairline); color: var(--c-ink-2); font-size: var(--step--1); } @media (min-width: 48em) { .concepts-index { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--s-6); } .concepts-index dt, .concepts-index dd { padding-block: var(--s-4); border-bottom: 1px solid var(--c-hairline); } } p.definition { margin: 0 0 var(--s-8); padding-left: clamp(1rem, 0.5rem + 2vw, 2rem); border-left: 3px solid var(--c-accent); font: 400 var(--step-2)/1.25 var(--font-text); max-width: 34ch; } .concept-related, .thesis-refs, .concept-uses { list-style: none; margin: 0 0 var(--s-6); padding: 0; border-top: 1px solid var(--c-hairline); } .concept-related li, .thesis-refs li, .concept-uses li { padding-block: var(--s-3); border-bottom: 1px solid var(--c-hairline); } .concept-related .rel { display: inline-block; min-width: 7.5rem; border: 0; color: var(--c-muted); font-size: var(--step--1); } .concept-nav a, .series-box a { display: inline-flex; align-items: center; min-height: 44px; } .series-box { margin: var(--s-7) 0; padding-top: var(--s-5); border-top: 2px solid var(--c-ink); font-size: var(--step--1); } .cite-box .label { margin: 0 0 var(--s-2); font: var(--label-weight) var(--label-size)/1.3 var(--label-font); color: var(--c-muted); } .summary { padding-block: var(--s-5); border-top: 1px solid var(--c-hairline); } .pubs-empty, .translation-of { color: var(--c-muted); font-size: var(--step--1); } .ai-note { padding: var(--s-4) 0; border-block: 1px dashed var(--c-border); font-size: var(--step--1); color: var(--c-ink-2); } .other-language { margin-top: var(--s-8); } /* Owner rule: crop only through .thumb--crop (card thumbnails); artwork is never cropped */ .thumb--crop { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focus, 50% 50%); } /* ---------- 17. Wave 2 fixes ---------- */ /* 17a. Interface face. Seraphine Text ships 400 normal only: every bold, italic or UI text uses Hanken. */ th, h5, h6 { font-family: var(--font-ui); font-weight: 600; } dfn, summary { font-family: var(--font-ui); } .lang a, .filters a, .field label, .field .hint, .field .err, .oa, .byline a, .profiles a, .cite-box summary, .translations summary { font-family: var(--font-ui); } .lang a[aria-current="true"], .filters a[aria-current] { font-weight: 600; } /* 17b. Full-bleed bands butt together; no WordPress flow margins where the design uses grids */ .wp-site-blocks > * { margin-block: 0; } .wp-block-post-content.bands > *, .wp-block-group.is-style-stack > * { margin-block: 0; } .wp-block-group:is(.is-style-wall-head, .is-style-creative-head, .is-style-trio) > *, .is-style-trio > .wp-block-group > * { margin-block: 0; } .page-head .lede { margin-top: var(--s-5); } @media (max-width: 63.99em) { .article { grid-template-columns: minmax(0, 1fr); } } .prose, .abstract { overflow-wrap: break-word; } @media (max-width: 47.99em) { .prose :is(.alignleft, .alignright) { float: none; margin-inline: 0; } } /* 17c. Components */ .roles { display: grid; gap: var(--s-3) var(--s-6); margin: 0 0 var(--s-6); padding: var(--s-4) 0 0; border-top: 2px solid var(--c-ink); list-style: none; font-size: var(--step--1); color: var(--c-ink-2); max-width: 46rem; } .roles li { line-height: 1.4; } .roles b { display: block; color: var(--c-ink); font-weight: 600; } @media (min-width: 40em) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .press-list > li > .btn, .talk > .btn { justify-self: start; } a[data-fs-play][hidden] { display: none; } @media (min-width: 64em) { .listen-row:has(.player-slot iframe) { grid-template-columns: minmax(0, 1fr); } } .listen-row .player-slot iframe { max-width: 48rem; } @media (max-width: 63.99em) { .more-tracks li { display: grid; gap: 2px; } } @media (max-width: 39.99em) { .tracks > li { grid-template-columns: minmax(0, 1fr); } .tracks .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s-2); } } .talks-sec { margin-top: var(--s-9); } .talks-sec > h2 { font-size: var(--step-2); } .profile-links--publications { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: 0; padding: 0 0 var(--section-y); list-style: none; font-size: var(--step--1); } .profile-links--publications a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-ui); font-weight: 600; } .filters .n:empty { display: none; } /* ---------- 18. Latest writing (home, from design/mockups/v3-motion/latest.css) ---------- */ .is-style-latest { --latest-thumb: 4.75rem; /* thumbnail column, small screens */ display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); padding-block: calc(var(--section-y) * 0.6) calc(var(--section-y) * 0.5); /* same content width as .wrap.wrap--wide; the theme already defines --pad-wrap */ padding-inline: var(--pad-wrap, max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter)))); } .is-style-latest > * { margin-block: 0; } .is-style-latest > h2 { font-size: var(--step-2); } /* one step below the Index: a feed, not a chapter */ .is-style-latest > .is-style-go { margin: 0; } /* The list */ .is-style-latest .wp-block-post-template { display: grid; margin: 0; padding: 0; list-style: none; } .is-style-latest .wp-block-post { --latest-rule: 1px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; /* date, title, excerpt: extra height goes below the excerpt */ gap: var(--s-1) var(--s-4); align-content: start; padding-block: var(--s-4); border-top: var(--latest-rule) solid var(--c-hairline); } .is-style-latest .wp-block-post:first-child { --latest-rule: 2px; border-top-color: var(--c-ink); } .is-style-latest .wp-block-post:last-child { border-bottom: 1px solid var(--c-hairline); } .wp-block-group.is-style-latest > * { margin-block: 0; } .is-style-latest .wp-block-post.has-post-thumbnail { grid-template-columns: var(--latest-thumb) minmax(0, 1fr); } .is-style-latest .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin: 0; } .is-style-latest .wp-block-post-featured-image img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px var(--c-hairline); } /* hairline keeps white-paper drawings from melting into the page */ .is-style-latest .has-post-thumbnail > :not(.wp-block-post-featured-image) { grid-column: 2; } .is-style-latest .wp-block-post > :not(.wp-block-post-featured-image) { align-self: start; margin: 0; min-width: 0; } /* Text */ .is-style-latest .wp-block-post-date { font: 500 var(--step--2)/1.5 var(--font-mono); color: var(--c-muted); } .is-style-latest .wp-block-post-title { font: var(--title-weight) var(--step-1)/1.2 var(--font-title); letter-spacing: var(--title-track); text-wrap: balance; } .is-style-latest .wp-block-post-title a { color: var(--c-ink); text-decoration: none; } .is-style-latest .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole entry is the tap target */ .is-style-latest .wp-block-post-excerpt { margin-top: var(--s-1); } .is-style-latest .wp-block-post-excerpt__excerpt { margin: 0; max-width: 48ch; font: 400 var(--step--1)/1.5 var(--font-text); color: var(--c-ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* States: hover = title in accent + accent rule over the top rule; keyboard = focus ring on the entry */ .is-style-latest .wp-block-post::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--latest-rule)); height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } .is-style-latest .wp-block-post:is(:hover, :has(:focus-visible))::before { transform: scaleX(1); } .is-style-latest .wp-block-post:hover .wp-block-post-title a { color: var(--c-accent); } .is-style-latest .wp-block-post:has(:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 4px; } .is-style-latest .wp-block-post-title a:focus-visible { outline: none; } /* Medium screens: heading and "All writing" share the top row */ @media (min-width: 48em) { .is-style-latest { --latest-thumb: 5.5rem; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); row-gap: var(--s-6); } .is-style-latest > h2 { grid-column: 1; grid-row: 1; align-self: last baseline; } .is-style-latest > .is-style-go { grid-column: 2; grid-row: 1; align-self: last baseline; } .is-style-latest > .wp-block-query { grid-column: 1 / -1; grid-row: 2; } } /* Wide screens: three columns with ink rules, like the timeline and the trio */ @media (min-width: 64em) { .is-style-latest { --latest-thumb: 6rem; } .is-style-latest .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); } .is-style-latest .wp-block-post:is(*, :first-child, :last-child) { --latest-rule: 2px; padding-block: var(--s-4) 0; border-top: 2px solid var(--c-ink); border-bottom: 0; } } /* 19. Wave 2 fix: Latest writing cards share one top line */ .is-style-latest .wp-block-post-template > li, .is-style-latest .wp-block-post-template > .wp-block-post { margin-block-start: 0; } /* ---------- Creative fixes (2026-10-25) ---------- 1. Music room: the brush-notes scan is a paper sheet taped in the dark band. Owner rule: never invert or filter drawings; paper stays light. Intrinsic ratio kept. 2. Early work: standalone closing section, two columns at 64em+, ~90px rhythm. */ .music-grid figure { position: relative; isolation: isolate; max-width: 23rem; margin: var(--s-7) 0 0; } .music-grid figure img { width: calc(100% - 1rem); height: auto; margin-inline: 0.5rem; rotate: -1.5deg; outline: 1px solid rgba(0, 0, 0, 0.06); outline-offset: -1px; } .music-grid figure::before { content: ""; position: absolute; z-index: 1; top: -0.75rem; left: 50%; width: 5.5rem; height: 1.5rem; translate: -50% 0; rotate: 2.5deg; background: rgba(228, 216, 190, 0.78); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); pointer-events: none; } .music-grid figcaption { margin-top: var(--s-5); } @media (forced-colors: active) { .music-grid figure::before { display: none; } } .wp-block-group.is-style-wrap:has(> #early) { display: grid; gap: var(--s-4); padding-block: clamp(4rem, 2rem + 4vw, 6rem); } .is-style-wrap:has(> #early) > * { margin: 0; } .is-style-wrap:has(> #early) > p { max-width: 46ch; color: var(--c-ink-2); } @media (min-width: 64em) { .wp-block-group.is-style-wrap:has(> #early) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-9); align-items: last baseline; } } /* 20. Wave 2 fix: text pages breathe */ /* Text-page mains (single, page, archive, search; also the blog index behind /writing/) keep a gap above the footer rule. Studio pages have no .wrap class and are not touched. */ main#main.wrap { padding-bottom: clamp(4rem, 2rem + 4vw, 6rem); } /* Creative filter bar: one scrollable row below 40em, no wrap. Padding and negative margin keep the focus ring inside the scroll box. */ @media (max-width: 39.99em) { .filters--bar .filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin: -6px; padding: 6px; } .filters--bar .filters::-webkit-scrollbar { display: none; } .filters--bar .filters > li { flex: none; scroll-snap-align: start; } } /* Breadcrumb: the separator belongs to the item before it, so no line starts with "/". */ .breadcrumb li + li::before { content: none; } .breadcrumb li:not(:last-child) { white-space: nowrap; } .breadcrumb li:not(:last-child)::after { content: "/"; color: var(--c-border); margin-inline: var(--s-2); } /* ---------- 21. Creative v5 "The wall and the series" (from design/mockups/v5-creative/creative-v5.css, sections 1-9) ---------- */ /* 21a. WordPress: no flow margins inside the series groups (must stay before the ported rules) */ .wp-block-group:is(.is-style-series-split, .is-style-series-stack, .cv-years) > *, .wp-block-group.cv-side > * { margin-block: 0; } /* ---------- 1. Tokens: section palettes ---------- In WordPress these are theme.json palette colours (slug in brackets); the group's "has--background-color" class switches the text tokens below. */ :root { --sec-y: clamp(3.5rem, 2rem + 5vw, 7.5rem); /* section padding */ --sec-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); /* gap between children */ --sec-col-gap: clamp(1rem, 3vw, 3.5rem); --wall-gap-x: clamp(0.5rem, 0.3rem + 0.8vw, 1.25rem); --wall-gap-y: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); --row-s: clamp(7.5rem, 3.5rem + 12vw, 15rem); /* wall row heights */ --row-m: clamp(8.5rem, 4rem + 15vw, 19rem); --row-l: clamp(10rem, 5rem + 19vw, 25rem); --display: clamp(3rem, 1.6rem + 5.6vw, 7.5rem); /* series titles */ --poster: clamp(3.75rem, 1.2rem + 10.5vw, 11.5rem); /* Grand-mère Kal */ --hero-h1: clamp(2.75rem, 1.2rem + 5.4vw, 6.25rem); } :is(.is-style-series-split, .is-style-series-stack) { --sec-bg: var(--c-paper); background: var(--sec-bg); color: var(--c-ink); --em-color: var(--c-accent); } /* night [night] #0B0B0B: text 16.9:1, muted 9.4:1, accent 7.9:1 */ .has-night-background-color { --sec-bg: #0B0B0B; --c-ink: #EEEAE2; --c-ink-2: #CFC9BE; --c-muted: #B5B0A6; --c-accent: #F08A6E; --c-border: #85817A; --c-hairline: rgba(238, 234, 226, 0.16); --c-focus: #8AB6FF; --c-paper: #0B0B0B; } /* butter [butter] #EFE6C8: text 14.6:1, muted 6.6:1, accent #9A2614 6.3:1 */ .has-butter-background-color { --sec-bg: #EFE6C8; --c-ink: #221D12; --c-ink-2: #3B3424; --c-muted: #5A5032; --c-accent: #9A2614; --c-border: #8C8162; --c-hairline: rgba(34, 29, 18, 0.18); --c-focus: #1F4FA0; --c-paper: #EFE6C8; } /* oxblood [oxblood] #591615 (values from art-panel--oxblood) */ .has-oxblood-background-color { --sec-bg: #591615; --c-ink: #FFF8F4; --c-ink-2: #F0D6CF; --c-muted: #EDC9C0; --c-accent: #FFAD91; --c-border: #D99485; --c-hairline: rgba(255, 248, 244, 0.2); --c-focus: #FFE66F; --c-paper: #591615; } /* vermilion [vermilion] #C2341C: white 4.9:1 (all text white or #FFE3DA at large sizes) */ .has-vermilion-background-color { --sec-bg: #C2341C; --c-ink: #FFFFFF; --c-ink-2: #FFFFFF; --c-muted: #FFE3DA; --c-accent: #FFFFFF; --c-border: #FFD0C2; --c-hairline: rgba(255, 255, 255, 0.3); --c-focus: #FFE66F; --c-paper: #C2341C; } /* sage [sage] #A2BDB4 (values from art-panel--sage) */ .has-sage-background-color { --sec-bg: #A2BDB4; --c-ink: #15251F; --c-ink-2: #293B34; --c-muted: #354B43; --c-accent: #174B3D; --c-border: #546C63; --c-hairline: rgba(21, 37, 31, 0.2); --c-focus: #123E85; --c-paper: #A2BDB4; } /* stone [stone] #E9E5DD (values from art-panel--stone; accent darkened vermilion 6.0:1) */ .has-stone-background-color { --sec-bg: #E9E5DD; --c-ink: #211F1A; --c-ink-2: #39362F; --c-muted: #514E47; --c-accent: #9A2614; --c-border: #777168; --c-hairline: rgba(33, 31, 26, 0.16); --c-focus: #14549B; --c-paper: #E9E5DD; } /* v2 inverted the music drawing; the owner reversed that: paper stays light, no filter. */ .music-grid figure img { filter: none; mix-blend-mode: normal; } /* ---------- 2. Section frame (core/group, styles "Series: split" and "Series: stack") ---------- */ :is(.is-style-series-split, .is-style-series-stack) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sec-col-gap); row-gap: var(--sec-gap); align-items: start; margin: 0; padding-block: var(--sec-y); padding-inline: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter))); } :is(.is-style-series-split, .is-style-series-stack) > * { grid-column: 1 / -1; margin: 0; min-width: 0; } :is(.is-style-series-split, .is-style-series-stack) > p:not([class]) { max-width: 46ch; font-size: var(--step-0); line-height: 1.6; color: var(--c-ink-2); } :is(.is-style-series-split, .is-style-series-stack) a { color: var(--c-ink); } :is(.is-style-series-split, .is-style-series-stack) .go { color: var(--c-ink); text-decoration-color: var(--c-accent); } /* dark mode: unpainted sections and the night hero share the page colour; a hairline keeps them apart */ @media (prefers-color-scheme: dark) { :is(.is-style-series-split, .is-style-series-stack):not(.has-background), .cv-years { border-top: 1px solid var(--c-hairline); } } /* kicker: core/paragraph style "Kicker" (mono, like the archive page's label) */ .is-style-kicker { font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } /* display title: core/heading style "Display" */ .is-style-display { font: var(--display-weight) var(--display)/0.92 var(--font-display); letter-spacing: -0.035em; color: var(--c-ink); text-wrap: balance; } .is-style-display em, .is-style-poster em { font-style: italic; font-weight: 500; color: var(--c-accent); } /* poster title: core/heading style "Poster" */ .is-style-poster { font: 700 var(--poster)/0.84 var(--font-display); letter-spacing: -0.05em; color: var(--c-ink); text-wrap: balance; hyphens: none; } @media (min-width: 64em) { /* Series: split. Text column left (5/12) centred against the first media block (right, 6/12); later blocks full width. Rows: 1fr | text rows | 1fr, so the text sits on the art's centre line. */ .is-style-series-split { grid-template-rows: 1fr auto auto auto auto 1fr; } .is-style-series-split > :is(.is-style-kicker, .wp-block-heading, p, .cv-side) { grid-column: 1 / span 5; } .is-style-series-split > :first-child { align-self: end; } .is-style-series-split > div:first-of-type { grid-column: 7 / -1; grid-row: 1 / span 6; align-self: center; } .is-style-series-split > div:first-of-type ~ div, .is-style-series-split > div:first-of-type ~ .is-style-go { grid-column: 1 / -1; } .is-style-series-split > div:first-of-type ~ div { margin-top: var(--sec-gap); } .is-style-series-split > .wp-block-heading { margin-top: var(--s-2); } /* Series: stack. Title left (7/12), text right on the title's last line, media full width. */ .is-style-series-stack > :is(.is-style-kicker, .wp-block-heading) { grid-column: 1 / span 7; } .is-style-series-stack > :is(p:not(.is-style-kicker):not(.is-style-go), .cv-side) { grid-column: 8 / -1; align-self: end; } .is-style-series-stack > div:not(.cv-side) { margin-top: var(--sec-gap); } } /* fs/artworks inside a section: the section is the panel (no second surface, no double padding) */ :is(.is-style-series-split, .is-style-series-stack) .art-panel { --art-surface: transparent; background: none; padding: 0; color: inherit; } :is(.is-style-series-split, .is-style-series-stack) .art-panel__inner { padding: 0 !important; max-width: none; gap: 0; } :is(.is-style-series-split, .is-style-series-stack) .art-panel__heading { display: none; } @media (max-width: 39.99em) { :is(.is-style-series-split, .is-style-series-stack) .art-block:has(.art-rail) .art-panel__heading { display: flex; margin-bottom: var(--s-3); } } /* lead inside a split section: image then caption (never cropped: max-height + width:auto) */ .is-style-series-split .art-layout--lead { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: start; } .is-style-series-split .art-layout--lead > .art-preview-link { justify-items: start; } .is-style-series-split .art-layout--lead > .art-preview-link img { max-height: min(78vh, 46rem); margin-inline: 0; } .is-style-series-split .art-layout--lead > figcaption { gap: 0.3rem; } .is-style-series-split .art-layout--lead > figcaption .t { font-size: var(--step-1); } .is-style-series-split .art-layout--lead .art-view-larger { min-height: 2.75rem; font-size: 0.8125rem; } :is(.is-style-series-split, .is-style-series-stack) .artwork figcaption { color: var(--c-muted); } :is(.is-style-series-split, .is-style-series-stack) .artwork .t { color: var(--c-ink); } :is(.is-style-series-split, .is-style-series-stack) .artwork q { color: var(--c-ink-2); } /* a hairline keeps white-paper sheets from melting into a light band */ :is(.is-style-series-split, .is-style-series-stack):not(.has-night-background-color):not(.has-oxblood-background-color):not(.has-vermilion-background-color) .art-preview-link img { outline: 1px solid var(--c-hairline); outline-offset: -1px; } /* ---------- 3. Hero: the wall (night) ---------- */ .cv-hero { padding-block: clamp(2.5rem, 1rem + 4vw, 5rem) clamp(3rem, 1.5rem + 4vw, 5.5rem); row-gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); } .cv-hero h1 { font: var(--display-weight) var(--hero-h1)/0.9 var(--font-display); letter-spacing: -0.04em; color: var(--c-ink); max-width: 11ch; margin: 0; } .cv-hero h1 em { font-style: italic; font-weight: 500; color: var(--c-accent); } .cv-side { display: grid; gap: var(--s-4); } .cv-side .is-style-lede { margin: 0; max-width: 36ch; font: var(--title-weight) var(--step-1)/1.4 var(--font-title); letter-spacing: var(--title-track); color: var(--c-ink-2); } .cv-side .is-style-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin: 0; } .go--down::after { -webkit-mask-image: var(--m-down); mask-image: var(--m-down); } @media (min-width: 64em) { .cv-hero > .cv-side { padding-bottom: 0.4rem; } } /* ---------- 4. Wall (fs/artworks layout "wall", sizes S / M / L) ---------- Justified rows: each item grows in proportion to its aspect ratio (--ar = width / height, printed by render.php), so every image in a row gets the same height and its full width. Nothing is cropped: the image is width:100%, height:auto. The last row does not stretch: the ::after spacer absorbs the leftover space. Captions may take two lines; the next row simply starts below the tallest caption, the images of a row stay level. */ .art-wall { --row-h: var(--row-m); display: flex; flex-wrap: wrap; gap: var(--wall-gap-y) var(--wall-gap-x); margin: 0; padding: 0; list-style: none; align-items: flex-start; } .art-wall--s { --row-h: var(--row-s); } .art-wall--l { --row-h: var(--row-l); } .art-wall > li { flex: var(--ar, 0.75) 1 calc(var(--ar, 0.75) * var(--row-h)); min-width: 0; } .art-wall::after { content: ""; flex: 1000 1 0; height: 0; } /* Wide screens: a wall of up to 6 works is usually one row; let it fill the width exactly. */ @media (min-width: 64em) { .art-wall:not(:has(> li:nth-child(7)))::after { content: none; } } .art-wall .artwork { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; } .art-wall img { display: block; width: 100%; height: auto; } .art-wall figcaption { display: flex !important; align-items: baseline; justify-content: space-between; gap: 0.6em; min-width: 0; font: 500 0.8125rem/1.3 var(--font-ui); color: var(--c-muted); } .art-wall figcaption .t { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font: inherit; color: var(--c-ink); text-wrap: pretty; } .art-wall figcaption .art-meta { flex: none; font: 500 0.75rem/1.3 var(--font-mono); color: var(--c-muted); } .art-wall .art-view-larger, .art-columns .art-view-larger, :is(.is-style-series-split, .is-style-series-stack) .art-rail .art-view-larger { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .art-wall .art-preview-link, .art-columns .art-preview-link, :is(.is-style-series-split, .is-style-series-stack) .art-rail .art-preview-link { position: relative; } /* "more" tile: last item of the wall (fs/artworks moreText / moreUrl when layout = wall). It keeps a fixed share of the last row (like a wall label) instead of filling it. */ .art-wall > li.art-wall__more { flex: 0 1 22rem; align-self: stretch; min-height: 9rem; } .art-wall__more a { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2); height: 100%; min-height: 9rem; padding: var(--s-5); border: 1px solid var(--c-border); color: var(--c-ink); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .art-wall__more .k { font: 500 var(--step--2)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .art-wall__more .b { font: var(--title-weight) var(--step-2)/1.05 var(--font-display); letter-spacing: -0.02em; max-width: 14ch; text-wrap: balance; } .art-wall__more .go-arrow { width: 2rem; height: 2rem; background: var(--c-accent); -webkit-mask: var(--m-arrow) center / contain no-repeat; mask: var(--m-arrow) center / contain no-repeat; transition: translate var(--dur) var(--ease); } .art-wall__more a:hover { border-color: var(--c-ink); background: color-mix(in srgb, var(--c-ink) 6%, transparent); } .art-wall__more a:hover .go-arrow { translate: 0.35rem 0; } @media (max-width: 39.99em) { .art-wall { --wall-gap-y: 0.75rem; } .art-wall figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .art-wall .artwork { gap: 0; } .art-wall > li.art-wall__more { flex: 1 1 100%; } .art-wall > li.art-wall__more, .art-wall__more a { min-height: 6rem; } } /* ---------- 5. Columns (fs/artworks layout "columns"): uncropped masonry for studies ---------- */ .art-columns { columns: 4 10rem; column-gap: var(--sec-col-gap); margin: 0; padding: 0; list-style: none; } .art-columns > li { break-inside: avoid; margin: 0 0 var(--s-6); } .art-columns .artwork { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; } .art-columns img { display: block; width: 100%; height: auto; } .art-columns figcaption { display: grid; gap: 0.1rem; min-width: 0; font: 500 0.875rem/1.35 var(--font-ui); } .art-columns figcaption .t { font: 600 0.9375rem/1.3 var(--font-ui); } .art-columns figcaption .art-meta { font: 500 0.75rem/1.3 var(--font-mono); } @media (max-width: 39.99em) { .art-columns { column-gap: 0.75rem; } .art-columns > li { margin-bottom: var(--s-5); } .art-columns figcaption .t { font-size: 0.875rem; } } /* ---------- 6. Strip (fs/artworks layout "rail" inside a series): a comic-strip row ---------- */ :is(.is-style-series-split, .is-style-series-stack) .art-rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--wall-gap-y) var(--wall-gap-x); } :is(.is-style-series-split, .is-style-series-stack) .art-rail .artwork { display: grid; grid-template-columns: minmax(0, 1fr); } :is(.is-style-series-split, .is-style-series-stack) .art-rail figcaption { display: flex; justify-content: space-between; gap: 0.6em; min-width: 0; margin-top: 0.45rem; font: 500 0.8125rem/1.3 var(--font-ui); } :is(.is-style-series-split, .is-style-series-stack) .art-rail figcaption .t { font: inherit; color: var(--c-ink); } :is(.is-style-series-split, .is-style-series-stack) .art-rail figcaption .art-meta { flex: none; font: 500 0.75rem/1.3 var(--font-mono); } @media (max-width: 39.99em) { :is(.is-style-series-split, .is-style-series-stack) .art-rail > li { flex-basis: min(64vw, 16rem); } } /* ---------- 7. Stamp (core/paragraph style "Stamp") ---------- */ .is-style-stamp { display: grid; place-content: center; justify-items: center; gap: 0.1rem; width: 9.5rem; aspect-ratio: 1; margin-top: var(--s-4) !important; padding: 1rem; border: 2px solid var(--c-accent); border-radius: 50%; outline: 1px solid var(--c-accent); outline-offset: -8px; color: var(--c-accent); text-align: center; rotate: -9deg; font: 600 0.6875rem/1.15 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; } .is-style-stamp strong { display: block; font: 700 1.375rem/1 var(--font-display); letter-spacing: -0.01em; text-transform: none; color: var(--c-accent); } /* ---------- 8. Poster (Grand-mère Kal) ---------- */ .cv-poster > p:not([class]) { color: var(--c-ink); font-size: var(--step-1); line-height: 1.45; max-width: 30ch; } .cv-poster .art-layout--lead > .art-preview-link img { max-height: min(84vh, 52rem); box-shadow: 0 1.5rem 3rem -1.5rem rgba(60, 8, 0, 0.55); } .cv-poster .artwork figcaption, .cv-poster .artwork .art-meta { color: var(--c-muted); } @media (min-width: 64em) { .cv-poster > .wp-block-heading { grid-column: 1 / span 6; position: relative; z-index: 1; } .cv-poster > div:first-of-type { grid-column: 7 / -1; } } /* ---------- 9. Index bar, music, early work, years ---------- */ .cv-index { z-index: 30; } .cv-index .filters { margin: 0 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 var(--s-5); padding-inline: 2px; } .cv-index .filters::-webkit-scrollbar { display: none; } .cv-index .filters > li { flex: none; } .cv-index .filters a[aria-current] { color: var(--c-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.4em; } /* music room: the brush-notes sheet is taped in the dark (live fix 2026-10-25) + track numbers */ .music-grid figure { position: relative; isolation: isolate; max-width: 23rem; margin: var(--s-7) 0 0; } .music-grid figure img { width: calc(100% - 1rem); height: auto; margin-inline: 0.5rem; rotate: -1.5deg; outline: 1px solid rgba(0, 0, 0, 0.06); outline-offset: -1px; } .music-grid figure::before { content: ""; position: absolute; z-index: 1; top: -0.75rem; left: 50%; width: 5.5rem; height: 1.5rem; translate: -50% 0; rotate: 2.5deg; background: rgba(228, 216, 190, 0.78); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); pointer-events: none; } .music-grid figcaption { margin-top: var(--s-5); } @media (forced-colors: active) { .music-grid figure::before { display: none; } } .tracks { counter-reset: trk; } .tracks > li { counter-increment: trk; position: relative; } .tracks > li > h3::before { content: counter(trk, decimal-leading-zero); display: inline-block; min-width: 2.25rem; font: 500 0.8125rem/1 var(--font-mono); color: var(--c-on-night-2); vertical-align: 0.2em; } .tracks > li > p { padding-left: 2.25rem; } .tracks > li > .btn { min-width: 6.5rem; } .player-slot iframe { display: block; width: 100%; border: 0; margin-top: var(--s-3); } .player-slot iframe[data-provider="youtube"] { aspect-ratio: 16 / 9; height: auto; } .player-slot iframe[data-provider="soundcloud"] { height: 166px; } .player-slot:empty { display: none; } /* early work: the [fs_video] player reads as a dark screen until it is pressed */ .cv-early .player { position: relative; display: grid; place-content: center; justify-items: center; gap: var(--s-3); aspect-ratio: 16 / 9; margin: 0; padding: var(--s-5); background: #0B0B0B; color: #EEEAE2; outline: 1px solid rgba(238, 234, 226, 0.16); outline-offset: -1px; } .cv-early .player .btn { justify-self: center; min-height: 56px; padding-inline: 1.75em; background: #F08A6E; border-color: #F08A6E; color: #121211; font-size: var(--step-0); } .cv-early .player .btn:hover { background: #F6AA94; border-color: #F6AA94; } .cv-early .player__note { margin: 0; max-width: 36ch; text-align: center; font: 500 var(--step--2)/1.4 var(--font-ui); color: #B5B0A6; } .cv-early .player:has(.player-slot iframe) { padding: 0; display: block; } .cv-early .player:has(.player-slot iframe)::before, .cv-early .player:has(.player-slot iframe) .player__note { display: none; } .cv-early .player-slot { width: 100%; } .cv-early .player-slot iframe { margin: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; } @media (max-width: 39.99em) { .cv-early .player { aspect-ratio: 4 / 3; } } /* by year: ruler stops link to /art/?art_year= ; the whole stop is the target */ .cv-years { background: var(--c-paper-2); padding-block: var(--sec-y); } .cv-years .is-style-kicker { margin-bottom: var(--s-3); } .cv-years .path__title { font-size: var(--display); line-height: 0.92; letter-spacing: -0.035em; max-width: 14ch; } .cv-years .ruler li { position: relative; } .cv-years .ruler .y { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem) !important; } .cv-years .ruler b a { color: var(--c-ink); text-decoration-color: var(--c-accent); } .cv-years .ruler b a::before { content: ""; position: absolute; inset: 0; } .cv-years .ruler li:hover .y, .cv-years .ruler li:focus-within .y { color: var(--c-ink); } .cv-years .ruler li:focus-within { outline: 3px solid var(--c-focus); outline-offset: 4px; } .cv-years .ruler b a:focus-visible { outline: none; } /* 21b. WordPress adaptation of the Creative port */ .is-style-links a { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font: var(--label-weight) var(--label-size)/1.2 var(--label-font); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; } .is-style-links a::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--m-arrow) center / contain no-repeat; mask: var(--m-arrow) center / contain no-repeat; flex: none; } .is-style-links a[href^="#"]::after { -webkit-mask-image: var(--m-down); mask-image: var(--m-down); } .is-style-links a:hover { color: var(--c-accent); } .wp-block-group.cv-years { padding-inline: 0; } .cv-years > .is-style-kicker { padding-inline: var(--pad-wrap); } .cv-years .path { padding-block: 0; } /* ---------- 22. Home v5 "Studio wall" (from design/mockups/v5-home/home-v5.css, mapped to block classes) ---------- */ :root { --v5-pad: clamp(1.25rem, 0.6rem + 2.4vw, 3rem); --v5-gap: clamp(0.75rem, 0.45rem + 0.8vw, 1.25rem); --v5-h1: clamp(2.125rem, 1.2rem + 3vw, 4rem); --v5-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); --v5-stagger: clamp(1.5rem, 0.5rem + 2.5vw, 3rem); --v5-edge: max(var(--gutter), calc((100vw - var(--wrap-wide)) / 2 + var(--gutter))); --m-loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26 16a10 10 0 1 1-3-7.1' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M24.5 3.5v6h-6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E"); } /* 22a. Hero: group style "Studio wall" > group (h1 + roles) + Artworks lead (oxblood field) + Artworks hang */ .wp-block-group.is-style-studio-wall { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "field" "hang"; row-gap: var(--s-6); padding-top: var(--v5-pad); } .wp-block-group.is-style-studio-wall > *, .is-style-studio-wall > .wp-block-group > * { margin-block: 0; min-width: 0; } .is-style-studio-wall > .wp-block-group { grid-area: text; display: grid; gap: var(--s-5); align-content: start; padding-inline: var(--gutter); } .is-style-studio-wall h1 { max-width: 19ch; font-size: var(--v5-h1); line-height: 0.98; letter-spacing: -0.03em; } .is-style-studio-wall .roles { max-width: 52rem; gap: var(--s-2) var(--s-6); } .is-style-studio-wall .roles li { font-size: var(--step--1); line-height: 1.35; } .is-style-studio-wall > .art-block--lead { grid-area: field; display: grid; } .is-style-studio-wall > .art-block--lead > .art-panel { display: grid; place-items: center; padding: var(--s-6) var(--gutter) var(--s-4); } .is-style-studio-wall > .art-block--lead .art-panel__inner { display: block; width: auto; max-width: 100%; padding: 0; } .is-style-studio-wall .art-layout--lead { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-items: start; gap: var(--s-3); width: fit-content; max-width: 100%; margin: 0 auto; } .is-style-studio-wall .art-layout--lead > .art-preview-link { position: relative; justify-items: center; } .is-style-studio-wall .art-layout--lead > .art-preview-link img { width: auto; max-width: 100%; height: auto; max-height: 72svh; margin: 0; } .is-style-studio-wall .art-layout--lead > figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-4); width: 100%; font: 500 var(--step--1)/1.4 var(--font-ui); color: var(--art-muted); } .is-style-studio-wall .art-layout--lead > figcaption .t { flex: 1 1 100%; font: 600 var(--step-0)/1.3 var(--font-ui); letter-spacing: -0.005em; color: var(--art-ink); } .is-style-studio-wall .art-layout--lead .art-source-link { min-height: 44px; margin: 0; color: var(--art-ink); text-decoration-color: var(--art-accent); } .is-style-studio-wall > .art-block--hang { grid-area: hang; } .is-style-studio-wall > .art-block--hang .art-panel { --art-surface: transparent; background: none; padding: 0; } .is-style-studio-wall > .art-block--hang .art-panel__inner { display: grid; gap: var(--s-4); max-width: none; padding-inline: var(--gutter); } /* 22b. Artworks layout "Hang": works at their real proportions, hung from one rail (top-aligned). --ar = width / height, printed by the block. */ .art-hang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--v5-gap); align-items: start; margin: 0; padding: 0; list-style: none; } .art-hang > li { min-width: 0; } .art-hang .artwork img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px var(--c-hairline); } .art-hang .art-preview-link, .art-strip .art-preview-link { position: relative; } .art-hang .art-view-larger, .art-strip .art-view-larger, .is-style-studio-wall .art-view-larger { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .art-hang figcaption, .art-strip figcaption { display: flex; flex-wrap: wrap; gap: 0 0.5em; margin-top: var(--s-2); font: 500 var(--step--2)/1.35 var(--font-ui); color: var(--art-muted, var(--c-muted)); } .art-hang .t, .art-strip .t { font: 600 var(--step--2)/1.35 var(--font-ui); letter-spacing: 0; color: var(--art-ink, var(--c-ink)); } .art-hang__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); } .art-shuffle { display: inline-flex; align-items: center; gap: 0.55em; min-height: 44px; padding: 0 1.05em 0 0.85em; border: 1px solid var(--c-ink); border-radius: var(--r); background: transparent; color: var(--c-ink); font: 600 var(--step--1)/1 var(--font-ui); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .art-shuffle[hidden] { display: none; } .art-shuffle svg { flex: none; } .art-shuffle:hover { background: var(--c-ink); color: var(--c-paper); } @media (min-width: 40em) { .art-hang { display: flex; align-items: flex-start; gap: var(--v5-gap); } .art-hang > li { flex: var(--ar, 0.75) 1 0; } } @media (min-width: 64em) { .wp-block-group.is-style-studio-wall { grid-template-columns: minmax(0, 1fr) minmax(24rem, 38%); grid-template-rows: auto 1fr; grid-template-areas: "text field" "hang field"; column-gap: clamp(2rem, 1rem + 2.5vw, 4rem); row-gap: var(--s-6); min-height: calc(100svh - var(--header-h)); padding-top: 0; } .is-style-studio-wall > .wp-block-group { padding: var(--v5-pad) 0 0 var(--v5-edge); } .is-style-studio-wall > .art-block--hang { align-self: end; } .is-style-studio-wall > .art-block--hang .art-panel__inner { gap: var(--s-3); padding: 0 0 var(--s-5) var(--v5-edge); } .is-style-studio-wall > .art-block--lead > .art-panel { padding: var(--v5-pad) var(--gutter); align-content: center; } .is-style-studio-wall .art-layout--lead > .art-preview-link img { max-height: calc(100svh - var(--header-h) - 2 * var(--v5-pad) - 4.5rem); } } @media (min-width: 64em) and (max-height: 52em) { .wp-block-group.is-style-studio-wall { --v5-h1: clamp(2.125rem, 0.9rem + 2.7vw, 3.25rem); } .is-style-studio-wall > .wp-block-group { gap: var(--s-4); padding-top: var(--s-6); } } /* 22c. Artworks layout "Strip" (From the sketchbook): height-led rail on phones; one justified, staggered row on wide screens */ .art-block--strip > .art-panel { padding-block: clamp(3rem, 2rem + 4vw, 6rem); } .art-block--strip .art-panel__inner { gap: 0; } .art-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-6); margin-bottom: var(--s-6); } .art-panel__head h2 { margin: 0; font-size: var(--v5-h2); color: var(--art-ink, var(--c-ink)); } .art-panel__head .art-field-label { margin: 0; } .art-strip { display: flex; gap: var(--v5-gap); margin: 0; padding: 0 0 var(--s-3); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; } .art-strip > li { flex: 0 0 auto; scroll-snap-align: start; } .art-strip .artwork img { display: block; width: auto; height: clamp(15rem, 62vw, 22rem); max-width: none; } .art-strip:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; } .art-panel__more { margin: var(--s-5) 0 0; } @media (min-width: 64em) { .art-strip { overflow: visible; align-items: flex-start; } .art-strip > li { flex: var(--ar, 0.75) 1 0; min-width: 0; } .art-strip--stagger { padding-bottom: var(--v5-stagger); } .art-strip--stagger > li:nth-child(even) { margin-top: var(--v5-stagger); margin-bottom: calc(-1 * var(--v5-stagger)); } .art-strip .artwork img { width: 100%; height: auto; max-width: 100%; } } @media (prefers-color-scheme: dark) { .art-block--strip > .art-panel--lilac { --art-surface: #221D27; --art-ink: #F1ECF4; --art-muted: #C7BDCD; --art-accent: #D9B8EA; --c-ink: #F1ECF4; --c-ink-2: #DDD4E2; --c-muted: #C7BDCD; --c-accent: #D9B8EA; --c-border: #8F8597; --c-focus: #8AB6FF; } } /* 22d. The trail on the home page, the loop line (paragraph style "Loop") and its link */ .home .path { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } .home .path__title { font-size: var(--v5-h2); max-width: 20ch; margin-bottom: var(--s-6); } .home .path .ruler { margin-bottom: var(--s-6); } .path:has(+ p.is-style-loop) { padding-bottom: 0; } p.is-style-loop { position: relative; max-width: 50rem; margin: 0 var(--gutter) 0 var(--pad-wrap); padding-left: calc(2rem + var(--s-4)); font: 400 var(--step-0)/1.55 var(--font-text); color: var(--c-ink-2); } p.is-style-loop strong { font-weight: 600; color: var(--c-ink); } p.is-style-loop::before { content: ""; position: absolute; left: 0; top: 0.05rem; width: 2rem; height: 2rem; background: var(--c-accent); -webkit-mask: var(--m-loop) center / contain no-repeat; mask: var(--m-loop) center / contain no-repeat; } p.is-style-loop + p.is-style-go { margin: 0; padding: var(--s-5) var(--pad-wrap) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } /* 22e. Research strip (group style "Research strip") + list style "Publications": Bold year, linked title, Italic kind */ .wp-block-group.is-style-research-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); padding: clamp(2.5rem, 1.5rem + 3.5vw, 5rem) var(--pad-wrap); background: var(--c-paper-2); } .wp-block-group.is-style-research-strip > * { margin-block: 0; } .is-style-research-strip > :is(h2, .is-style-go) { align-self: last baseline; } .is-style-research-strip > h2 { font-size: var(--v5-h2); } .is-style-research-strip > .wp-block-list { grid-column: 1 / -1; } ul.is-style-publications { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--c-ink); } .is-style-publications > li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; padding-block: var(--s-4); border-bottom: 1px solid var(--c-hairline); } .is-style-publications > li > strong { grid-row: 1 / span 2; font: 500 var(--step--1)/1.6 var(--font-mono); color: var(--c-muted); font-variant-numeric: tabular-nums; } .is-style-publications > li > a { font: 600 var(--step-1)/1.25 var(--font-ui); letter-spacing: -0.01em; text-wrap: balance; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; } .is-style-publications > li > em { font: 400 var(--step--1)/1.4 var(--font-ui); font-style: normal; color: var(--c-ink-2); } @media (min-width: 48em) { .is-style-publications > li { grid-template-columns: 6rem minmax(0, 1fr) minmax(10rem, 16rem); align-items: baseline; column-gap: var(--s-6); } .is-style-publications > li > strong { grid-row: auto; } .is-style-publications > li > em { justify-self: end; text-align: right; } .is-style-publications > li:first-child > a { font-size: var(--step-2); line-height: 1.12; } } /* 22f. Listen band: tracks in rows, a Play link on a row with a player, the band photo (fs/listen photo fields) */ .listen__grid { display: grid; gap: var(--s-7); } .listen .more-tracks li { align-items: center; } .more-tracks li > span:nth-child(2) { color: var(--c-on-night-2); } .more-tracks .btn { justify-self: start; min-height: 44px; padding: 0 0.95em; gap: 0.45em; border-color: var(--c-night-accent); background: transparent; color: var(--c-night-accent); font-size: var(--step--2); } .more-tracks .btn .tri { width: 0.85em; height: 0.85em; } .more-tracks .btn:hover { background: var(--c-night-accent); border-color: var(--c-night-accent); color: #121211; } .more-tracks li > .player-slot { flex: 1 1 100%; grid-column: 1 / -1; } .listen .go { color: var(--c-on-night); text-decoration-color: var(--c-night-accent); } .listen__main > p:last-child { margin: var(--s-5) 0 0; } .listen__photo { justify-self: start; width: min(100%, 22rem); margin: 0; } .listen__photo img { display: block; width: 100%; height: auto; } .listen__photo figcaption { display: flex; flex-wrap: wrap; gap: 0 0.6em; margin-top: var(--s-2); font: 500 var(--step--2)/1.35 var(--font-ui); color: var(--c-on-night-2); } .listen__photo .t { font-weight: 600; color: var(--c-on-night); } @media (min-width: 64em) { .listen__grid { grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); column-gap: var(--s-9); align-items: center; } .listen__photo { justify-self: end; } .listen--compact .more-tracks { grid-template-columns: minmax(0, 1fr); } .listen .more-tracks li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; column-gap: var(--s-5); min-height: 3.5rem; } .listen .more-tracks li > span:nth-child(2) { justify-self: start; } } /* ---------- 23. Drawings (/art/): hover and focus as in the explore prototype (CSS only; the fs-feeds markup is unchanged) ---------- */ .fsg-work .art-preview-link img { transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), opacity 0.35s ease; } .fsg-work .art-preview-link:is(:hover, :focus-visible) img { transform: translateY(-4px); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.55); } .fsg-work:has(.art-preview-link:is(:hover, :focus-visible)) .t { color: var(--c-accent); } @media (hover: hover) { .fsg-wall:has(.art-preview-link:hover) .fsg-work:not(:has(.art-preview-link:hover)) img { opacity: 0.66; } } /* 24. Wave 4 fix: caption text in the dark listen band stays light in light mode too (contrast) */ .listen__photo figcaption > *, .listen__photo figcaption .art-meta { color: var(--c-on-night-2); } .listen__photo figcaption > .t { color: var(--c-on-night); }