*{ box-sizing:border-box }
html,body{ height:100% }
html:focus-within{ scroll-behavior:smooth }

html{
  overflow-x: hidden;
  width: 100%;
}

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(179,18,23,.15), transparent 60%),
    var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  text-rendering:optimizeLegibility;
  width: 100%;
}

img{ max-width:100%; height:auto; display:block }
a{ color:var(--fg); text-decoration:none }
a:hover{ color:var(--accent) }
::selection{ background:rgba(179,18,23,.35) }

/* Typographie — Titres avec police custom Aubrey */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Aubrey', 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Accessibilité */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Utils layout */
.container{ max-width:var(--w); margin:0 auto; padding:0 20px }

.section{ padding:1.5rem 0 }

.grid{ display:grid; gap:var(--gap) }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.muted{ color:var(--muted) }


/* ------------------------------
   Cards / frames
------------------------------ */
.card{
  background:#0f0f10;
  border:1px solid #151516;
  border-radius:var(--radius);
  overflow:hidden;
}
.img-frame{
  border:1px solid #151516;
  border-radius:var(--radius);
  overflow:hidden;
}

/* ----- Fullscreen responsive background ----- */
.bg-image{
  position: fixed;
  inset: 0;
  z-index: -1;                 /* derrière tout le contenu */
  pointer-events: none;        /* aucun clic capturé */
}
.bg-image picture, .bg-image img{
  width: 100%;
  height: 100%;
  display: block;
}
.bg-image img{
  object-fit: cover;           /* couvre tout l’écran */
  filter: brightness(0.85);    /* assombrit légèrement l’image */
}

/* Voile/gradient maison par-dessus l’image (vignette + carmin) */
.bg-image::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(179,18,23,.15), transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  pointer-events:none;
}



/* ------------------------------
   A11y helpers
------------------------------ */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.container.section {
    padding-top: 15rem;
}



/* ------------------------------
   Artworks preview
------------------------------ */

.artworks_preview {
  width: 80%;
  height: auto;
  max-width: 1024px;
  margin: 0 auto;
  align-items: center;
  padding-bottom: 5rem;
}