/* ============================================================
ALINA SZAPOCZNIKOW — Estate website wireframe
Monospaced, minimalist, low-fi structural wireframe
============================================================ */
/* ---------- FR-9 · brand type pairing (PRD §9.4) ----------
Mercure = titles + running body text (--display / --body)
Riforma Mono LL = all UI + secondary/numeric (--ui / --mono)
IBM Plex Mono placeholder retired. Fonts served locally from assets/fonts/. */
@font-face {
font-family: "Mercure";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/Mercure-Regular.woff2") format("woff2"),
url("assets/fonts/Mercure-Regular.woff") format("woff");
}
/* No real Mercure italic web cut is available yet. We deliberately do NOT declare an
italic @font-face, so `font-style: italic` (font-synthesis: style) obliques the
Regular face — used on original work titles. Replace with the true italic cut when
Loevenbruck/Balland deliver it (add an @font-face with font-style: italic). */
@font-face {
font-family: "Riforma Mono LL";
font-style: normal;
font-weight: 400;
font-display: swap;
/* woff2 = subset (progressive enhancement) first; woff = full Latin charset
(é, œ, ×) as the fallback for engines without woff2 support. */
src: url("assets/fonts/RiformaMonoLL-Regular.woff2") format("woff2"),
url("assets/fonts/RiformaMonoLL-Regular.woff") format("woff");
}
:root {
--bg: #faf9f7; /* warm off-white, archival paper */
--ink: #1a1a1a; /* near-black */
--mut: #8a8780; /* muted grey text */
--rule: #d9d6cf; /* hairline dividers */
--ph: #efece6; /* placeholder fill */
--ph-line: #d2cec5; /* placeholder hatch line */
--ph-ink: #9a958b; /* placeholder label */
--accent: #4f5b8c; /* wireframe annotation / interactive hint */
--hover: #3a3a3a;
--wash: color-mix(in srgb, var(--ink) 4%, var(--bg)); /* rollover wash, shared by all clickable lists */
--measure: 66ch;
--side: clamp(24px, 4vw, 56px); /* full-bleed side margin, shared with the facing-streams home */
--gap: clamp(72px, 11vh, 150px);
/* FLUID TYPE (2026-07-29). --fs-display was already viewport-relative; body + meta were
hard-fixed at 0.95/0.78rem, tuned for a ~1440px laptop. Once the lists went full-bleed
(10px edges) that read genuinely small on a large display: 15.2px text stretched across
a 2560px screen, ~35 rows in view at once.
v79 tried to protect the laptop by pinning the floor at 1440px — wrong call: on a
Retina iMac the CSS viewport is often ≤1440, so the clamp sat on its minimum and the
site still read as "the MacBook version" (Seba, twice). The floor is now RAISED and
growth starts earlier, so every width gets a lift:
1024px → 16.0px 1440px → 16.9px 1920px → 18.0px ≥2200px → 18.56px
Three knobs: the min (baseline everywhere), the vw term (how fast it grows), the max
(ceiling on huge displays). --fs-display was already fluid and is untouched. */
--fs-display: clamp(2.2rem, 5.5vw, 4.4rem);
--fs-body: clamp(1.00rem, 0.86rem + 0.22vw, 1.16rem);
--fs-meta: clamp(0.82rem, 0.72rem + 0.14vw, 0.92rem);
/* the tools in a page's or section's bar (Liste / Galerie, the order, the type): a step under the
bar's title, which the mono's width made them outweigh at --fs-meta (Seba 04.10) */
--fs-tool: clamp(0.72rem, 0.66rem + 0.1vw, 0.8rem);
/* FR-9 type tokens (PRD §9.4) */
--display: "Mercure", "Times New Roman", Georgia, serif; /* titles */
--body: "Mercure", Georgia, serif; /* running text */
--ui: "Riforma Mono LL", ui-monospace, "SF Mono", Menlo, monospace; /* UI + secondary/numeric */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--body); /* running body text = Mercure */
font-weight: 400;
font-size: var(--fs-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hover); }
img { max-width: 100%; display: block; }
/* a raised ordinal (richTitle's XXVe) no longer makes its line taller: on a phone the
first line of "XXVe Salon de la jeune Sculpture…" (ex-2140) grew by 6px, so the second line began
just below the ✕ and ran under it instead of wrapping beside it (verify/records.js, 06.10) */
sup { line-height: 0; }
/* ---------- layout primitives ---------- */
/* full-bleed: every page module hangs from the same --side edge
(matches the facing-streams home); inner max-widths cap line length */
.wrap { margin: 0; padding: 0 var(--side); }
.section{ padding-block: var(--gap); }
section[id], [id].section { scroll-margin-top: 64px; }
.measure{ max-width: var(--measure); }
/* ---------- type ---------- */
.display {
font-weight: 300;
font-size: var(--fs-display);
line-height: 1.05;
letter-spacing: 0.02em;
margin: 0;
}
/* secondary/meta style: Riforma Mono, caps, letter-spaced — never italic */
.meta { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); letter-spacing: .02em; line-height: 1.55; }
.body { font-family: var(--body); font-size: var(--fs-body); line-height: 1.7; text-wrap: pretty; }
/* Biographie heading (client, 2026-09-05) */
.bio-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.6rem);
line-height: 1.15; margin: 0 0 clamp(18px,2.4vw,28px); text-wrap: balance; }
/* Hyphenation on every long reading text (client, 2026-09-05: "césures"). The browser hyphenates
per , which the FR/EN toggle already updates, so each language breaks by its own
rules. limit-chars 7 3 3 = only words of 7+ letters, at least 3 letters on each side. */
.body, .xdesc, .lz-yr p {
-webkit-hyphens: auto; hyphens: auto;
-webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
hyphenate-limit-chars: 7 3 3;
}
.dim { color: var(--mut); }
/* ---------- the arrow link ("Toute la chronologie →") ---------- */
.link-arrow {
color: var(--accent);
font-weight: 500;
letter-spacing: 0.02em;
border-bottom: 1px solid transparent;
}
.link-arrow:hover { border-bottom-color: var(--accent); color: var(--accent); }
/* ---------- top bar ---------- */
/* THE BAR STEPS ASIDE (Seba 04.10, after Mousse Magazine): scrolling down, it slides up out of the
screen and the page's own bar takes the top (the page's title and tools, expo-index.css
.xpagebar; on the home the section's bar, home.css); scrolling up, it comes back and the page's
bar sits under it again. body.bar-hide (tweaks-apply.js). --bar-under: where the page's bars
stick, under the site's bar or at the top while it is away. (--bar-top is home.js's, another
thing: the room above the bar for the phone menu.) */
:root { --bar-under: var(--topbar-h, 53px); }
body.bar-hide { --bar-under: 0px; }
body.bar-hide .topbar { top: calc(-1 * var(--topbar-h, 53px) - 1px); }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }
.topbar {
position: sticky; top: 0; z-index: 40;
transition: top .4s cubic-bezier(.19, 1, .22, 1);
display: flex; align-items: center; justify-content: flex-start;
gap: clamp(16px, 3vw, 40px);
/* The brand must sit on the SAME left axis as the content. Everything below the nav is
full-bleed at 10px (.xsheet, the .hz-down section bars, the list rows), but the topbar
still used var(--side) — measured 56px vs 10px, so the site title looked indented by
46px against every heading under it (Seba). */
padding: 14px 10px;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--rule);
font-family: var(--ui);
font-size: var(--fs-meta);
letter-spacing: 0.08em;
}
/* The site title in the display face (meeting 1 Oct, v104), the face of the home's cover name.
On the home it drops into place once the cover has gone (home.css .title-wait). */
.topbar .crumb { font-family: var(--display); letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0;
font-size: clamp(0.86rem, 0.74rem + 0.3vw, 1.1rem); line-height: 1.2; color: var(--ink); }
.topbar .lang { flex-shrink: 0; margin-left: auto; }
/* ---------- top nav links ---------- */
.topnav {
display: flex;
align-items: center;
gap: clamp(12px, 1.8vw, 26px);
overflow-x: auto;
scrollbar-width: none;
flex: 0 1 auto;
justify-content: center;
min-width: 0;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
position: relative;
white-space: nowrap;
letter-spacing: .02em;
font-family: var(--ui);
font-size: var(--fs-meta);
color: var(--mut);
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color .18s, border-color .18s;
}
.topnav a:hover { color: var(--ink); }
.topnav a.active { color: var(--ink); border-bottom-color: var(--ink); } /* in ink and underlined, never bold (see NO FAKED BOLD) */
@media (max-width: 1280px) { .topnav { gap: 12px; } }
/* THE MENU IN THE MIDDLE (Seba 04.10): the site title on the left, the menu centred on the screen,
FR/EN on the right, wherever the menu is shown (above 1024px; below, it is behind the button).
Three columns, the outer two of equal share: the menu stays dead-centre while the title fits in
its half, and where it does not, the title's column grows and pushes the menu right rather
than run under it. Until 04.10 (v104) the title took the centre from 1750px and the menu sat on
the left. */
@media (min-width: 1025px) {
.topbar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
.topbar .crumb { justify-self: start; }
.topbar .topnav { justify-self: center; }
.topbar .lang { justify-self: end; margin-left: 0; }
}
@media (max-width: 860px) {
.topnav { justify-content: flex-start; }
}
/* the whole title + FR/EN + menu button on the smallest phones: at 320px they overran the screen
by 8px with the 16px gaps (measured 02.10); 10px gaps leave 4px to spare */
@media (max-width: 340px) { .topbar { gap: 10px; } }
/* ---------- lang toggle ---------- */
.lang { display: inline-flex; gap: 6px; letter-spacing: 0.05em; font-family: var(--ui); font-size: var(--fs-meta); }
.lang button {
font: inherit; font-size: var(--fs-meta); background: none; border: 0; cursor: pointer;
color: var(--mut); padding: 0; letter-spacing: 0.05em;
}
.lang button.on { color: var(--ink); } /* the language on in ink, the other muted; never bold */
.lang .sep { color: var(--rule); }
/* ---------- the phone menu: a word, "Menu" / "Fermer" (Seba 04.10: the three lines went) ---------- */
.nav-toggle { display: none; flex-shrink: 0; margin: 0; padding: 4px 0; background: none; border: 0; cursor: pointer;
font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .05em; color: var(--ink); }
.nav-toggle:hover, .nav-toggle:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1024px) {
.nav-toggle { display: block; }
.topbar .crumb { margin-right: auto; } /* push the menu button to the right */
/* FR / EN, moved into the menu here (tweaks-apply.js): its last line, at the links' size */
.topbar .topnav .lang { margin: 0; padding: 14px 2px 4px; gap: 10px; font-size: 0.98rem; }
.topbar .topnav .lang button { font-size: 0.98rem; }
.topbar .topnav {
display: none;
position: fixed; top: var(--topbar-h, 52px); left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--bg); border-bottom: 1px solid var(--rule);
padding: 4px var(--side) 12px; z-index: 39;
max-height: calc(100dvh - var(--topbar-h, 52px)); overflow-y: auto;
box-shadow: 0 14px 26px rgba(0,0,0,0.10);
}
body.nav-open .topbar .topnav { display: flex; }
.topbar .topnav a { padding: 14px 2px; border-bottom: 1px solid var(--rule); font-size: 0.98rem; letter-spacing: 0.02em; }
.topbar .topnav a:last-child { border-bottom: 0; }
}
/* (Until 04.10 the bar also folded its menu behind the button wherever a page's tool crowded it,
.compact, wider than 1024px included; the tools moved to the page's bar, so only the width above
decides.) */
/* NO FAKED BOLD (Seba 04.10): Mercure and Riforma Mono are loaded in their regular weight only, so
any bold the browser draws is a smeared fake. No rule here asks for one, and the CMS's own /
(a record's text: "Sur inscription :") stay regular wherever they land. Emphasis is ink
and, for a chosen option, an underline. */
b, strong { font-weight: 400; }
/* ---------- footer ---------- */
.foot-block { margin-bottom: 30px; }
.foot-block .ft-label { font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .02em; color: var(--mut); margin-bottom: 10px; }
/* ============ CHRONOLOGIE: the year rail ============ */
.year-nav {
position: sticky; top: 53px; z-index: 30;
font-family: var(--ui);
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(6px);
border-block: 1px solid var(--rule);
margin-bottom: 0;
}
.year-nav .ynav-inner {
display: flex; gap: 0; overflow-x: auto; padding: 12px clamp(20px,5vw,64px);
scrollbar-width: thin;
}
.year-nav a {
flex: 0 0 auto; font-size: var(--fs-meta); color: var(--mut);
padding: 4px 10px; letter-spacing: 0.04em; white-space: nowrap;
border-right: 1px solid var(--rule); cursor: pointer;
}
.year-nav a:first-child { padding-left: 0; }
.year-nav a:last-child { border-right: 0; }
.year-nav a.on { color: var(--ink); } /* the year being read in ink, never bold */
/* the FR-9 swap-point (PRD §9.4): the Ludovic Balland display cut, not yet delivered, goes in front
of --display in :root at the top; every title already reads --display */
.display { font-family: var(--display); }
/* reduced motion: no smooth scrolling (audit P2-3) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ============================================================
Client retours 2026-07-21 (pg 2): "utiliser le moins possible les capitales —
privilégier les bas de casse, surtout pour les mentions et textes à lire."
Lowercase the reading / mention / meta / label layer. Page titles
(.subhead .display), section labels (.label), the top nav and the image
placeholder chrome deliberately keep their caps. text-transform:none reveals
the underlying proper-case content (venues, credits, country codes stay correct).
============================================================ */
.meta,
.foot-block .ft-label {
text-transform: none;
letter-spacing: 0.01em;
}
/* Biographie: a centred prose column (Seba's draft). Its portrait went at v105: the home's cover
is that photograph (credit in the colophon). Full width on small screens. */
@media (min-width: 700px) {
#biographie .measure { max-width: 54ch; margin-left: auto; margin-right: auto; }
}
/* ---- ACTUALITÉS QUICK ACCESS (meeting 1 Oct, v112; built by tweaks-apply.js) ----
"Actualités (n)" at the bottom right, on the site's 10px edge; its list opens above it, in the
paper, hairline and shadow of the bar's type menu. Hidden — faded, not removed — over an open
record or the phone menu; on the home until the bar has docked (on the first screen the bar is
at the bottom) and while its Actualités list is in view. --qa-lift: the Chronologie's rail. */
.qa { position: fixed; right: 10px; bottom: calc(14px + var(--qa-lift, 0px)); z-index: 19; /* under a list's floating preview (36) — it covered the end of the text being read (review 03.10) */
font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .05em;
transition: opacity .2s ease, visibility .2s ease; }
.qa[hidden], .qa-panel[hidden] { display: none; }
body.xopen .qa,
body.nav-open .qa,
body:not(.bar-docked) .qa.qa-home,
.qa.qa-stage {
opacity: 0; visibility: hidden; pointer-events: none; }
.qa-btn { font: inherit; letter-spacing: inherit; color: var(--ink); cursor: pointer; padding: 8px 14px;
background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
border: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(26,26,26,.10); }
.qa-btn:hover, .qa-btn[aria-expanded="true"] { background: var(--bg); border-color: var(--mut); }
.qa-panel { position: absolute; right: 0; bottom: calc(100% + 8px); box-sizing: border-box;
width: min(480px, calc(100vw - 20px)); /* was 340px: wider with the images (Seba 04.10) */
/* it fits between the bars at the top and its button (Seba 04.10: it ran over the page's bar, its
tools included, measured only against the site's bar, which may also be away): what the site's
bar (--bar-under: 0 while it has stepped aside) and the page's or section's bar (--xbar2) take,
then the button (14px + 41px + the 8px gap) and 12px of air. Scrolled inside, it never scrolls
the page behind it. */
max-height: calc(100vh - var(--bar-under, 53px) - var(--xbar2, 0px) - 76px - var(--qa-lift, 0px));
max-height: calc(100svh - var(--bar-under, 53px) - var(--xbar2, 0px) - 76px - var(--qa-lift, 0px));
overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
padding: 12px 16px 14px; background: var(--bg); border: 1px solid var(--rule);
box-shadow: 0 10px 30px rgba(26,26,26,.10); }
.qa-h { margin: 4px 0 8px; color: var(--mut); }
.qa-panel ul { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--rule); }
.qa-panel li { border-bottom: 1px solid var(--rule); }
/* an item: its image on the left, whole and centred in a 4:3 frame in the middle of the item's
height, as every list's rows (expo-index.css .xstd .xthumb); dates, title, place beside it */
.qa-panel li a { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start;
padding: 8px 4px; color: var(--ink); text-decoration: none; transition: background-color .16s ease; }
.qa-panel li a:hover, .qa-panel li a:focus-visible { background: var(--wash); }
.qa-img { grid-column: 1; grid-row: 1 / span 3; align-self: center; display: block; aspect-ratio: 4 / 3; }
.qa-img img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.qa-none { background: #fff; } /* no image: a white frame, as the lists' (Seba 04.10) */
.qa-d, .qa-t, .qa-p { grid-column: 2; }
.qa-d, .qa-p { color: var(--mut); letter-spacing: .02em; }
.qa-t { font-family: var(--body); font-size: .95rem; letter-spacing: 0; line-height: 1.3; }
@media (max-width: 480px) { .qa-panel li a { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; } }
.qa-all { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .qa { transition: none; } }
/* in the Chronologie's year rail (desktop): part of the rail, so no shadow, a little slimmer */
.qa.qa-rail { z-index: 31; } /* in the Chronologie's rail (30) */
.qa.qa-open { z-index: 60; } /* its list open: above the page (wins over the two above) */
.qa.qa-rail .qa-btn { padding: 5px 12px; box-shadow: none; background: var(--bg); }
.qa.qa-rail .qa-panel { bottom: calc(100% + 20px); } /* its list opens above the rail, not over its edge */
@media print { .qa { display: none !important; } } /* fixed, it was stamped on every printed page */