/*
Theme Name: Jeanne Saint-Julien — Archives
Theme URI: https://mlg-isc.com/
Description: Thème enfant classique de Twenty Seventeen pour les archives photographiques de Jeanne Saint-Julien.
Author: MLG ISC
Template: twentyseventeen
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: jeanne-saint-julien
Tags: custom-background, custom-menu, custom-logo, featured-images, translation-ready
*/

:root { --jsj-ink:#090909; --jsj-paper:#eeeae2; --jsj-muted:#aaa69f; --jsj-line:#393939; --jsj-red:#b4474d; --jsj-shell:min(1340px, calc(100% - 9vw)); }
html { background:var(--jsj-ink); overflow-x:hidden; }
body, button, input, select, textarea { color:var(--jsj-paper); background:var(--jsj-ink); font-family:Arial, Helvetica, sans-serif; }
body { overflow-x:hidden; font-size:16px; line-height:1.65; }
a { color:var(--jsj-paper); text-decoration-color:var(--jsj-red); text-underline-offset:.22em; }
a:hover, a:focus { color:var(--jsj-red); }
.site-content-contain { background:var(--jsj-ink); }

/* Header and menu: native Twenty Seventeen menu, restyled. */
.jsj-site-header { border-bottom:1px solid var(--jsj-line); background:var(--jsj-ink); }
.jsj-header-inner { width:var(--jsj-shell); min-height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.jsj-brand { display:block; color:var(--jsj-paper); font-family:Georgia, 'Times New Roman', serif; font-size:1.15rem; letter-spacing:.28em; line-height:1.1; text-decoration:none; text-transform:uppercase; }
.jsj-brand:hover { color:var(--jsj-paper); }
.jsj-brand .custom-logo { display:block; width:auto; max-height:44px; }
.jsj-menu-toggle { display:none; }
.jsj-primary-menu, .jsj-footer-menu { margin:0; padding:0; list-style:none; }
.jsj-primary-menu { display:flex; align-items:center; gap:2.5rem; }
.jsj-primary-menu a, .jsj-footer-menu a { color:var(--jsj-muted); font-size:.7rem; font-weight:700; letter-spacing:.15em; text-decoration:none; text-transform:uppercase; }
.jsj-primary-menu a:hover, .jsj-primary-menu .current-menu-item > a { color:var(--jsj-paper); }

/* Gutenberg page composition. Everything here is content in the page editor. */
.jsj-home { width:100%; margin:0; }
.jsj-home > .entry-header { display:none; }
.jsj-home .entry-content { margin:0; max-width:none; }
.jsj-hero > .wp-block-group__inner-container,
.jsj-about > .wp-block-group__inner-container,
.jsj-timeline > .wp-block-group__inner-container { width:100vw !important; max-width:none !important; margin:0 !important; }
.jsj-hero { display:grid; box-sizing:border-box; grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr); align-items:center; gap:clamp(2rem, 7vw, 9rem); padding:clamp(4.5rem, 5vw, 6.5rem) 1.5rem clamp(5rem, 8vw, 9rem); }
.jsj-hero h1, .jsj-about h2 { margin:0 !important; padding:0 !important; clear:none !important; color:var(--jsj-paper); font-family:Georgia, 'Times New Roman', serif; font-size:clamp(4rem, 6.8vw, 7.1rem); font-weight:400; letter-spacing:-.075em; line-height:.84; overflow-wrap:normal; word-break:normal; }
.jsj-hero .jsj-kicker { margin:0 0 1.6rem !important; color:var(--jsj-muted); font-size:.69rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.jsj-rule { width:60px; height:2px; margin:2.2rem 0; border:0; background:var(--jsj-red); }
.jsj-intro { max-width:31rem; color:#d3d0ca; font-size:1.1rem; line-height:1.7; }
.jsj-button .wp-block-button__link, .jsj-button a { padding:1rem 1.35rem; border:1px solid #7d363a; border-radius:0; background:transparent; color:var(--jsj-red); font-size:.8rem; font-weight:700; text-decoration:none; }
.jsj-button .wp-block-button__link:hover { background:var(--jsj-red); color:var(--jsj-ink); }
.jsj-locations { color:var(--jsj-muted); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.jsj-frame { position:relative; margin:0; border:1px solid var(--jsj-line); background:#141414; }
.jsj-frame img { display:block; width:100%; aspect-ratio:1.37; object-fit:cover; filter:grayscale(1); }
.jsj-frame figcaption { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 1rem; color:var(--jsj-muted); border-top:1px solid var(--jsj-line); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.jsj-frame:not(:has(img)) { min-height:28rem; }
.jsj-frame:not(:has(img))::after { content:'Ajouter une photographie'; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:var(--jsj-muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.jsj-hero:not(:has(.wp-block-image))::after { content:'Ajouter une photographie'; display:grid; min-height:28rem; place-items:center; border:1px solid var(--jsj-line); color:var(--jsj-muted); background:#141414; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.jsj-gallery { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; margin:0 0 clamp(5rem, 10vw, 11rem); background:var(--jsj-line); }
.jsj-gallery .wp-block-image { margin:0; min-width:0; background:var(--jsj-ink); }
.jsj-gallery img { display:block; width:100%; aspect-ratio:1 / 1.1; object-fit:cover; filter:grayscale(1); transition:filter .25s ease, opacity .25s ease; }
.jsj-gallery img:hover { filter:grayscale(0); }
.jsj-gallery figcaption { position:static; padding:.7rem .85rem; margin:0; background:var(--jsj-ink); color:var(--jsj-muted); font-size:.66rem; letter-spacing:.1em; text-align:left; }
.jsj-about { margin:0 calc(50% - 50vw); border-top:1px solid var(--jsj-line); border-bottom:1px solid var(--jsj-line); }
.jsj-about > .wp-block-group__inner-container { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.jsj-about:not(:has(.wp-block-image)) > .wp-block-group__inner-container::before { content:'Ajouter un portrait'; display:grid; min-height:36rem; place-items:center; color:var(--jsj-muted); background:#141414; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.jsj-about .wp-block-image { margin:0; background:#171717; }
.jsj-about img { display:block; width:100%; height:100%; min-height:36rem; object-fit:cover; filter:grayscale(1); }
.jsj-about-copy { padding:clamp(3rem, 7vw, 8rem); }
.jsj-about-copy > .wp-block-group__inner-container { display:flex; flex-direction:column; align-items:flex-start; }
.jsj-about-copy .jsj-kicker { margin:0 0 1.5rem !important; }
.jsj-about h2 { margin:0 0 2rem !important; padding:0 !important; clear:none !important; font-size:clamp(3rem, 4.5vw, 5.6rem) !important; line-height:.92 !important; }
.jsj-about-copy p { max-width:32rem; margin:0 0 1.35rem !important; color:#d3d0ca; }
.jsj-about-copy h2 + p { margin-top:0 !important; }
.jsj-text-link { display:inline-block; color:var(--jsj-red); border-bottom:1px solid var(--jsj-red); font-size:1rem; text-decoration:none; }
.jsj-timeline { margin:0 calc(50% - 50vw); border-bottom:1px solid var(--jsj-line); }
.jsj-timeline > .wp-block-group__inner-container { display:grid; grid-template-columns:repeat(4, 1fr); }
.jsj-era { position:relative; min-height:9rem; padding:2.4rem clamp(1.3rem, 4vw, 7rem); border-right:1px solid var(--jsj-line); }
.jsj-era:last-child { border-right:0; }
.jsj-era::before { content:''; position:absolute; top:-7px; left:28%; width:12px; height:12px; border:2px solid var(--jsj-paper); border-radius:50%; background:var(--jsj-ink); }
.jsj-era:first-child::before { border-color:var(--jsj-red); }
.jsj-era p { margin:0; color:var(--jsj-paper); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.jsj-era p:first-child { margin-bottom:.35rem; color:var(--jsj-paper); font-family:Georgia, 'Times New Roman', serif; font-size:1.6rem; font-weight:400; letter-spacing:.04em; }

.jsj-site-footer { width:var(--jsj-shell); margin:auto; padding:4rem 0 3rem; display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.jsj-footer-title { color:var(--jsj-paper); font-family:Georgia, 'Times New Roman', serif; font-size:clamp(2rem, 4vw, 4rem); font-weight:400; letter-spacing:.16em; line-height:.88; text-transform:uppercase; }
.jsj-footer-menu { display:flex; flex-wrap:wrap; gap:2.5rem; }

@media screen and (max-width: 760px) {
  :root { --jsj-shell:min(100% - 2.4rem, 1340px); }
  .jsj-header-inner { min-height:66px; }
  .jsj-brand { font-size:.9rem; letter-spacing:.2em; }
  .jsj-menu-toggle { display:block; padding:.6rem 0; border:0; color:var(--jsj-paper); background:transparent; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; }
  .jsj-primary-menu { display:none; position:absolute; z-index:10; top:66px; left:0; right:0; padding:1.3rem 6vw 1.8rem; border-bottom:1px solid var(--jsj-line); background:var(--jsj-ink); }
  .jsj-primary-menu.is-open { display:grid; gap:1.1rem; }
  .jsj-hero { grid-template-columns:1fr; gap:2.5rem; padding:4.5rem 0 5.5rem; }
  .jsj-hero h1 { font-size:clamp(4rem, 19vw, 6.8rem); }
  .jsj-frame:not(:has(img)) { min-height:20rem; }
  .jsj-hero:not(:has(.wp-block-image))::after { min-height:20rem; }
  .jsj-gallery { grid-template-columns:1fr; }
  .jsj-about > .wp-block-group__inner-container { grid-template-columns:1fr; }
  .jsj-hero > .wp-block-group__inner-container,
  .jsj-about > .wp-block-group__inner-container,
  .jsj-timeline > .wp-block-group__inner-container { width:100% !important; }
  .jsj-about:not(:has(.wp-block-image)) > .wp-block-group__inner-container::before { min-height:25rem; }
  .jsj-about img { min-height:25rem; }
  .jsj-timeline > .wp-block-group__inner-container { grid-template-columns:1fr 1fr; }
  .jsj-era:nth-child(2) { border-right:0; }
  .jsj-era:nth-child(-n+2) { border-bottom:1px solid var(--jsj-line); }
  .jsj-site-footer { align-items:flex-start; flex-direction:column; }
}