/* atesoraroseta: layout classes.

   The canvas artboards (design/canvas/source/*.dc.html) keep their layout values in inline styles; this file
   holds exactly those values as classes, next to site.css (tokens, type, states and responsive rules, copied
   from design/site.css). Colours the canvas writes as hex are the same tokens (#A8A59F is --ink-2,
   #2A2A29 is --surface, rgba(236, 234, 230, .12) is --line). The only inline styles left on public pages are
   each Obra tile's frame width and aspect ratio.

   Class names (layout only; site.css still styles .wordmark, .nav-link, .label, .text-link, .quiet-link,
   .work, .work-frame, .work-img, .hover-label, .photo-grid, .photo and .detail):
     shell        body.page, .container, .site-header, .wordmark, .nav-list, .nav-link, .visually-hidden,
                  .main-obra, .main-artwork, .main-posters, .main-about, .main-contact (each page's <main>)
     Obra         .work-grid, .work-img, .hover-label (artwork tile inset)
     artwork      .preview-notice, .back-link, .artwork-hero, .artwork-media, .artwork-img, .artwork-text,
                  .artwork-title, .artwork-data, .artwork-data-row, .artwork-medium, .artwork-description,
                  .details-link, .details, .details-title, .details-columns, .detail, .detail-img,
                  .pager, .pager-link, .pager-next, .pager-label, .pager-title
     Torn Posters .posters-intro, .photo, .photo-img, .photo .hover-label (photo inset), .photo .hover-title
     Sobre mí     .about, .about-portrait, .about-portrait-img, .about-text, .about-lead, .about-body
     Contacto     .page-label, .contact, .contact-headline, .contact-email, .contact-links,
                  .contact-link-group, .contact-handle
     404          the Contacto classes plus .not-found-text
     shared       .standalone-link (Sobre mí's "Escríbeme", the 404's link), .rich-text (Action Text) */

/* Shell. No global reset: like the canvas, only the body margin goes, and every element sets its own. */
body { margin: 0; }

.container {
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4.45vw, 64px);
  padding-bottom: clamp(64px, 8.4vw, 120px);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 40px;
  padding-top: clamp(16px, 2.8vw, 40px);
  padding-bottom: clamp(12px, 2.5vw, 36px);
}

.wordmark { display: block; padding-block: 8px; line-height: 1; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(14px, 2.2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link { display: block; padding-block: 12px; line-height: 20px; }

/* The home and Torn Posters h1s: read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.main-obra { padding-top: clamp(8px, 1.1vw, 16px); }
.main-artwork { padding-top: clamp(4px, 0.6vw, 8px); }
.main-posters { padding-top: clamp(8px, 1.1vw, 16px); }
.main-about { padding-top: clamp(8px, 1.7vw, 24px); }
.main-contact { padding-top: clamp(40px, 8.4vw, 120px); }

/* Obra: the grid of 4:5 cells (site.css .work); each frame's width and aspect-ratio are inline. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(36px, 3.9vw, 56px);
}

.work-img { display: block; width: 100%; height: 100%; object-fit: contain; }

.hover-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  box-sizing: border-box;
  max-width: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 14px 12px;
  border-radius: 2px;
}

/* Artwork page */

/* Shown only to a signed-in admin on an unpublished work; visitors get a 404 instead. */
.preview-notice {
  margin: 0 0 8px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-size: 13px;
  line-height: 20px;
  color: var(--accent);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 12px;
  font-size: 11.5px;
  line-height: 20px;
  font-weight: 450;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.artwork-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 4.45vw, 64px);
  margin-top: clamp(8px, 1.7vw, 24px);
}

.artwork-media { flex: 999 1 560px; min-width: 0; display: flex; justify-content: center; }

/* The canvas sets width: auto; height: auto, which leaves no box before the image arrives, so the text below
   it jumps on phones (CLS 0.36). Here the width attribute (the original's width) sizes the box instead, capped
   by the column; the height follows the attributes' ratio, capped at 860px; and object-fit: contain centres a
   tall work in that box, with transparent sides and its shadow on the image alone. Same picture, no shift. */
.artwork-img {
  display: block;
  height: auto;
  max-width: 100%;
  max-height: 860px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.30)) drop-shadow(0 24px 40px rgba(0, 0, 0, 0.48));
}

