/*
 * TRINI — diseño basado en el PDF de la artista.
 * Acumin se utiliza si está instalada en el dispositivo. Nimbus Sans se incluye
 * como alternativa local. No se necesitan servicios de fuentes externos.
 */
@font-face {
  font-family: "Acumin local";
  src: local("Acumin Variable Concept"), local("Acumin Pro"), local("Acumin-RPro");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Acumin local";
  src: local("Acumin Pro Italic"), local("Acumin-ItPro");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nimbus Sans";
  src: url("./assets/fonts/NimbusSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nimbus Sans";
  src: url("./assets/fonts/NimbusSans-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nimbus Sans Narrow";
  src: url("./assets/fonts/NimbusSansNarrow-Oblique.otf") format("opentype");
  font-weight: 400;
  font-style: oblique;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f4f1ee;
  --ink: #151e25;
  --yellow: #ffdc00;
  --page-width: 1080px;
  --art-width: 816px;
  --page-gutter: clamp(24px, 5vw, 72px);
  font-family: "Acumin local", "Nimbus Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 19px; line-height: 1.5; }
::selection { background: var(--yellow); color: var(--ink); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .22em; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; font-size: inherit; font-weight: 400; }
address, cite { font-style: inherit; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 5;
  padding: 10px 18px;
  background: var(--yellow);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.page { width: min(var(--page-width), calc(100% - var(--page-gutter) * 2)); margin: 0 auto; }

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  grid-template-rows: auto auto;
  column-gap: 32px;
  row-gap: 35px;
  align-items: start;
  padding-top: 58px;
}
.artist-email { grid-column: 1; grid-row: 1; justify-self: start; font-size: 17px; line-height: 1.4; }
.identity { grid-column: 1; grid-row: 2; align-self: end; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 31px; row-gap: 8px; line-height: 1; }
.artist-name { font-size: clamp(44px, 4.6vw, 62px); letter-spacing: -.035em; }
.full-name { font-size: clamp(20px, 2.2vw, 29px); text-transform: uppercase; letter-spacing: -.02em; }
.portrait-mark { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; }
.portrait-mark img { width: 100%; aspect-ratio: 1; }
.yellow { background: var(--yellow); }

.poem {
  max-width: 940px;
  margin-top: 74px;
  margin-bottom: 102px;
  font-family: "Nimbus Sans Narrow", "Acumin local", "Nimbus Sans", Arial, sans-serif;
  font-style: oblique;
  font-size: clamp(22px, 2.1vw, 26px);
  line-height: 1.47;
  letter-spacing: -.015em;
}
.poem-opening { padding-left: 1.5em; animation: arrive 1.4s cubic-bezier(.2,.6,.25,1) both; }
.poem-line { animation: arrive 1.4s cubic-bezier(.2,.6,.25,1) var(--delay, 0s) both; }
.poem-ending { padding-left: 1.2em; }
@keyframes arrive { from { opacity: .15; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.gallery-section + .gallery-section { margin-top: 72px; }
.gallery-contact { max-width: 970px; }
.gallery-contact h2, .gallery-contact h3 { font-size: 22px; line-height: 1.35; }
.gallery-contact address { margin-top: 6px; }
.contact-row { display: flex; flex-wrap: wrap; column-gap: 18px; align-items: baseline; }
.social-note { font-size: .95em; }
.artwork { width: min(100%, var(--art-width)); margin-top: 40px; }
/* Las obras se muestran completas, con su proporción y sus colores originales. */
.artwork > img { width: 100%; height: auto; }
.artwork figcaption { display: flex; flex-wrap: wrap; column-gap: .6em; row-gap: 0; padding-top: 17px; font-style: italic; font-size: 16px; line-height: 1.55; }
.artwork figcaption cite { margin-right: .35em; }
.artwork figcaption span { white-space: nowrap; }

.biography { max-width: 816px; margin-top: 78px; padding-bottom: 98px; font-size: 19px; line-height: 1.65; }
.biography h2 { margin-bottom: 14px; }
.biography p + p { margin-top: 16px; }

@media (max-width: 1020px) {
  .masthead { grid-template-columns: minmax(0, 1fr) 188px; column-gap: 24px; row-gap: 25px; }
  .identity { column-gap: 20px; }
  .full-name { font-size: 22px; }
  .poem { margin-top: 60px; margin-bottom: 80px; }
}

@media (max-width: 680px) {
  body { font-size: 17px; line-height: 1.58; }
  .masthead { padding-top: 28px; grid-template-columns: minmax(0, 1fr) 128px; row-gap: 33px; column-gap: 14px; }
  .artist-email { font-size: 15px; padding-top: 2px; }
  .portrait-mark { grid-row: 1; align-self: start; }
  .identity { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 13px; }
  .artist-name { font-size: 49px; }
  .full-name { font-size: clamp(18px, 4.6vw, 24px); letter-spacing: -.015em; }
  .poem { margin-top: 45px; margin-bottom: 65px; font-size: 23px; line-height: 1.5; }
  .poem-opening { padding-left: 0; margin-bottom: 12px; }
  .poem-line + .poem-line { margin-top: 8px; }
  .poem-ending { padding-left: 1em; }
  .gallery-contact h2, .gallery-contact h3 { font-size: 20px; line-height: 1.4; }
  .gallery-contact address { margin-top: 12px; }
  .desktop-break { display: none; }
  .contact-row { column-gap: 16px; row-gap: 0; }
  .contact-link { display: inline-block; padding-block: 6px; overflow-wrap: anywhere; }
  .phone-row { display: block; }
  .phone-row a { display: block; width: fit-content; }
  .social-note { display: block; flex-basis: 100%; padding-top: 1px; }
  .artwork { margin-top: 25px; }
  .artwork figcaption { font-size: 15px; padding-top: 12px; column-gap: .45em; }
  .artwork figcaption cite { flex-basis: 100%; margin-right: 0; }
  .gallery-section + .gallery-section { margin-top: 51px; }
  .biography { margin-top: 52px; padding-bottom: 60px; font-size: 17px; line-height: 1.7; }
  .biography h2 { margin-bottom: 20px; }
  .biography p + p { margin-top: 20px; }
}

@media (max-width: 359px) {
  :root { --page-gutter: 20px; }
  .masthead { grid-template-columns: minmax(0, 1fr) 104px; gap: 29px 8px; }
  .artist-email { font-size: 14px; }
  .full-name { font-size: 18px; }
  .poem { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .page { width: 100%; }
  .masthead { padding-top: 0; }
  .poem { margin-block: 32px; }
  .artwork { max-width: 70%; break-inside: avoid; }
  .biography { padding-bottom: 0; }
  .skip-link { display: none; }
}