/* ============================================================
Atelier Missor — Museum / Gallery
Showcase typographique, palette pierre + or
============================================================ */
/* Fonts loaded via + in HTML
(faster than @import which is render-blocking). */
:root {
/* LIGHT theme — pierre + or + encre */
--paper: #f5f1ea;
--paper-2: #ebe5d8;
--ink: #1c1a16;
--ink-2: #3a352c;
--mute: #6b665c;
--rule: #d4cdbc;
--gold: #b08d3a;
--gold-deep: #8a6d28;
--block-dark-bg:#1c1a16;
--block-dark-fg:#f5f1ea;
--header-bg: rgba(245, 241, 234, 0.92);
/* Toujours clair, peu importe le thème — pour le texte par-dessus une image hero */
--on-image: #f5f1ea;
--on-image-mute: rgba(245, 241, 234, 0.7);
--max: 1480px;
--measure: 62ch;
--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--body: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color-scheme: light;
}
/* DARK theme — atelier la nuit, forge en travail */
:root[data-theme="dark"] {
--paper: #0e0c08;
--paper-2: #181410;
--ink: #ede4cd;
--ink-2: #c8bd9f;
--mute: #8a8270;
--rule: #2e2820;
--gold: #c8a23f;
--gold-deep: #d4ad48;
--block-dark-bg:#1a1610;
--block-dark-fg:#ede4cd;
--header-bg: rgba(14, 12, 8, 0.88);
--on-image: #f5f1ea;
--on-image-mute: rgba(245, 241, 234, 0.7);
color-scheme: dark;
}
/* Toggle thème lui-même : transitions douces */
html { transition: background 0.4s, color 0.4s; }
body, .site-header, footer.site-footer, section.block, .pull-quote {
transition: background 0.4s, color 0.4s, border-color 0.4s;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
/* Réserve l'espace du scrollbar pour que 100vw == largeur visible
(sinon les bleed-figure videos voient leur bord droit caché sous le scrollbar) */
scrollbar-gutter: stable;
}
body {
font-family: var(--body);
font-size: 18px;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gold); color: var(--paper); }
/* ---------- Typography ---------- */
h1, h2, h3, h4, .display {
font-family: var(--serif);
font-weight: 400;
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 300; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 400; margin: 0 0 1.5rem; }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; margin: 2rem 0 0.75rem; }
h4 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; font-weight: 600; }
p { margin: 0 0 1.2rem; max-width: var(--measure); }
p.lead { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.55; color: var(--ink-2); font-weight: 300; font-family: var(--serif); }
a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--gold);
transition: color 0.2s, border-color 0.2s;
}
a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
strong { font-weight: 600; }
em { font-style: italic; }
.eyebrow {
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
}
.muted {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--mute);
letter-spacing: 0.04em;
}
.divider {
border: none;
border-top: 1px solid var(--rule);
margin: 4rem 0;
}
blockquote {
margin: 3rem 0;
padding: 0;
font-family: var(--serif);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
line-height: 1.25;
font-style: italic;
font-weight: 300;
color: var(--ink);
max-width: 28ch;
}
blockquote::before { content: "\201C"; display: block; font-size: 4rem; line-height: 0.6; color: var(--gold); margin-bottom: 1rem; }
blockquote cite {
display: block;
margin-top: 1.5rem;
font-family: var(--sans);
font-style: normal;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
}
ul, ol { margin: 0 0 1.2rem 1.5rem; max-width: var(--measure); }
li { margin-bottom: 0.4rem; }
/* ---------- Layout ---------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 2.5rem; }
.narrow { max-width: 880px; margin: 0 auto; padding: 0 2.5rem; }
.bleed { width: 100%; }
@media (max-width: 720px) {
.container, .narrow { padding: 0 1.25rem; }
}
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--header-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rule);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
gap: 2rem;
}
.brand {
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 500;
color: var(--ink);
border-bottom: none;
letter-spacing: 0.02em;
line-height: 1;
}
.brand:hover { color: var(--gold-deep); }
.brand small {
display: block;
margin-top: 4px;
font-family: var(--sans);
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.3em;
color: var(--mute);
text-transform: uppercase;
}
.nav {
display: flex;
align-items: center;
gap: 2.2rem;
}
.nav a {
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2);
font-weight: 400;
border-bottom: none;
padding-bottom: 4px;
border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a.active { color: var(--ink); border-bottom-color: var(--gold); }
.lang-toggle {
display: flex;
gap: 0.5rem;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
}
.lang-toggle a {
border-bottom: none;
color: var(--mute);
padding: 0 0.25rem;
}
.lang-toggle a.active { color: var(--ink); }
.lang-toggle .sep { color: var(--rule); }
/* Theme toggle button (injecté par JS dans la nav) */
.theme-toggle {
background: none;
border: none;
color: var(--mute);
cursor: pointer;
padding: 0 0.25rem;
margin-left: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle:hover { color: var(--gold); }
.theme-toggle svg { width: 16px; height: 16px; }
/* Affiche le bon icône selon le thème actif */
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
font-size: 1.4rem;
color: var(--ink);
}
@media (max-width: 1024px) {
.nav { gap: 1.5rem; }
.nav a { font-size: 0.72rem; letter-spacing: 0.14em; }
}
@media (max-width: 820px) {
.nav-toggle { display: block; }
.nav {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
background: var(--paper);
border-bottom: 1px solid var(--rule);
flex-direction: column;
padding: 2rem;
gap: 1.2rem;
align-items: flex-start;
}
.nav.open { display: flex; }
.site-header .container { padding-top: 1rem; padding-bottom: 1rem; }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--paper-2);
}
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-bg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(28, 26, 22, 0.62) 0%, rgba(28, 26, 22, 0.15) 50%, transparent 100%);
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
padding-bottom: 5rem;
padding-top: 8rem;
color: var(--on-image);
}
.hero .eyebrow { color: var(--on-image); opacity: 0.85; }
.hero h1 { color: var(--on-image); margin: 1.5rem 0 1.5rem; max-width: 18ch; }
.hero p.lead { color: var(--on-image); opacity: 0.92; max-width: 50ch; }
.hero-scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--on-image);
opacity: 0.7;
border-bottom: none;
}
.hero-scroll::after { content: "↓"; display: block; margin: 0.5rem auto 0; font-size: 1.1rem; }
/* Animation d'entrée du hero (home) — même rythme que les article-header */
@keyframes hero-scroll-rise {
from { opacity: 0; transform: translate(-50%, 28px); }
to { opacity: 0.7; transform: translate(-50%, 0); }
}
.hero .eyebrow,
.hero h1,
.hero .lead {
opacity: 0;
animation: header-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero .eyebrow { animation-delay: 0.25s; }
.hero h1 { animation-delay: 0.45s; }
.hero .lead { animation-delay: 0.7s; }
/* hero-scroll : animation séparée pour préserver le translateX(-50%) du centrage */
.hero-scroll {
opacity: 0;
animation: hero-scroll-rise 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
animation-delay: 1.1s;
}
@media (prefers-reduced-motion: reduce) {
.hero .eyebrow, .hero h1, .hero .lead {
opacity: 1;
animation: none;
}
.hero-scroll { opacity: 0.7; animation: none; }
}
@media (max-width: 720px) {
.hero { min-height: 75vh; }
.hero .container { padding-bottom: 3rem; padding-top: 6rem; }
}
/* ---------- Sections ---------- */
section.block { padding: 7rem 0; }
section.block.tight { padding: 4rem 0; }
section.block.dark { background: var(--block-dark-bg); color: var(--block-dark-fg); }
section.block.dark h1, section.block.dark h2, section.block.dark h3, section.block.dark h4 { color: var(--block-dark-fg); }
section.block.dark .eyebrow { color: var(--gold); }
section.block.dark blockquote { color: var(--block-dark-fg); }
section.block.dark blockquote cite { color: var(--mute); }
:root[data-theme="dark"] section.block.dark { background: #000; }
.section-head { margin-bottom: 4rem; }
.section-head .eyebrow { display: block; margin-bottom: 1rem; }
/* Two-column intro */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.split.text-left { grid-template-columns: 5fr 6fr; }
.split.text-right { grid-template-columns: 6fr 5fr; }
.split figure { margin: 0; }
.split figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.split.landscape figure img { aspect-ratio: 4 / 3; }
@media (max-width: 920px) {
.split, .split.text-left, .split.text-right { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* ---------- Cards / Index ---------- */
.index-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rem 3rem;
}
.index-grid.three { grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; }
.index-card { display: block; color: var(--ink); border-bottom: none; }
.index-card figure { margin: 0; overflow: hidden; background: var(--paper-2); position: relative; }
.index-card img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}
.index-card.landscape img { aspect-ratio: 3 / 2; }
.index-card figure::after {
content: "";
position: absolute;
inset: 0;
background: rgba(28, 26, 22, 0);
transition: background 0.4s ease;
pointer-events: none;
}
.index-card:hover img { transform: scale(1.06); filter: brightness(0.9); }
.index-card:hover figure::after { background: rgba(28, 26, 22, 0.08); }
.index-card .meta {
padding: 1.2rem 0 0;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.index-card:hover .meta { border-bottom-color: var(--gold); }
.index-card .num {
font-family: var(--sans);
font-size: 0.68rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 0.6rem;
display: block;
}
.index-card h3 { font-size: 1.6rem; margin: 0 0 0.4rem; font-weight: 400; }
.index-card p { font-size: 0.95rem; color: var(--mute); margin: 0; max-width: none; }
@media (max-width: 820px) {
.index-grid, .index-grid.three { grid-template-columns: 1fr; gap: 3rem; }
}
/* ---------- Article ---------- */
.article-header {
padding: 9rem 0 4rem;
border-bottom: 1px solid var(--rule);
}
.article-header .eyebrow { display: block; margin-bottom: 1.5rem; }
.article-header h1 {
margin-bottom: 1.5rem;
max-width: 16ch;
text-wrap: balance;
}
.article-header .deck {
font-family: var(--serif);
font-size: clamp(1.2rem, 1.8vw, 1.55rem);
line-height: 1.4;
font-weight: 300;
color: var(--ink-2);
max-width: 50ch;
font-style: italic;
}
/* Chapter hero — full-bleed image behind the chapter title block */
.article-header.with-hero {
position: relative;
min-height: 72vh;
display: flex;
align-items: flex-end;
overflow: hidden;
padding: 9rem 0 4rem;
border-bottom: 0;
color: var(--paper);
}
.article-header.with-hero::before {
content: "";
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: var(--hero-img);
z-index: 0;
transform: scale(1.02);
}
.article-header.with-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0,0,0,0.88) 0%,
rgba(0,0,0,0.65) 30%,
rgba(0,0,0,0.35) 60%,
rgba(0,0,0,0.15) 100%);
z-index: 1;
}
.article-header.with-hero .container { position: relative; z-index: 2; color: var(--on-image); }
.article-header.with-hero h1 { color: var(--on-image); }
.article-header.with-hero .eyebrow { color: var(--on-image); opacity: 0.9; }
.article-header.with-hero .deck { color: var(--on-image); opacity: 0.95; font-style: normal; }
.article-header.with-hero .back-link { color: var(--on-image-mute); opacity: 0.85; }
.article-header.with-hero .back-link:hover { color: var(--on-image); }
.article-header.with-hero .reading-time { color: var(--on-image-mute); border-left-color: rgba(245, 241, 234, 0.3); }
/* ---------- Animation d'entrée des titres de chapitre ---------- */
@keyframes header-rise {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-zoom {
from { transform: scale(1.08); }
to { transform: scale(1.02); }
}
.article-header .back-link,
.article-header .eyebrow,
.article-header h1,
.article-header .deck,
.article-header .reading-time {
opacity: 0;
animation: header-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.article-header .back-link { animation-delay: 0.05s; }
.article-header .eyebrow { animation-delay: 0.25s; }
.article-header .reading-time { animation-delay: 0.35s; }
.article-header h1 { animation-delay: 0.45s; }
.article-header .deck { animation-delay: 0.75s; }
/* Le hero en fond fait un très lent zoom-out (de 1.08 vers 1.02) sur 1.4s */
.article-header.with-hero::before {
animation: hero-zoom 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
.article-header .back-link,
.article-header .eyebrow,
.article-header h1,
.article-header .deck,
.article-header .reading-time {
opacity: 1;
animation: none;
}
.article-header.with-hero::before { animation: none; }
}
@media (max-width: 720px) {
.article-header.with-hero { min-height: 60vh; padding: 6rem 0 3rem; }
}
/* Hero sound toggle */
.hero-sound {
position: absolute;
top: 1.5rem;
right: 1.5rem;
z-index: 3;
background: rgba(28, 26, 22, 0.55);
border: 1px solid rgba(245, 241, 234, 0.25);
color: var(--on-image);
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 0;
}
.hero-sound:hover { background: rgba(28, 26, 22, 0.85); border-color: var(--gold); }
.hero-sound[data-state="on"] svg line { display: none; }
/* Manifesto punchline */
.punchline {
font-family: var(--serif);
font-size: clamp(2rem, 4.4vw, 3.4rem);
font-weight: 300;
line-height: 1.1;
color: var(--ink);
margin: 0 0 3rem;
max-width: 22ch;
letter-spacing: -0.01em;
}
.punchline em { color: var(--gold-deep); font-style: italic; }
/* Featured film */
.film-featured { margin-bottom: 5rem; }
.film-featured .film-embed { padding-top: 56.25%; max-width: 1100px; margin: 0 auto; }
.film-featured .film-meta { text-align: center; max-width: 60ch; margin: 1.5rem auto 0; padding: 0; }
.film-featured .film-meta h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 400; }
.film-featured .film-meta p { margin: 0.5rem auto 0; }
/* ---------- Scroll offset for sticky header on anchor jumps ---------- */
[id] {
scroll-margin-top: 6rem;
}
/* ---------- Image blur-up loading effect ---------- */
img[loading="lazy"] {
opacity: 0;
transition: opacity 0.5s ease-out;
}
img[loading="lazy"].loaded {
opacity: 1;
}
/* For images that are already loaded by the time JS runs */
img[loading="lazy"][src]:not([data-pending]) {
opacity: 1;
}
/* ---------- Reading time indicator ---------- */
.reading-time {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
margin-left: 1rem;
padding-left: 1rem;
border-left: 1px solid var(--rule);
font-weight: 400;
}
/* (chapter hero reading-time color is set near .article-header.with-hero rules above) */
/* ---------- Parallax on bleed-figures (images only) ---------- */
figure.bleed-figure { overflow: hidden; }
figure.bleed-figure img {
will-change: transform;
transition: transform 0.05s linear;
}
/* Les vidéos sont volontairement exclues du parallax pour ne pas cropper
la barre de contrôles native qui se trouve en bas de l'élément. */
figure.bleed-figure video { transform: none !important; }
/* ---------- Reading progress bar ---------- */
.read-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: var(--gold);
z-index: 60;
transition: width 0.1s linear;
pointer-events: none;
}
/* ---------- Back-to-top button ---------- */
.back-top {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 50;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
border: 1px solid rgba(245, 241, 234, 0.15);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s, transform 0.3s, background 0.2s;
padding: 0;
}
.back-top.show { opacity: 1; transform: translateY(0); }
.back-top:hover { background: var(--gold-deep); }
/* ---------- Skip to content (a11y) ---------- */
.skip-to-content {
position: absolute;
top: -100px;
left: 1rem;
z-index: 100;
padding: 0.75rem 1.25rem;
background: var(--ink);
color: var(--paper);
border-bottom: 0;
font-family: var(--sans);
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: top 0.2s;
}
.skip-to-content:focus {
top: 1rem;
outline: 2px solid var(--gold);
}
/* ---------- Focus polish (a11y) ---------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a:focus-visible, button:focus-visible { outline-offset: 4px; }
/* ---------- Gallery hover : caption reveal + subtle zoom ---------- */
.gallery figure { position: relative; overflow: hidden; }
.gallery figure img {
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s;
}
.gallery figure:hover img {
transform: scale(1.04);
filter: brightness(0.78);
}
.gallery figure figcaption {
position: absolute;
inset: auto 0 0 0;
margin: 0;
padding: 1.5rem 1rem 1rem;
background: linear-gradient(to top, rgba(28, 26, 22, 0.92) 0%, rgba(28, 26, 22, 0) 100%);
color: var(--paper);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
font-size: 0.75rem;
}
.gallery figure:hover figcaption {
opacity: 1;
transform: translateY(0);
}
@media (hover: none) {
.gallery figure figcaption {
position: static;
opacity: 1;
transform: none;
background: none;
color: var(--mute);
padding: 0.5rem 0 0;
}
}
.article-body { padding: 5rem 0; }
.article-body h2 { margin-top: 4rem; }
.article-body h2:first-child { margin-top: 0; }
/* Sticky timeline date — la date suit le scroll de son événement */
.timeline-item > .timeline-date {
position: sticky;
top: 6.5rem;
align-self: start;
}
@media (max-width: 720px) {
.timeline-item > .timeline-date { position: static; }
}
/* Section number prefix (I, II, III en eyebrow doré au-dessus du H2) */
.article-body .section-num {
display: block;
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
margin: 5rem 0 1rem;
font-weight: 500;
}
.article-body .section-num::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--gold);
vertical-align: middle;
margin-right: 1rem;
margin-bottom: 3px;
}
.article-body .section-num + h2 { margin-top: 0.5rem; }
.article-body .section-num:first-of-type { margin-top: 0; }
/* Magazine split layout — header sticky on left, body text on right */
.section-split {
display: grid;
grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
gap: 5rem;
max-width: 1280px;
margin: 0 auto;
padding: 0 2.5rem;
align-items: start;
}
.section-split > header {
position: sticky;
top: 6.5rem;
align-self: start;
}
.section-split > header .section-num { margin: 0 0 0.75rem; }
.section-split > header h2 { margin: 0; }
.section-split > .body { max-width: 64ch; }
.section-split > .body > *:first-child { margin-top: 0; }
.section-split > .body h3 { margin-top: 2.5rem; }
.section-split > .body h3:first-of-type { margin-top: 1.5rem; }
/* Sections avec grilles d'images (home : The Work, Latest) : le body prend toute la largeur dispo */
.section-split > .body:has(.index-grid),
.section-split > .body:has(.latest-grid) { max-width: none; }
@media (max-width: 900px) {
.section-split {
grid-template-columns: 1fr;
gap: 1rem;
padding: 0 1.5rem;
}
.section-split > header { position: static; }
.section-split > header h2 { margin-top: 0.25rem; }
}
/* ---------- Figures ---------- */
figure { margin: 4rem 0; }
figure img { background: var(--paper-2); }
figcaption {
margin-top: 1rem;
font-family: var(--sans);
font-size: 0.78rem;
line-height: 1.5;
letter-spacing: 0.04em;
color: var(--mute);
max-width: 50ch;
}
figure.bleed-figure {
/* La figure est toujours au niveau body (sœur des ), donc 100%
respecte exactement la largeur visible du viewport, sans déborder
sous la scrollbar. */
width: 100%;
margin: 0;
overflow: hidden;
}
figure.bleed-figure img,
figure.bleed-figure video {
display: block;
width: 100%;
max-height: 92vh;
object-fit: cover;
}
figure.bleed-figure figcaption { padding: 1rem 2.5rem 0; max-width: 80ch; }
/* Inline figure videos */
figure video {
display: block;
width: 100%;
height: auto;
background: var(--paper-2);
}
/* Hero video element (same as .hero-bg img) */
video.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* ---------- Gallery ---------- */
.gallery {
column-count: 4;
column-gap: 6px;
}
.gallery.dense { column-count: 5; }
.gallery figure {
margin: 0 0 6px 0;
break-inside: avoid;
position: relative;
overflow: hidden;
background: var(--paper-2);
/* Petit zoom-in container pour que le contenu ne casse pas dans la colonne */
display: block;
}
.gallery figure img {
width: 100%;
height: auto;
display: block;
cursor: zoom-in;
}
.gallery figcaption { font-size: 0.72rem; }
@media (min-width: 1400px) {
.gallery { column-count: 5; }
.gallery.dense { column-count: 6; }
}
@media (max-width: 900px) {
.gallery { column-count: 3; }
.gallery.dense { column-count: 4; }
}
@media (max-width: 600px) {
.gallery { column-count: 2; column-gap: 4px; }
.gallery.dense { column-count: 3; column-gap: 4px; }
.gallery figure { margin-bottom: 4px; }
}
/* ============================================================
Mobile polish — < 600 px (passe de cohérence générale)
============================================================ */
@media (max-width: 600px) {
/* Hero plus compact, hauteur réduite */
.hero { min-height: 70vh; }
.hero .container { padding-top: 5rem; padding-bottom: 2.5rem; }
.hero h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); max-width: 100%; line-height: 1.1; }
.hero p.lead { font-size: 1rem; }
.hero-scroll { font-size: 0.6rem; letter-spacing: 0.25em; bottom: 1.5rem; }
.hero-sound { width: 38px; height: 38px; top: 1rem; right: 1rem; }
.hero-sound svg { width: 16px; height: 16px; }
/* Article header */
.article-header { padding: 6rem 0 2.5rem; }
.article-header h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
.article-header .deck { font-size: 1.05rem; }
/* Chapter hero plus compact */
.article-header.with-hero { min-height: 55vh; padding: 6rem 0 2.5rem; }
/* Reading time mis en dessous au lieu de à droite (sinon ça wrap moche) */
.reading-time {
display: block;
margin: 0.4rem 0 0 0;
padding: 0;
border-left: 0;
}
/* Nav mobile — espacement plus serré */
.nav { padding: 1.5rem; gap: 1rem; }
.lang-toggle { margin-top: 0.5rem; }
.theme-toggle { margin-left: 0; align-self: flex-start; }
/* Section blocks plus compacts */
section.block { padding: 4rem 0; }
/* Stats : chiffres bien proportionnés sur mobile */
.stat-num { font-size: clamp(2.2rem, 11vw, 3.6rem); }
/* Pull-quote plus mesuré */
.pull-quote { padding: 3rem 0; }
.pull-quote blockquote { font-size: clamp(1.4rem, 7vw, 2.2rem); max-width: 18ch; }
/* Punchline plus mesuré */
.punchline { font-size: clamp(1.6rem, 7.5vw, 2.4rem); margin-bottom: 1.5rem; max-width: 100%; }
/* Films grid en colonne unique + featured carré pour gagner de la place */
.films-grid { grid-template-columns: 1fr; gap: 2rem; }
.film-featured .film-embed { padding-top: 100%; }
/* Index grid (chapter cards) en 1 col claire */
.index-grid, .index-grid.three { grid-template-columns: 1fr; gap: 2rem; }
/* Split text en stack vertical (déjà géré, on resserre le gap) */
.split, .split.text-left, .split.text-right { gap: 1.5rem; }
/* Section-split (procédé) — header pas trop gros */
.section-split > header h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
.section-split > .body { font-size: 0.96rem; }
/* Back-to-top + boutons floating plus petits */
.back-top { width: 38px; height: 38px; bottom: 1rem; right: 1rem; }
.back-top svg { width: 16px; height: 16px; }
/* Brand reste lisible */
.brand { font-size: 1.1rem; line-height: 1.1; }
.brand small { font-size: 0.55rem; letter-spacing: 0.22em; }
/* Bleed-figure caption plus serré */
figure.bleed-figure figcaption { padding: 0.75rem 1.25rem 0; }
figure { margin: 2.5rem 0; }
/* Press list plus serré */
.press-list li { padding: 1.5rem 0; gap: 0.4rem; }
.press-list h4 { font-size: 1.15rem; }
/* Timeline plus compact */
.timeline-item { padding: 1.25rem 0; }
.timeline-item h4 { font-size: 1.05rem; }
}
/* Empty gallery state */
.gallery-empty {
padding: 4rem 2rem;
text-align: center;
border: 1px dashed var(--rule);
color: var(--mute);
font-family: var(--sans);
font-size: 0.9rem;
}
/* ---------- Timeline ---------- */
.timeline { max-width: 920px; margin: 5rem 0; }
.timeline-item {
display: grid;
grid-template-columns: 200px 1fr;
gap: 3rem;
padding: 3rem 0;
border-top: 1px solid var(--rule);
align-items: start;
}
.timeline-item:first-child { padding-top: 0; border-top: 0; }
.timeline-item:last-child { border-bottom: 1px solid var(--rule); }
.timeline-date {
font-family: var(--sans);
font-size: 0.85rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
line-height: 1.3;
padding: 0.5rem 0 1.5rem;
position: relative;
}
.timeline-date::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 1px;
background: var(--gold);
}
.timeline-item h4 {
margin: 0 0 0.8rem;
font-family: var(--serif);
font-size: 1.55rem;
font-weight: 400;
line-height: 1.25;
color: var(--ink);
text-wrap: balance;
}
.timeline-item p {
font-family: var(--serif);
font-size: 1.05rem;
line-height: 1.6;
color: var(--ink-2);
margin: 0;
max-width: 60ch;
}
@media (max-width: 720px) {
.timeline-item { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
.timeline-item h4 { font-size: 1.3rem; }
}
/* ---------- Stats / numbers ---------- */
.stats-header {
max-width: 700px;
margin: 0 auto 4rem;
text-align: center;
}
.stats-header .eyebrow {
display: block;
margin-bottom: 1rem;
}
.stats-header h2 {
margin: 0;
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 300;
line-height: 1.2;
text-wrap: balance;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3.5rem 2rem;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: 4.5rem 0;
}
@media (max-width: 820px) {
.stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
.stats-header { margin-bottom: 2.5rem; }
}
@media (max-width: 480px) {
.stats { grid-template-columns: 1fr; gap: 2rem; }
}
.stat-num {
font-family: var(--serif);
font-size: clamp(2.6rem, 5vw, 4.5rem);
font-weight: 300;
line-height: 1;
color: inherit; /* hérite de .block.dark (block-dark-fg) ou du contexte */
margin-bottom: 0.9rem;
position: relative;
padding-bottom: 0.8rem;
}
/* Filet doré sous chaque chiffre — signature graphique */
.stat-num::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 1px;
background: var(--gold);
}
.stat-label {
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
}
/* ---------- Colophon (fin de chapitre — crédit éditorial du studio) ---------- */
.colophon {
padding: 4rem 0 5rem;
border-top: 1px solid var(--rule);
margin-top: 5rem;
}
.colophon .narrow {
max-width: 760px;
text-align: center;
}
.colophon-eyebrow {
display: inline-block;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 1.5rem;
}
.colophon-eyebrow::before, .colophon-eyebrow::after {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--gold);
vertical-align: middle;
margin: 0 0.8rem;
}
.colophon p {
font-family: var(--serif);
font-style: italic;
font-size: 1.1rem;
line-height: 1.55;
color: var(--ink-2);
max-width: 60ch;
margin: 0 auto 1.5rem;
}
.colophon-cta {
display: inline-block;
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
border-bottom: 1px solid var(--gold);
padding-bottom: 0.25rem;
transition: color 0.2s, border-color 0.2s;
}
.colophon-cta:hover { color: var(--gold); border-color: var(--gold-deep); }
/* ---------- Contact form ---------- */
.form-header {
text-align: center;
margin-bottom: 3rem;
}
.form-header .eyebrow { display: block; margin-bottom: 1rem; }
.form-header h2 { margin: 0 0 1rem; }
.form-header p {
font-family: var(--serif);
font-style: italic;
font-size: 1.1rem;
color: var(--ink-2);
max-width: 56ch;
margin: 0 auto;
}
.contact-form {
max-width: 720px;
margin: 0 auto;
display: grid;
gap: 1.75rem;
}
.contact-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
}
.contact-form .form-field {
display: grid;
gap: 0.5rem;
}
.contact-form .form-field > span {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
font-family: var(--serif);
font-size: 1.05rem;
line-height: 1.5;
color: var(--ink);
background: transparent;
border: 0;
border-bottom: 1px solid var(--rule);
padding: 0.6rem 0;
transition: border-color 0.25s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}
.contact-form select {
background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%),
linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
background-position: right 0.5rem center, right 1rem center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 2rem;
cursor: pointer;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-bottom-color: var(--gold);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--mute);
font-style: italic;
}
.form-submit {
justify-self: start;
margin-top: 1rem;
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
background: transparent;
border: 1px solid var(--gold);
padding: 1rem 2rem;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
border-radius: 0;
}
.form-submit:hover {
background: var(--gold);
color: var(--paper);
}
@media (max-width: 600px) {
.contact-form .form-row { grid-template-columns: 1fr; }
.form-submit { width: 100%; text-align: center; justify-self: stretch; }
}
/* ---------- Pull quote (dark) ---------- */
.pull-quote {
padding: 6rem 0;
background: var(--block-dark-bg);
color: var(--block-dark-fg);
text-align: center;
}
.pull-quote blockquote {
margin: 0 auto;
color: var(--block-dark-fg);
max-width: 24ch;
font-size: clamp(2rem, 4vw, 3.4rem);
}
.pull-quote blockquote::before { color: var(--gold); }
.pull-quote cite { color: var(--mute); }
:root[data-theme="dark"] .pull-quote { background: #000; }
/* ---------- Footer ---------- */
footer.site-footer {
background: var(--block-dark-bg);
color: var(--on-image-mute);
padding: 5rem 0 2.5rem;
margin-top: 8rem;
}
footer.site-footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
footer.site-footer h4 { color: var(--on-image); margin-bottom: 1.2rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
footer.site-footer p { color: var(--on-image-mute); font-size: 0.92rem; max-width: 36ch; font-family: var(--serif); }
footer.site-footer a { color: var(--on-image-mute); border-bottom: none; font-size: 0.88rem; font-family: var(--sans); }
footer.site-footer a:hover { color: var(--on-image); }
:root[data-theme="dark"] footer.site-footer { background: #000; }
footer.site-footer ul { list-style: none; margin: 0; padding: 0; }
footer.site-footer li { margin-bottom: 0.6rem; }
footer.site-footer .meta {
grid-column: 1 / -1;
border-top: 1px solid rgba(245, 241, 234, 0.12);
padding-top: 2rem;
margin-top: 2rem;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--on-image-mute);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 820px) {
footer.site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
footer.site-footer .container { grid-template-columns: 1fr; }
}
/* ---------- Lightbox (JS) ---------- */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(20, 18, 14, 0.96);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
cursor: zoom-out;
opacity: 0;
transition: opacity 0.3s;
}
.lightbox-overlay.show { opacity: 1; }
.lightbox-overlay img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.lightbox-overlay .lightbox-caption {
position: absolute;
bottom: 1.5rem;
left: 0;
right: 0;
text-align: center;
color: var(--rule);
font-family: var(--sans);
font-size: 0.8rem;
padding: 0 2rem;
}
/* ---------- Films ---------- */
.films-section { margin-bottom: 6rem; }
.films-section-head { margin-bottom: 2rem; }
.films-section-head .eyebrow { display: block; }
.films-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 3rem 2.5rem;
}
.film-card { display: flex; flex-direction: column; }
.film-embed {
position: relative;
/* Defaut 1:1 (la majorité des vidéos Instagram sont carrées ou verticales)
— le JS ajuste au vrai ratio dès que la métadonnée vidéo est chargée. */
padding-top: 100%;
background: #000;
overflow: hidden;
}
.film-featured .film-embed { padding-top: 56.25%; } /* Featured : 16:9 par défaut */
.film-iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
.film-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.5rem;
color: var(--rule);
font-family: var(--sans);
font-size: 0.85rem;
line-height: 1.5;
background: var(--ink);
}
.film-placeholder code { color: var(--gold); background: rgba(255,255,255,0.06); padding: 1px 6px; }
.film-meta { padding: 1.25rem 0 0; }
.film-meta .film-subtitle {
display: block;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 0.4rem;
}
.film-meta h3 { font-size: 1.35rem; margin: 0 0 0.5rem; font-weight: 500; }
.film-meta p { font-size: 0.95rem; color: var(--ink-2); margin: 0; }
/* ---------- Fade-in on scroll ---------- */
.fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: opacity, transform;
}
.fade-in.in-view {
opacity: 1;
transform: none;
}
/* Révélation cinématique des bleed-figures : l'image émerge depuis le bas
(clip-path qui remonte) au lieu d'un simple fondu. */
figure.bleed-figure.fade-in {
opacity: 1;
transform: none;
clip-path: inset(100% 0 0 0);
transition: clip-path 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: clip-path;
}
figure.bleed-figure.fade-in.in-view {
clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
.fade-in { opacity: 1; transform: none; transition: none; }
figure.bleed-figure.fade-in { clip-path: none; transition: none; }
}
/* ---------- Page back link ---------- */
.back-link {
display: inline-block;
margin-bottom: 2rem;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.2em;
color: var(--mute);
border-bottom: none;
text-transform: uppercase;
}
.back-link::before { content: "← "; }
.back-link:hover { color: var(--ink); }
/* ---------- Press list ---------- */
/* Latest from the workshop (home block) */
.latest-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.5rem;
margin-top: 2.5rem;
}
.latest-grid figure {
margin: 0;
aspect-ratio: 1;
overflow: hidden;
position: relative;
background: var(--paper-2);
cursor: zoom-in;
}
.latest-grid figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}
.latest-grid figure:hover img { transform: scale(1.06); filter: brightness(0.9); }
.latest-grid figure .date-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
color: var(--paper);
padding: 1.5rem 1rem 0.5rem;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.12em;
opacity: 0;
transition: opacity 0.2s;
}
.latest-grid figure:hover .date-overlay { opacity: 1; }
@media (max-width: 600px) {
.latest-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Press grid — magazine-style cards */
.press-grid {
list-style: none;
margin: 2rem 0;
padding: 0;
max-width: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 2rem;
}
.press-grid li { padding: 0; border: 0; display: block; }
.press-grid article {
display: flex;
flex-direction: column;
height: 100%;
}
.press-grid .press-cover {
aspect-ratio: 4 / 3;
background: var(--paper-2);
overflow: hidden;
margin-bottom: 1rem;
}
.press-grid .press-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}
.press-grid article:hover .press-cover img { transform: scale(1.06); filter: brightness(0.92); }
.press-grid h4 { transition: color 0.3s ease; }
.press-grid article:hover h4 { color: var(--gold-deep); }
.press-grid .press-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.press-grid .source {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
}
.press-grid .date {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
}
.press-grid h4 {
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 500;
margin: 0 0 0.5rem;
text-transform: none;
letter-spacing: 0;
line-height: 1.25;
}
.press-grid .excerpt {
font-family: var(--serif);
font-style: italic;
color: var(--ink-2);
font-size: 0.95rem;
margin: 0 0 0.75rem;
}
.press-grid .press-link {
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--gold-deep);
border-bottom: none;
margin-top: auto;
}
.press-grid .press-link:hover { color: var(--gold); }
/* ----- Studio cards (Triskell / Rankus / WoW) ----- */
.studio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 2.5rem 0;
}
.studio-card {
background: var(--paper);
border: 1px solid var(--rule);
padding: 2rem 1.75rem 1.75rem;
display: flex;
flex-direction: column;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.studio-card:hover {
border-color: var(--gold);
transform: translateY(-2px);
}
.studio-tier {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 1.25rem;
}
.studio-card h3 {
font-family: var(--serif);
font-size: 1.8rem;
font-weight: 500;
margin: 0 0 0.4rem;
text-transform: none;
letter-spacing: 0;
line-height: 1.1;
}
.studio-pitch {
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
color: var(--ink-2);
margin: 0 0 1rem;
line-height: 1.4;
}
.studio-card p:not(.studio-pitch) {
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 1.5rem;
}
.studio-link {
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--gold-deep);
border-bottom: none;
margin-top: auto;
}
.studio-link:hover { color: var(--gold); }
/* Discreet "Site by Triskell Studio" credit in the footer */
.studio-credit {
display: block;
margin-top: 0.4rem;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
}
.studio-credit a { color: var(--mute); border-bottom: none; }
.studio-credit a:hover { color: var(--gold); }
.press-list { list-style: none; margin: 2rem 0; padding: 0; max-width: 800px; }
.press-list li {
padding: 2rem 0;
border-top: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: baseline;
}
.press-list li:last-child { border-bottom: 1px solid var(--rule); }
.press-list h4 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin: 0 0 0.4rem; text-transform: none; letter-spacing: 0; }
.press-list .source { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-deep); }
.press-list .excerpt { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 1.05rem; max-width: 60ch; margin: 0; }
.press-list .date {
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
color: var(--mute);
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 720px) {
.press-list li { grid-template-columns: 1fr; gap: 0.4rem; }
.press-list .date { text-align: left; }
}