.artwork-text {
  flex: 1 1 300px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 6px;
}

.artwork-title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.artwork-data { margin: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.artwork-data-row { display: flex; gap: 16px; padding-block: 13px; border-top: 1px solid var(--line); }
.artwork-data dt { flex: 0 0 84px; padding-top: 4px; }
.artwork-data dd { margin: 0; font-size: 15px; line-height: 22px; }
.artwork-data .artwork-medium { text-wrap: pretty; }

.artwork-description { font-size: 15px; line-height: 1.75; color: var(--ink-2); }

.details-link {
  align-self: flex-start;
  padding-block: 12px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.04em;
}

.details { margin-top: clamp(64px, 8.4vw, 120px); }
.details-title { margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.details-columns { columns: 3 300px; column-gap: 24px; }
.detail { margin: 0 0 24px; background: var(--surface); }
.detail-img { display: block; width: 100%; height: auto; }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: clamp(48px, 6.7vw, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.pager-link { display: flex; flex-direction: column; gap: 8px; padding-block: 8px; }
.pager-next { align-items: flex-end; margin-left: auto; text-align: right; }

.pager-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.pager-title { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.2; color: var(--ink); }

/* Torn Posters: square photos (site.css .photo-grid and .photo), each cropped like object-fit: cover. */
.posters-intro {
  max-width: 520px;
  margin: 8px 0 clamp(28px, 2.8vw, 40px);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.photo { background-color: var(--surface); }
.photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.photo .hover-label { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 13px 11px; }
.photo .hover-title { font-size: 20px; }

/* Sobre mí */
.about { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(40px, 6.7vw, 96px); }

.about-portrait {
  flex: 1 1 320px;
  max-width: 540px;
  aspect-ratio: 4 / 5;
  margin: 0;
  background-color: var(--surface);
}

.about-portrait-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.about-text {
  flex: 1 1 420px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 4px;
}

.about-lead {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.65vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.about-body { font-size: 16px; line-height: 1.75; }

/* Contacto, and the 404, which reuses its structure */
.page-label { margin: 0; }

.contact { max-width: 920px; display: flex; flex-direction: column; gap: 22px; }

.contact-headline {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6.7vw, 96px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.contact-email {
  align-self: flex-start;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.35vw, 48px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  margin-top: clamp(28px, 3.9vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.contact-link-group { display: flex; flex-direction: column; gap: 6px; }

.contact-handle {
  align-self: flex-start;
  padding-block: 10px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.02em;
}

/* The 404's text: the body style (Jost 16/1.75) at Sobre mí's text-column width. */
.not-found-text { max-width: 640px; margin: 0; font-size: 16px; line-height: 1.75; text-wrap: pretty; }

/* A text link on its own line in a column: Sobre mí's "Escríbeme" and the 404's link home. */
.standalone-link {
  align-self: flex-start;
  padding-block: 12px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.02em;
}

/* Rich text (Action Text with Lexxy: the artwork description and the Sobre mí body). The editor's CSS isn't
   loaded on public pages; the wrapper (.artwork-description or .about-body) sets the type, and blocks are
   spaced 1.5em apart: 24px between Sobre mí's 16px paragraphs, as in the canvas. Links look like .text-link. */
.rich-text :where(p, ul, ol, blockquote, pre, figure, h1, h2, h3, h4, h5, h6) { margin: 0; }
.rich-text .lexxy-content > * + * { margin-top: 1.5em; }
.rich-text p { text-wrap: pretty; }
.rich-text :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; line-height: inherit; font-weight: 500; }
.rich-text :where(ul, ol) { padding-left: 1.25em; }
.rich-text blockquote { padding-left: 1em; border-left: 1px solid var(--line); }
.rich-text mark { background: none; color: inherit; }
.rich-text img { max-width: 100%; height: auto; }

.rich-text a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}

.rich-text a:hover { color: var(--accent); text-decoration-color: currentColor; }