/* ============================================================
   artofandres — Andres Gallardo, art portfolio site
   Real preference from his intake form: "Bright and minimal",
   black & white logo/branding. Style refs he gave: Kehinde Wiley,
   Shepard Fairey, Banksy, Daniel Arsham — bold, high-contrast,
   gallery-clean. No color accent — true black & white by request.
   ============================================================ */
:root {
  --bg: #ffffff;
  --surface: #f4f4f2;
  --border: #e2e2df;
  --text: #111111;
  --muted: #6b6b68;
  --radius: 0px; /* gallery-sharp: no rounded corners anywhere */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}
h1, h2, h3 { font-family: "Jost", Inter, sans-serif; font-weight: 500; letter-spacing: 0.03em; margin: 0; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* ---------- ACCESSIBILITY ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--text); color: #fff;
  padding: 12px 20px; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .js-zoom:focus-visible {
  outline: 2px solid var(--text); outline-offset: 2px;
}

/* ---------- NAV (always hamburger, no persistent links — kehindewiley.com style) ---------- */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand__wm { font-family: "Jost", sans-serif; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.14em; color: var(--text); }
.nav__burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 210; }
.nav__burger span { width: 26px; height: 2px; background: var(--text); border-radius: 2px; }

/* Full-screen overlay menu */
.nav__overlay {
  position: fixed; inset: 0; background: rgba(17,17,17,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
}
.nav__overlay.is-open { opacity: 1; visibility: visible; }
body.nav-open, body.lb-open { overflow: hidden; }
.nav__overlay-close {
  position: absolute; top: 26px; right: 26px; background: none; border: none; color: #fff;
  font-weight: 500; letter-spacing: 0.22em; font-size: 0.8rem; cursor: pointer; padding: 10px;
  transition: color 0.2s;
}
.nav__overlay-close:hover { color: #a6a4a0; }
.nav__overlay-links { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.nav__overlay-links a {
  font-family: "Jost", sans-serif; font-weight: 300; font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  letter-spacing: 0.24em; text-transform: uppercase; color: #fff;
  opacity: 0; transform: translateY(14px); transition: color 0.2s;
}
.nav__overlay-links a:hover { color: #a6a4a0; }
/* links rise in one after another when the overlay opens */
.nav__overlay.is-open .nav__overlay-links a { animation: navRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(1) { animation-delay: 0.08s; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(2) { animation-delay: 0.14s; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(3) { animation-delay: 0.20s; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(4) { animation-delay: 0.26s; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(5) { animation-delay: 0.32s; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(6) { animation-delay: 0.38s; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(7) { animation-delay: 0.44s; }
@keyframes navRise { to { opacity: 1; transform: none; } }
.nav__overlay-social {
  position: absolute; bottom: 34px; left: 0; right: 0; text-align: center;
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s ease 0.45s;
}
.nav__overlay.is-open .nav__overlay-social { opacity: 1; }
.nav__overlay-social a { color: #a6a4a0; }
.nav__overlay-social a:hover { color: #fff; }

/* ---------- HERO ---------- */
.hero { padding: 130px 0 100px; text-align: center; }
/* Faint portrait behind the hero: Andres seated among his canvases (his choice, 9 Sep 2026;
   the Panama-flag portrait moved to About). Sized to hero height so the full 4:5 crop always
   fits — tune visibility via opacity (0.22 at launch, 0.30 since 10 Sep 2026 at his request). */
.hero--portrait { position: relative; overflow: hidden; }
.hero--portrait::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("assets/hero-portrait.jpg") center top / auto 100% no-repeat;
  opacity: 0.30; filter: grayscale(100%);
}
.hero--portrait::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 55%, var(--bg) 98%);
}
.eyebrow { color: var(--muted); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.74rem; }
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.6rem); font-family: "Jost", sans-serif; font-weight: 300;
  letter-spacing: 0.01em; line-height: 1.22; margin: 22px auto 0; max-width: 860px;
}

/* ---------- STATEMENT / PULL QUOTE ---------- */
.quote { padding: 100px 0; text-align: center; }
.quote p {
  font-family: "Jost", sans-serif; font-weight: 300; font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.4; max-width: 820px; margin: 0 auto;
}
.quote p b { font-weight: 500; }
/* The statement's spot on the home page is a single large link (Dave, 10 Sep 2026) */
.quote__link { border-bottom: 1px solid var(--text); padding-bottom: 6px; transition: color 0.2s, border-color 0.2s; }
.quote__link:hover { color: var(--muted); border-color: var(--muted); }
/* The same block inside a section (GEM page, between the first-GEM pair and the slideshow) */
.quote--inset { padding: 64px 0 0; }
.quote__rule { width: 56px; height: 1px; background: var(--text); margin: 0 auto 34px; }

/* ---------- BUTTONS (squared, spaced uppercase — gallery style) ---------- */
.btn {
  display: inline-block; padding: 15px 30px; border-radius: 0; font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--text); transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn--primary { background: var(--text); color: #fff; }
.btn--primary:hover { background: #fff; color: var(--text); }
.btn--ghost { border-color: var(--text); color: var(--text); background: transparent; }
.btn--ghost:hover { background: var(--text); color: #fff; }

/* ---------- SECTIONS ---------- */
.section { padding: 100px 0; }
.section--alt { background: var(--surface); }
.section__title {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 400; letter-spacing: 0.3em;
  text-transform: uppercase; text-align: center;
}
.section__title::after { content: ""; display: block; width: 42px; height: 1px; background: var(--text); margin: 20px auto 0; }
.section__lead { color: var(--muted); text-align: center; max-width: 560px; margin: 22px auto 0; }
.section__note { color: var(--muted); text-align: center; margin-top: 22px; font-size: 0.92rem; }
.section--first { padding-top: 60px; }
.see-all { text-align: center; margin-top: 14px; }
.see-all a { font-weight: 600; border-bottom: 2px solid var(--text); }
.work__cat { font-family: "Jost", sans-serif; font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.24em; margin: 56px 0 4px; }
.work__cat:first-of-type { margin-top: 40px; }

/* ---------- PRESS ---------- */
.press-list { max-width: 640px; margin: 40px auto 0; padding: 0; list-style: none; }
.press-list li {
  padding: 22px 4px; border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; font-weight: 500; font-family: "Jost", sans-serif; letter-spacing: 0.04em;
  transition: padding-left 0.25s ease;
}
.press-list li:first-child { border-top: 1px solid var(--border); }
.press-list li:hover { padding-left: 14px; }

/* Rich press entries (publication / year / pull-quote / link) */
.press-entries { max-width: 780px; margin: 54px auto 0; }
.press-entry { padding: 36px 4px; border-bottom: 1px solid var(--border); }
.press-entry:first-child { border-top: 1px solid var(--border); }
.press-entry__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.press-entry__pub { font-family: "Jost", sans-serif; font-weight: 500; font-size: 0.85rem; letter-spacing: 0.24em; text-transform: uppercase; }
.press-entry__year { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.2em; }
.press-entry__quote { font-family: "Jost", sans-serif; font-weight: 300; font-size: 1.3rem; line-height: 1.5; margin: 16px 0 0; }
.press-entry__quote::before { content: "\201C"; }
.press-entry__quote::after { content: "\201D"; }
.press-entry__desc { color: var(--muted); margin: 12px 0 0; font-size: 0.95rem; }
.press-entry__meta + .press-entry__desc { margin-top: 14px; }
.press-entry__link { display: inline-block; margin-top: 16px; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid var(--text); padding-bottom: 2px; }
.press-entry__link:hover { color: var(--muted); border-color: var(--muted); }
.press-list .press-entry__link { display: block; width: fit-content; margin-top: 10px; font-family: Inter, sans-serif; font-weight: 500; }
.press-entry__video { aspect-ratio: 16 / 9; margin-top: 22px; background: var(--surface); border: 1px solid var(--border); }
.press-entry__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.press-entry__credits { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.04em; margin: 12px 0 0; }
.press-entry__clip { margin: 22px 0 0; max-width: 260px; }
.press-entry__clip img { width: 100%; height: auto; display: block; border: 1px solid var(--border); cursor: zoom-in; }
.press-entry__clip figcaption { color: var(--muted); font-size: 0.74rem; line-height: 1.5; margin-top: 8px; }

/* Featured TEDx block */
.ted-feature { max-width: 880px; margin: 54px auto 0; }
.ted-feature__label { text-align: center; font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.ted-feature__frame { aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.85rem; }
.ted-feature__frame iframe { width: 100%; height: 100%; border: 0; }
.ted-feature__caption { text-align: center; color: var(--muted); font-size: 0.92rem; margin: 16px auto 0; max-width: 640px; }

/* Homepage "as featured in" strip */
/* The gap between the headline and the press strip holds the height the two buttons used to take
   (removed 10 Sep 2026), so the hero, and the portrait sized to it, stay the size Andres saw. */
.press-strip { margin-top: 139px; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; }

/* ---------- SPEAKING PHOTOS ---------- */
.speak-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 980px; margin: 44px auto 0; }
.speak-photos figure { margin: 0; }
.speak-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--surface); cursor: zoom-in; }
.speak-photos figcaption { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 10px; text-align: center; }
@media (max-width: 760px) { .speak-photos { grid-template-columns: 1fr; } }

/* ---------- GEM MOVEMENT PAGE ---------- */
.gem-acronym { display: flex; justify-content: center; gap: clamp(18px, 5vw, 64px); margin: 48px auto 0; text-align: center; }
.gem-acronym div { max-width: 200px; }
.gem-acronym b { display: block; font-family: "Jost", sans-serif; font-weight: 300; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; }
.gem-acronym span { display: block; margin-top: 10px; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.gem-story { max-width: 680px; margin: 44px auto 0; color: var(--muted); }
.gem-story p + p { margin-top: 16px; }

/* Slideshow: edge to edge, square tiles, five per page on desktop and two on phones (site.js reads
   the count from the layout). Auto-advance + drag/swipe to browse. It sits outside .container. */
.slideshow { position: relative; width: 100%; margin: 48px 0 0; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.slideshow.is-dragging { cursor: grabbing; }
.slideshow__track { display: flex; gap: 6px; }
.slideshow__track img {
  width: calc((100% - 24px) / 5); aspect-ratio: 1; object-fit: cover; flex: none;
  display: block; pointer-events: none; -webkit-user-drag: none; background: var(--surface);
}
@media (max-width: 760px) { .slideshow__track img { width: calc((100% - 6px) / 2); } }

/* The first gem and the first finders: a square pair under the story */
.gem-origin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 680px; margin: 40px auto 0; }
.gem-origin figure { margin: 0; }
.gem-origin img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface); cursor: zoom-in; }
.gem-origin figcaption { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 10px; text-align: center; }

/* A finder's own words */
.hunter-quote { max-width: 680px; margin: 40px auto 0; padding: 0 0 0 22px; border-left: 1px solid var(--text); }
.hunter-quote p { font-family: "Jost", sans-serif; font-weight: 300; font-size: 1.2rem; line-height: 1.6; margin: 0; }
.hunter-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* ---------- HOME ROWS: five images edge to edge on desktop (they share the width, so nothing is
   cut off); a natural touch-swipe strip on phones. The row sits outside .container. ---------- */
.img-scroller {
  width: 100%; overflow-x: auto; overflow-y: hidden; margin-top: 16px; margin-bottom: 8px;
  scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
}
.img-scroller::-webkit-scrollbar { display: none; }
.img-scroller__track { display: flex; gap: 6px; width: 100%; }
.img-scroller__track img {
  flex: 1 1 0; min-width: 0; width: auto; aspect-ratio: 4/5; object-fit: cover;
  pointer-events: none; display: block; user-select: none; -webkit-user-drag: none; scroll-snap-align: start;
}
.img-scroller__track img.js-zoom { pointer-events: auto; cursor: zoom-in; }
@media (max-width: 760px) {
  .img-scroller__track { width: max-content; }
  .img-scroller__track img { flex: none; width: 78vw; }
}

/* Fine Art page (and the GEM locations): a quiet, responsive grid. */
/* minmax(0, 1fr): columns stay equal whatever a browser thinks a tile's minimum content width is */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.section__lead + .work-grid { margin-top: 44px; }
.work-grid img { width: 100%; max-width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: var(--surface); cursor: zoom-in; }
@media (max-width: 760px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } }
/* Captioned tiles: Fine Art (title, year · status) and the GEM locations. The lightbox opens data-full. */
.work-grid figure { margin: 0; min-width: 0; width: 100%; }
.work-grid figcaption {
  min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 8px 0 10px;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.45;
}
.work-grid .cap__title { color: var(--text); }
.work-grid .cap__status { flex: none; color: var(--muted); }
.work-grid--places figcaption { justify-content: center; color: var(--muted); }
@media (max-width: 760px) {
  .work-grid figcaption { flex-direction: column; gap: 2px; margin: 6px 0 8px; }
}

/* ---------- ABOUT ---------- */
.about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.about__photo { aspect-ratio: 4/5; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.about__text .section__title { text-align: left; }
.about__text .section__title::after { margin-left: 0; }   /* the rule sits under a left-aligned heading here */
.about__text p { color: var(--muted); margin-top: 14px; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } .about__text .section__title { text-align: center; } .about__text .section__title::after { margin-left: auto; } }

/* ---------- COMMISSIONS ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 44px; }
@media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card { background: var(--bg); border: none; border-radius: 0; padding: 34px 24px; text-align: center; transition: background 0.25s; }
.svc-card:hover { background: var(--surface); }
.svc-card h3 { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.svc-card__price { font-family: "Jost", sans-serif; font-size: 1.7rem; font-weight: 300; margin: 14px 0 8px; }
.svc-card__desc { color: var(--muted); font-size: 0.9rem; }
.calc-note {
  max-width: 640px; margin: 30px auto 0; background: var(--bg); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 18px 22px; font-size: 0.9rem; color: var(--muted); text-align: center;
}

/* ---------- CONTACT / FORM ---------- */
.contact { text-align: center; }
.form { max-width: 560px; margin: 34px auto 0; text-align: left; }
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 0; color: var(--text);
  padding: 11px 13px; font: inherit; font-size: 0.96rem; width: 100%;
}
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); }
.contact__social { margin-top: 24px; font-weight: 700; }

/* ---------- FOOTER ---------- */
.footer { padding: 26px 0; border-top: 1px solid var(--border); }
.footer__inner { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 0.85rem; flex-wrap: wrap; gap: 10px; }

/* ---------- SCROLL REVEALS (classes applied by site.js only) ---------- */
.rv { opacity: 0; transform: translateY(22px); }
.rv.rv-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease var(--rvd, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) var(--rvd, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .nav__overlay { transition: none; }
  .nav__overlay.is-open .nav__overlay-links a { animation: none; opacity: 1; transform: none; }
  .nav__overlay-social { transition: none; }
}

/* ---------- LIGHTBOX (white-gallery style; markup injected by site.js when .js-zoom images exist) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 250; background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 48px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92%; max-height: 86vh; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28); }
.lightbox__close {
  position: absolute; top: 26px; right: 26px; background: none; border: none; color: var(--text);
  font-weight: 500; letter-spacing: 0.22em; font-size: 0.8rem; cursor: pointer; padding: 10px;
}
.lightbox__close:hover { color: var(--muted); }
.lightbox figcaption {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* ---------- MOBILE POLISH ---------- */
@media (max-width: 760px) {
  .container { padding: 0 22px; }
  .hero { padding: 84px 0 64px; }
  .press-strip { margin-top: 207px; }
  .section { padding: 68px 0; }
  .quote { padding: 64px 0; }
  .nav__overlay-links { gap: 22px; }
  .work__cat { margin-top: 42px; }
}