/* ===========================================================================
   alainavarrone.com — static rebuild
   Every value below is lifted from the archived Wix theme
   (theme_fonts / theme_colors / component styles mg2, hc3, style-jt7jw0l1).
   =========================================================================== */

/* ---- fonts: self-hosted, see assets/fonts/fonts.css ---- */
@import url("../fonts/fonts.css");

:root {
  /* palette — from Wix theme_colors */
  --paper:      #FEFDFD;  /* color_1  site + header background */
  --ink:        #62483D;  /* color_20 body text, gallery captions */
  --ink-strong: #3D2C22;  /* color_15 */
  --ink-nav:    #3B272C;  /*          nav labels */
  --accent:     #8E6C57;  /* color_18 display headings */
  --peach:      #F4B08B;  /* color_12 gallery hover overlay */
  --blush:      #F9D6C4;  /* color_11 */
  --plum:       #764E58;  /* color_5-ish, menu borders */
  --rule:       rgba(98, 72, 61, 0.18);

  /* type — from Wix theme_fonts */
  --font-display: "Kelly Slab", Georgia, serif;      /* font_3/4/6 */
  --font-script:  "Lobster", Georgia, cursive;       /* font_0 */
  --font-market:  "Chelsea Market", Georgia, serif;  /* font_2 */
  --font-body:    "Enriqueta", Georgia, serif;       /* font_5/7/8/9 */
  --font-hand:    "Fredericka the Great", Georgia, serif; /* HOME captions */

  /* layout — Wix content width was 980px */
  --measure: 980px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: normal normal normal 16px/1.6 var(--font-body);
  padding-inline: var(--gutter);
}

/* height:auto is load-bearing: without it the HTML height attribute
   overrides aspect-ratio and every image renders stretched. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }

.wrap { max-width: var(--measure); margin-inline: auto; }

/* ---------------------------------------------------------------- header -- */
.masthead { padding-block: 8px 0; }

.masthead__logo {
  display: block;
  max-width: 768px;      /* WPht0-n6t layout width */
  height: auto;
  margin-inline: auto;
}

/* ------------------------------------------------------------------- nav -- */
/* The Wix skin was SeparateBasicMenuButtonSkin: three discrete outlined
   buttons filling the 980px measure, not a continuous bar.
   Label style from style-jt7jw0l1repeaterButtonlabel. */
.nav { margin-block: 14px 30px; }
.nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list a {
  display: block;
  padding: 9px 10px;
  border: 1px solid var(--plum);
  text-align: center;
  font: normal normal 700 22px/1.4 var(--font-display);
  color: var(--ink-nav);
  text-decoration: none;
  transition: color .4s ease, background-color .4s ease, border-color .4s ease;
}
.nav__list a:hover { background: var(--blush); }
.nav__list a[aria-current="page"] {
  border-width: 2px;
  border-color: var(--ink-strong);
}

/* ------------------------------------------------------------------ main -- */
main { padding-block: 40px 64px; }

h1, h2, h3 { margin: 0 0 .6em; font-weight: 700; color: var(--ink); }
h1 { font: normal normal 700 40px/1.3 var(--font-display); }   /* font_4 */
h2 { font: normal normal normal 33px/1.1 var(--font-market); } /* font_2 */
h3 { font: normal normal normal 19px/1.3 var(--font-display); }/* font_6 */
p  { margin: 0 0 1.1em; }

.page-title {
  text-align: center;
  margin-bottom: 1.4em;
}

/* ------------------------------------------------------------ home grid -- */
/* The originals were circular crops: three across, then blog centred below. */
.links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 36px;
  max-width: 900px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}
.links__item { text-align: center; }
.links__item:nth-child(4) { grid-column: 2; }   /* blog, centred on its own row */
.links__item a { text-decoration: none; display: block; }
.links__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  transition: opacity .3s ease;
}
.links__item a:hover .links__thumb { opacity: .82; }
.links__label {
  display: block;
  margin-top: .55em;
  /* the original set these inline: Fredericka the Great, bold, underlined */
  font: normal normal 700 30px/1.2 var(--font-hand);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .1em;
}
@media (max-width: 700px) {
  .links { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .links__item:nth-child(4) { grid-column: auto; }
}
@media (max-width: 420px) {
  .links { grid-template-columns: 1fr; max-width: 280px; }
}

/* -------------------------------------------------------------- artist  -- */
.artist { display: grid; grid-template-columns: 293px 1fr; gap: 48px; align-items: start; }
.artist__portrait { width: 100%; height: auto; }
.artist__bio { font-size: 16px; }
@media (max-width: 720px) {
  .artist { grid-template-columns: 1fr; gap: 28px; }
  .artist__portrait { max-width: 293px; margin-inline: auto; }
}

/* ------------------------------------------------------------- gallery  -- */
/* mg2: hover overlay rgba(244,176,139,.85); title Kelly Slab 19px;
   description Enriqueta 14px; both #62483D */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile { position: relative; margin: 0; }
.tile > a {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--blush);
  text-decoration: none;
}
.tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.tile__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .25em;
  padding: 10px;
  background: rgba(244, 176, 139, 0.85);
  opacity: 0;
  transition: opacity .4s ease;
}
.tile > a:hover .tile__caption,
.tile > a:focus-visible .tile__caption { opacity: 1; }
.tile__title {
  font: normal normal normal 19px/1.3 var(--font-display);
  color: var(--ink);
}
.tile__meta {
  font: normal normal normal 14px/1.3 var(--font-body);
  color: var(--ink);
  white-space: pre-line;
}

/* ------------------------------------------------------------- lightbox -- */
/* Progressive enhancement only: with JS off, every tile is a plain link to
   the full-size image, which still works. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(61, 44, 34, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
}
.lightbox img {
  max-width: min(100%, 1400px);
  max-height: 78vh;
  width: auto;
  object-fit: contain;
}
.lightbox__cap {
  color: var(--paper);
  text-align: center;
  font: normal normal normal 16px/1.4 var(--font-body);
}
.lightbox__cap b {
  display: block;
  font: normal normal normal 22px/1.3 var(--font-display);
}
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--paper);
  font: normal normal 700 32px/1 var(--font-display);
  cursor: pointer;
  padding: 12px 18px;
}
.lightbox__close { top: 8px; right: 10px; }
.lightbox__prev  { left: 4px;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 4px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: 4px; transform: none; }
}

/* --------------------------------------------------------------- a11y   -- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- footer   -- */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: 18px 28px;
  text-align: center;
  font: normal normal normal 12px/1.3 var(--font-body);
  color: var(--ink);
}
.footer a { color: var(--ink); }

@media (max-width: 640px) {
  .nav__list a { padding: 7px 4px; font-size: 15px; }
  h1 { font-size: 30px; }
}
@media (max-width: 380px) {
  .nav__list { grid-template-columns: 1fr; }
}