/* CANNESA7 — Base typography & layout */
html { background: var(--c-night); }
body {
font-family: var(--f-sans);
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--c-ivory);
background: var(--c-night);
overflow-x: hidden;
font-feature-settings: "ss01", "cv11";
}
/* Skip link */
.skip-link {
position: absolute;
left: -9999px;
top: 1rem;
background: var(--c-brass);
color: var(--c-night);
padding: 0.75rem 1.25rem;
z-index: 999;
font-family: var(--f-sans);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.75rem;
}
.skip-link:focus-visible { left: 1rem; }
/* Container */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad-x);
}
/* Headings */
h1, h2, h3, h4 {
font-family: var(--f-display);
color: var(--c-ivory);
letter-spacing: -0.005em;
}
h1 {
font-weight: 300;
font-style: italic;
font-size: clamp(2.6rem, 8vw, 7.5rem);
line-height: 1.02;
}
h2 {
font-weight: 300;
font-style: italic;
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.08;
}
h3 {
font-weight: 400;
font-style: normal;
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.18;
}
p { color: var(--c-ivory); }
.lead {
font-weight: 300;
font-size: clamp(1.075rem, 1.4vw, 1.25rem);
line-height: 1.55;
color: var(--c-ivory);
opacity: 0.94;
max-width: 56ch;
}
/* Eyebrow / small caps */
.eyebrow {
font-family: var(--f-sans);
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-brass);
display: inline-block;
}
.eyebrow--ivory { color: var(--c-ivory-dim); }
/* Links inline */
.link-inline {
position: relative;
display: inline-block;
color: var(--c-ivory);
padding-bottom: 4px;
border-bottom: 1px solid var(--c-brass);
transition: color var(--d-fast) var(--ease-luxe), border-color var(--d-fast) var(--ease-luxe);
}
.link-inline:hover, .link-inline:focus-visible { color: var(--c-brass-bright); border-color: var(--c-brass-bright); }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--f-sans);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-brass);
padding-bottom: 6px;
border-bottom: 1px solid var(--c-brass);
transition: color var(--d-fast) var(--ease-luxe), border-color var(--d-fast) var(--ease-luxe), gap var(--d-fast) var(--ease-luxe);
}
.link-arrow:hover, .link-arrow:focus-visible {
color: var(--c-brass-bright);
border-color: var(--c-brass-bright);
gap: 0.85em;
}
/* Section */
.section { padding-block: var(--section-y); position: relative; }
.section--md { padding-block: var(--section-y-md); }
.section--alt { background: var(--c-night-2); }
.section + .section:not(.section--alt) { border-top: 1px solid var(--c-divider); }
/* Selection */
::selection { background: var(--c-brass); color: var(--c-night); }
/* Focus */
:focus-visible {
outline: 2px solid var(--c-brass);
outline-offset: 4px;
}
/* Reveal animations — progressive enhancement
Default: visible (no-JS fallback, screenshots, crawlers).
Once main.js sets .js-reveal-ready on , IntersectionObserver takes over. */
.reveal { opacity: 1; transform: none; }
.js-reveal-ready .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--d-slow) var(--ease-luxe), transform var(--d-slow) var(--ease-luxe);
will-change: opacity, transform;
}
.js-reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Opt-out modifier (1re image after-fold, contenu critique) */
.reveal--instant { opacity: 1 !important; transform: none !important; transition: none !important; }
.js-reveal-ready .reveal--instant { opacity: 1; transform: none; }
/* Image figure */
figure { position: relative; overflow: hidden; }
figure img { width: 100%; height: 100%; object-fit: cover; }
/* Divider */
.hr { height: 1px; background: var(--c-divider); border: none; width: 100%; }