/* ==========================================================================
   Breathless — Paris, 1960.
   Slate #2e353e · newsprint type #ece6da · soft French blue #9db4e0 · a muted red #e08a7b (markers only)
   Archivo Narrow (bold, condensed capitals) for headlines, Source Serif 4 for
   text, IBM Plex Mono for datelines. A masthead, captions set like film
   subtitles, and each project shown in jump cuts.
   ========================================================================== */

:root {
    --br-blue: #9db4e0;
    --br-red: #e08a7b;
    --br-ink: #ece6da;  /* the light 'ink' of type and rules on slate */
    --br-paper: #2e353e;
    --br-rule: rgba(236, 230, 218, .18);
    --br-wrap: min(1320px, 100% - 2 * var(--art-gutter));
    --art-lightbox-bg: rgba(30, 35, 41, .97);
    --art-lightbox-text: #ece6da;
    --vf-screen-bg: rgba(22, 26, 31, .985);
    color-scheme: dark;
}

body { line-height: 1.65; }
h1, h2, h3, h4 { line-height: .98; letter-spacing: -.005em; }
::selection { background: var(--br-ink); color: var(--br-paper); }
.br-mono { font-family: var(--art-meta-font); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--art-muted); }
.btn, .wp-block-button__link { border-radius: 0; }
.wp-block-button__link, .btn-primary { background: var(--br-ink); border: 1px solid var(--br-ink); color: var(--br-paper); font-family: var(--art-heading-font); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wp-block-button__link:hover, .btn-primary:hover { background: var(--br-blue); border-color: var(--br-blue); color: var(--br-paper); }
.form-control, .form-select { background: transparent; border: 1px solid var(--br-rule); border-radius: 0; }

/* ---------- Header ---------- */

.art-brand { white-space: nowrap; letter-spacing: .02em; }
.art-header { border-bottom: 1px solid var(--br-ink); }
.art-header__inner { max-width: none; padding-top: 12px; padding-bottom: 12px; }
.art-menu { gap: .2rem 1.2rem; }
.art-menu .nav-link { letter-spacing: .06em; }
.art-menu .nav-link.active, .art-menu .current-menu-item > .nav-link { color: var(--br-blue); }
.vs-side-foot { flex-direction: row; align-items: center; margin: 0 0 0 1.4rem; }
@media (max-width: 991.98px) { .vs-side-foot { margin: 1rem 0 .5rem; } }

/* ---------- Masthead ---------- */

.br-masthead { width: var(--br-wrap); margin: 0 auto; padding: clamp(24px, 3vw, 40px) 0 clamp(18px, 2.4vw, 28px); text-align: center; }
.br-masthead__line { display: flex; justify-content: center; gap: 1rem; margin: 0; padding: .5rem 0; border-top: 1px solid var(--br-ink); border-bottom: 1px solid var(--br-ink); }
.br-masthead__line:last-child { border-top: 3px double var(--br-ink); }
.br-masthead__title { margin: .14em 0 .08em; font: 700 clamp(64px, 13vw, 220px)/.86 var(--art-heading-font); letter-spacing: -.02em; text-transform: uppercase; color: var(--br-ink); }

/* The still, with the tagline as a subtitle. */
.br-still { position: relative; width: var(--br-wrap); margin: 0 auto; background: #20262d; overflow: hidden; }
.br-still__img { display: block; width: 100%; height: min(76vh, 820px) !important; object-fit: cover; filter: saturate(.7) contrast(1.06); }
.br-subtitle { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); max-width: 80%; margin: 0; text-align: center; font: italic 400 clamp(17px, 1.8vw, 26px)/1.35 var(--art-font); color: #fdfbf5; text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, .9), 0 0 18px rgba(0, 0, 0, .5); }
.br-subtitle--small { bottom: 8%; font-size: clamp(14px, 1.2vw, 17px); max-width: 90%; pointer-events: none; }

/* ---------- Jump cuts ---------- */

.br-body { width: var(--br-wrap); margin: 0 auto 140px; }
.br-body .art-home-content { max-width: 760px; margin: 48px auto 0; }
.br-story { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(80px, 11vw, 150px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--br-ink); }
.br-story--alt { grid-template-columns: 7fr 4fr; }
.br-story--alt .br-story__text { order: 2; }
.br-story__kicker { margin: 0 0 .8rem; color: var(--br-red); }
.br-story__title { margin: 0 0 1.2rem; font: 700 clamp(44px, 5.6vw, 92px)/.9 var(--art-heading-font); text-transform: uppercase; letter-spacing: -.015em; }
.br-story__title a { color: var(--br-ink); text-decoration: none; }
.br-story__title a:hover { color: var(--br-blue); }
.br-story__dek { margin: 0 0 1rem; font-size: 1.06em; }
.br-story__meta { margin: 0 0 1.4rem; }
.br-more { font: 700 14px var(--art-heading-font); letter-spacing: .06em; text-transform: uppercase; color: var(--br-blue); text-decoration: none; border-bottom: 2px solid currentColor; }
.br-more:hover { color: var(--br-ink); }
.br-cuts { display: flex; gap: 4px; align-items: flex-start; padding: 22px 0; color: inherit; }
.br-cut { flex: 0 0 auto; width: calc(var(--w) - 3px); transform: translateY(var(--y)); overflow: hidden; background: var(--art-surface); transition: transform .4s cubic-bezier(.3, 1.3, .6, 1); }
.br-cut__img { display: block; width: 100%; height: clamp(220px, 26vw, 380px) !important; object-fit: cover; filter: saturate(.8); transition: filter .4s ease; }
.br-cuts:hover .br-cut { transform: translateY(0); }
.br-cuts:hover .br-cut__img { filter: none; }
@media (max-width: 767.98px) {
    .br-story, .br-story--alt { grid-template-columns: 1fr; }
    .br-story--alt .br-story__text { order: 0; }
    .br-cut__img { height: 180px !important; }
}
@media (prefers-reduced-motion: reduce) { .br-cut { transition: none; } }

/* Cinéma */
.br-section { margin-top: clamp(80px, 11vw, 150px); }
.br-head, .br-body .art-home-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.8rem; padding-top: .9rem; border-top: 3px double var(--br-ink); border-bottom: 0; }
.br-head__title, .br-body .art-home-section__head .edith-section-title { margin: 0; font: 700 clamp(40px, 5vw, 80px)/.9 var(--art-heading-font); text-transform: uppercase; letter-spacing: -.015em; color: var(--br-ink); }
.br-head .br-mono, .br-body .edith-more { color: var(--br-blue); text-decoration: none; font-family: var(--art-meta-font); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.br-films { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.br-film__frame { position: relative; }
.br-film .vf-film__img { filter: grayscale(1) contrast(1.08); transition: filter .5s ease; }
.br-film .vf-film:hover .vf-film__img { filter: none; }
.br-film__meta { margin: .8rem 0 0; }
.vf-film__play { background: rgba(46, 53, 62, .85); }

/* The journal as headlines, the shop */
.art-news-list__item { border-top: 1px solid var(--br-rule); padding: .9rem 0; }
.art-news-list__date { font-family: var(--art-meta-font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--art-muted); }
.art-news-list__title { font: 700 clamp(20px, 1.9vw, 28px)/1.05 var(--art-heading-font); text-transform: uppercase; color: var(--br-ink); text-decoration: none; }
.art-news-list__title:hover { color: var(--br-blue); }
.edith-card__media, .edith-news-card__media--empty { background: var(--art-surface); }
.btn.edith-btn, .edith-shop-grid .btn.edith-btn { background: var(--br-ink); border-color: var(--br-ink); color: var(--br-paper); }
.btn.edith-btn:hover, .edith-shop-grid .btn.edith-btn:hover { background: var(--br-blue); border-color: var(--br-blue); color: var(--br-paper); }

/* ---------- Inner pages ---------- */

.edith-page__title, .edith-post__title { font: 700 clamp(52px, 8vw, 132px)/.88 var(--art-heading-font); text-transform: uppercase; letter-spacing: -.02em; }
.edith-kicker, .art-project-meta { font-family: var(--art-meta-font); letter-spacing: .1em; text-transform: uppercase; }
.edith-content blockquote { border-left: 3px solid var(--br-blue); padding-left: 1.2rem; font-style: italic; }
.vf-cap__meta, .vf-work__meta { font-family: var(--art-meta-font); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.fran-gallery .fran-artwork img { box-shadow: none; }

/* ---------- Footer ---------- */

.art-footer__name { font: 700 clamp(34px, 4.4vw, 60px)/.95 var(--art-heading-font); text-transform: uppercase; color: var(--art-footer-link); }