/* Katalina Villegas: public site.
   A white wall, black ink, and the work. Roboto only (the brand's face). The one bold move is the
   archive, which hangs works to scale; everything else stays quiet so the work carries the colour. */
:root {
  --wall: #ffffff;
  --ink: #000000;
  --label: #666666;
  --label-light: #b3b3b3; /* --label 50% lighter, halfway to white (Al, 2026-11-05) */
  --rule: #e4e4e4;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 34rem;
  --f-13: 0.8125rem; --f-16: 1rem; --f-21: 1.3125rem; --f-34: 2.125rem; --f-54: 3.375rem;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wall); color: var(--ink);
  font: 400 var(--f-16)/1.55 "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-kerning: normal; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--label); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -3rem; background: var(--wall); padding: 0.5rem 0; }
.skip:focus { top: 0.5rem; }

/* masthead: the name, small and steady; the work is what's large */
.masthead {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 2rem; align-items: baseline;
  padding: clamp(8px, 1vw, 12px) var(--gutter) 0;
}
/* the other language: not part of the menu, alone in the top right corner, a step smaller (Al, 2026-11-04).
   Out of the grid flow so the logo sits at the top (Al, 2026-11-05); it and the menu sit twice the gutter in from the right. */
.masthead .lang { position: absolute; top: clamp(12px, 1.5vw, 20px); right: calc(var(--gutter) * 2); font-size: var(--f-13); color: var(--label); text-decoration: none; }
.masthead .lang:hover { color: var(--ink); }
.name { text-decoration: none; font-weight: 300; font-size: var(--f-21); letter-spacing: 0.01em; }
.name img { height: 144px; width: auto; max-width: 40vw; } /* 3x (Al, 2026-11-05); 40vw keeps it inside a phone */
/* the menu in the role line's face: small caps-style, grey (Al, 2026-11-05) */
.masthead nav { justify-self: end; margin-right: var(--gutter); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.5rem;
  font-size: var(--f-13); text-transform: uppercase; letter-spacing: 0.08em; }
.masthead nav a { color: var(--label); text-decoration: none; padding: 0.25rem 0; border-bottom: 1px solid transparent; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ink); }
.masthead nav a[aria-current="page"] { border-bottom-color: var(--ink); }

main { padding: 0 var(--gutter); }
.page-title { font-weight: 300; font-size: clamp(var(--f-34), 5vw, var(--f-54)); line-height: 1.1; margin: clamp(24px, 6vw, 72px) 0 1rem; letter-spacing: -0.01em; }
.lede { color: var(--label); max-width: var(--measure); margin-bottom: clamp(32px, 6vw, 72px); }

/* the wall label: how a museum captions a work */
.label { font-size: var(--f-13); line-height: 1.45; color: var(--label); }
.label .label-title { color: var(--ink); font-weight: 500; font-size: var(--f-16); }
.label .label-year { font-weight: 400; }

/* home: who she is, before the work */
.intro { max-width: var(--measure); padding: 0; display: grid; gap: 0.5rem; }
.intro-role { color: var(--label-light); font-size: var(--f-13); text-transform: uppercase; letter-spacing: 0.08em; }

/* home: one work per wall, centred, its label under it starting at the photo's left edge (Al, 2026-11-04).
   The column is as wide as the photo; the label adds no width (width 0, min-width 100%), so a long
   title wraps under a narrow portrait instead of widening the column and pulling the photo off-centre. */
.wall { list-style: none; margin: 0; padding: 0; }
.hung {
  display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; gap: 1rem;
  padding: clamp(24px, 6vh, 64px) 0 clamp(56px, 14vh, 160px);
}
.hung-img img { max-height: 84vh; width: auto; margin: 0 auto; }
/* the first work is seen whole before the fold: it starts just under the role line and its height leaves
   room for the masthead above it (Al, 2026-11-05) */
.wall .hung:first-child { padding-top: clamp(12px, 2vh, 24px); }
.wall .hung:first-child .hung-img img { max-height: calc(100vh - var(--above-first)); max-height: calc(100svh - var(--above-first)); }
.wall { --above-first: 15rem; }
/* biography: her photos hung the same way, with no captions (Al, 2026-11-05) */
.bio-wall .hung > img { max-height: 84vh; width: auto; margin: 0 auto; }
.bio-wall .hung:first-child > img { max-height: calc(100vh - var(--above-first)); max-height: calc(100svh - var(--above-first)); }
.hung .label { width: 0; min-width: 100%; }
.onward { padding: 0 0 clamp(56px, 10vw, 120px); font-size: var(--f-21); font-weight: 300; }

