/* Ginny Franks — design system. Palette picked from a shoebill photo:
   feather greys + muted beak yellow. Beak is the only accent. */
:root {
  --grey-light: #E8EAE8;
  --grey-dark: #343A40;
  --paper: var(--grey-light);
  --ink: var(--grey-dark);
  --mist: #9AA3AC;
  --beak: #CDA95F;
  color-scheme: light;
}

/* Dark mode swaps the pointers; everything downstream follows. */
html.dark-mode {
  --paper: var(--grey-dark);
  --ink: var(--grey-light);
  color-scheme: dark;
}

@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100dvh; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  padding: clamp(1rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* ---- Nameplate (doubles as the minimal About) ---- */
.plate { margin: clamp(1.5rem, 7vh, 4.5rem) 0 clamp(2rem, 7vh, 4.5rem); }

.name {
  font-family: "Archivo Black", ui-sans-serif, sans-serif;
  font-size: clamp(3.2rem, 12vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  animation: settle 0.8s ease-out both;
}

.disciplines {
  margin-top: 1.2rem;
  color: var(--beak);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: clamp(0.7rem, 1.6vw, 0.95rem);
  font-weight: 600;
}

@keyframes settle {
  from { letter-spacing: 0.06em; opacity: 0; }
  to   { letter-spacing: -0.02em; opacity: 1; }
}

/* ---- Colophon ---- */
.colophon {
  margin-top: clamp(2rem, 6vh, 4rem);
  color: var(--mist);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ---- Gallery ---- */
.gallery { columns: 1; column-gap: 1.25rem; }
@media (min-width: 640px)  { .gallery { columns: 2; } }
@media (min-width: 1024px) { .gallery { columns: 3; } }

.piece {
  position: relative;
  break-inside: avoid;
  margin-bottom: 1.25rem;
  cursor: pointer;
  animation: rise 0.6s ease-out both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.piece svg,
.piece img { display: block; width: 100%; height: auto; }

.piece:hover,
.piece:focus-visible { outline: 4px solid var(--beak); outline-offset: -4px; }

.piece figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: color-mix(in srgb, var(--ink) 85%, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.piece:hover figcaption,
.piece:focus-visible figcaption { opacity: 1; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Motion off ---- */
@media (prefers-reduced-motion: reduce) {
  .name, .piece { animation: none; }
  .piece figcaption { transition: none; }
}

/* ---- Lightbox ---- */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  width: min(92vw, 860px);
  overflow: visible;
  margin: auto;
}
.lightbox::backdrop { background: rgba(52, 58, 64, 0.88); }

.lightbox-body svg,
.lightbox-body img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }

.lightbox-caption {
  margin-top: 0.75rem;
  color: var(--grey-light);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: -0.9rem;
  right: -0.9rem;
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 50%;
  background: var(--beak);
  color: var(--grey-dark);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- Toggles (theme + language) ---- */
.controls {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
}

.controls button {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--mist);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  cursor: pointer;
}

.controls button:hover,
.controls button:focus-visible {
  border-color: var(--beak);
  color: var(--beak);
}

/* ---- Footer band (the dark feathers' permanent real estate) ---- */
.site-foot {
  margin: clamp(2rem, 6vh, 4rem) calc(-1 * clamp(1rem, 4vw, 3rem))
    calc(-1 * clamp(1rem, 4vw, 3rem));
  padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.site-foot .colophon { margin: 0; color: var(--mist); text-align: left; }

.site-foot nav { display: flex; gap: 1.5rem; }

.site-foot a {
  color: var(--paper);
  text-decoration: none;
  text-transform: uppercase;
}

.site-foot a:hover,
.site-foot a:focus-visible { color: var(--beak); }

/* ---- Subpages (legal) ---- */
.mini-plate {
  font-family: "Archivo Black", ui-sans-serif, sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.mini-plate a { color: var(--ink); text-decoration: none; }
.mini-plate a:hover, .mini-plate a:focus-visible { color: var(--beak); }

.prose { max-width: 62ch; margin: clamp(1.5rem, 5vh, 3rem) 0; }
.prose h1 { font-size: 1.6rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.prose h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mist); }
.prose p { margin-bottom: 0.9rem; line-height: 1.6; }
.prose .updated { color: var(--mist); font-size: 0.8rem; }

/* Exactly one language block visible, driven by <html lang> */
html[lang="es"] [data-lang="en"] { display: none; }
html:not([lang="es"]) [data-lang="es"] { display: none; }