/* archive: works hung to scale along a shared sightline (bottom edges align, like a gallery wall) */
.series { margin-bottom: clamp(48px, 9vw, 112px); }
.series.untitled { padding-top: 0.5rem; }
.series h2 { font-weight: 400; font-size: var(--f-21); margin: 0 0 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.hang { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2.75rem 2.25rem; }
.hang a { display: block; text-decoration: none; }
.hang img { height: var(--h); width: auto; max-width: min(100%, 86vw); object-fit: contain; }
.hang-cap { display: block; margin-top: 0.6rem; font-size: var(--f-13); color: var(--label); max-width: 18rem; }
.hang-title { color: var(--ink); }
.hang a:hover .hang-title { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 599px) { .hang img { height: calc(var(--h) * 0.72); } }

/* a single work: photo centred on the page, its label hanging to the right on the photo's bottom sightline
   (Al, 2026-11-05). Equal side columns keep the photo truly centred: the left one is empty, the right one
   holds the label, so the photo's widest is the page minus two label columns. Below 1100px there's no room
   for that, so the label drops under the photo, flush with its right edge. Like the home page's .hung, the
   middle column is as wide as the photo and the label adds no width (width 0, min-width 100%). */
.work { display: grid; gap: 1.25rem; padding-bottom: clamp(56px, 10vw, 120px); }
.work-main { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; gap: 1rem; }
.work-hero { margin: clamp(8px, 2vw, 24px) 0 0; }
.work-hero a { display: block; cursor: zoom-in; }
.work-hero img { max-height: calc(100vh - 16rem); max-height: calc(100svh - 16rem); width: auto; margin: 0 auto; }
.work-label { width: 0; min-width: 100%; text-align: right; }
.work-prose { margin: 1rem auto 0; width: min(100%, var(--measure)); }
@media (min-width: 1100px) {
  .work-main { grid-template-columns: minmax(14rem, 1fr) minmax(0, max-content) minmax(14rem, 1fr); justify-content: stretch; column-gap: 2.5rem; row-gap: 0; }
  .work-hero { grid-column: 2; grid-row: 1; }
  .work-hero img { max-height: calc(100vh - 9rem); max-height: calc(100svh - 9rem); }
  .work-label { grid-column: 3; grid-row: 1; align-self: end; width: auto; min-width: 0; max-width: 14rem; text-align: left; }
}
.prose p + p { margin-top: 1em; }
.prose { max-width: var(--measure); }
.details { display: grid; gap: var(--gutter); margin: clamp(48px, 8vw, 96px) auto 0; max-width: 72rem; }
@media (min-width: 700px) { .details { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* a work's making: a short strip under the finished piece, quieter than the details */
.process { margin-top: clamp(48px, 8vw, 96px); }
.process-h { font-weight: 400; font-size: var(--f-16); margin: 0 0 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.process-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (min-width: 900px) { .process-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.inquire { margin-top: 1rem; font-size: var(--f-13); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; margin-top: clamp(56px, 8vw, 96px); padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--f-13); }
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.pager [rel="next"] { text-align: right; }
@media (max-width: 599px) { .pager { grid-template-columns: 1fr; } .pager [rel="next"] { text-align: left; } }

/* statement: no large name; the heading in the role line's light grey, the text in the label grey (Al, 2026-11-05) */
.statement { max-width: 46rem; padding: clamp(16px, 3vw, 40px) 0 clamp(56px, 10vw, 120px); }
.statement-h { font-weight: 400; font-size: var(--f-21); color: var(--label-light); margin: 0 0 1rem; }
.statement .prose { font-size: 1.0625rem; line-height: 1.65; color: var(--label); }
/* CV as year | entry: not on the site for now (Al, 2026-11-05), kept for when it comes back */
.cv h3 { font-weight: 500; font-size: var(--f-16); margin: 2rem 0 0.75rem; }
.cv dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.45rem 1rem; margin: 0; }
.cv dt { color: var(--label); font-variant-numeric: tabular-nums; }
.cv dd { margin: 0; }
.cv .where { display: block; color: var(--label); font-size: var(--f-13); }

/* contact */
.contact { display: grid; gap: 0.75rem; padding-bottom: clamp(56px, 10vw, 120px); }
/* smaller than the first cut (Al, 2026-11-05): a quiet page, not a poster */
.page-contact .page-title { font-size: clamp(var(--f-21), 3vw, var(--f-34)); }
.contact .big { font-weight: 300; font-size: var(--f-21); }
.contact .where { color: var(--label); margin-top: 1rem; }

.foot { padding: 2rem var(--gutter) 2.5rem; font-size: var(--f-16); color: var(--label); }
.foot a { color: inherit; margin-left: 0.75rem; }
/* Instagram: the glyph in black, then the handle (Al, 2026-11-05) */
.ig { text-decoration: none; white-space: nowrap; }
.ig span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ig-icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; }

/* root language chooser and 404 */
.page-root .chooser { min-height: 100vh; display: grid; place-content: center; gap: 1rem; text-align: center; }
.chooser-name { font-weight: 300; font-size: var(--f-34); }
.chooser a { margin: 0 0.75rem; }

@media print { .masthead nav, .pager, .foot { display: none; } }