/* Fósfora — TRIAL DESIGN after Cargo template F901 (six-column index page).
   Colours and type are set here only. */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --muted: #9a9a9a;
  --rule: #d6d6d6;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size: 11.5px;
  --head: 13.5px;
  --line: 1.25;
  --gut: 16px;
  --top: 44px;  /* air above everything at the top of each page */
}
/* Black page (THEME = "dark" in build_f901.py). Remove the class to go back to white. */
body.dark { --bg: #000000; --ink: #ffffff; --muted: #8c8c8c; --rule: #333333; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--size);
       line-height: var(--line); letter-spacing: .02em; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
.rtext a, .dtext a, .itext a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
p { margin: 0 0 1em; }
img { display: block; max-width: 100%; height: auto; }
h2, h3, h4 { font-size: var(--head); font-weight: 600; line-height: 1.2; margin: 0; }

/* Six-column page */
.page { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gut);
        padding: var(--top) var(--gut) 0; }
main { display: contents; }
.ident { grid-column: 1; grid-row: 1; }
.ident .logo { display: block; width: 110px; margin-bottom: 52px; }
.ident .name { font-size: var(--head); font-weight: 600; margin-bottom: 14px; }
.ident .lang { color: var(--muted); }
.ident .lang .cur { color: var(--ink); }

/* Index (top of home page) */
.index { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
         column-gap: var(--gut); }
.isec h2 { min-height: 94px; }
.isec ol { list-style: none; margin: 0; padding: 0; }
.isec li { break-inside: avoid; margin: 0 0 12px; }
.isec ol.plain li { margin-bottom: 2px; }
.pg { color: var(--muted); }

/* Section marks and project rows */
.secmark { grid-column: 1 / -1; margin-top: 90px; padding-top: 6px; border-top: 1px solid var(--ink);
           color: var(--muted); }
.row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gut);
       padding: 14px 0 64px; border-top: 1px solid var(--rule); }
.secmark + .row { border-top: 0; }
.rtitle { grid-column: 1; }
.rtext { grid-column: 2; }
.rtext .meta { margin-bottom: 1em; }
.rtext .lede em { font-style: italic; }
.rtext .no { margin: 1.4em 0 0; }
.pics { grid-column: 3 / -1; align-self: start; }
.pic { margin: 0; }
.pic figcaption { color: var(--muted); margin-top: 5px; }
.pics.pair { display: flex; gap: var(--gut); align-items: flex-start; }
.pics.pair img { max-height: 64vh; width: auto; }
/* Mosaics fit together like a puzzle: images flow down columns, no empty gaps */
.pics.grid { columns: 3; column-gap: var(--gut); }
.pics.grid .pic { break-inside: avoid; margin-bottom: var(--gut); }
.pics.strip { display: flex; gap: var(--gut); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.pics.strip .pic { flex: none; }
.pics.strip img { height: 42vh; width: auto; max-width: none; }

/* Fósfora information (closing blocks) */
.info { grid-column: 1 / -1; }
.inforow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gut);
           padding: 14px 0 28px; border-top: 1px solid var(--rule); }
.secmark + .info .inforow:first-child { border-top: 0; }
.inforow h3 { grid-column: 1; }
.inforow .itext { grid-column: 2 / span 2; }
.itext p:last-child { margin-bottom: 0; }

/* Project page */
.detail { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
          column-gap: var(--gut); }
.dhead { grid-column: 1; }
.dhead .meta { margin-top: 6px; }
.close { color: var(--muted); }
.dtext { grid-column: 2 / span 2; padding-bottom: 60px; }
.dtext h2, .dtext h4 { font-size: var(--size); font-weight: 600; margin: 20px 0 6px; }
.dtext h3 { font-size: var(--size); font-weight: 400; font-style: italic; margin: 12px 0 2px; }
.dtext strong { font-weight: 600; }
.dtext details summary { cursor: pointer; color: var(--muted); margin: 4px 0 8px; }
.dtext .credit-group-title { font-style: italic; margin: 10px 0 2px; }
.dtext .credit-role { color: var(--muted); }
.dtext blockquote { margin: 0 0 10px; }
.poster { margin-top: 24px; max-width: 55%; }
.dpics { grid-column: 4 / -1; }
.dpics h4 { font-size: var(--size); font-weight: 600; margin: 26px 0 8px; }
.gcredit { color: var(--muted); margin: -4px 0 8px; }
.lead { margin-bottom: 18px; }
.masonry { columns: 2; column-gap: var(--gut); }
.masonry.small { columns: 3; }
.masonry .pic { break-inside: avoid; margin-bottom: var(--gut); }
.masonry .pic img, .pics.grid .pic img { width: 100%; }

/* Project pages: the whole site menu stays in the left column */
.is-detail .ident { position: sticky; top: var(--top); align-self: start; max-height: calc(100vh - var(--top) - var(--gut));
                    overflow-y: auto; scrollbar-width: none; }
.is-detail .ident .logo { margin-bottom: 24px; }
.is-detail .ident .name { margin-bottom: 6px; }
.sitenav summary { display: none; }
.sitenav nav { margin-top: 22px; }
.sitenav nav a { display: block; margin: 0 0 3px; }
.sitenav .cur { text-decoration: underline; text-underline-offset: 2px; }

/* Home: small link back to the index once it has scrolled away */
.totop { position: fixed; right: var(--gut); bottom: var(--gut); z-index: 5; background: var(--bg); padding: 2px 6px; }
.totop[hidden] { display: none; }

.kick { display: block; color: var(--muted); margin: 0 0 3px; }
.sitenav p.kick { margin: 14px 0 4px; }
.sitenav .nabout { margin-top: 18px; }
.presso { margin-bottom: 4px; }

.inforow { border-top: 0; }

/* Lists of works inside a page (e.g. Postproducción): title + year indented once,
   the work's details indented further, clear space before the next work */
.dtext .entry { margin: 0 0 30px; padding-left: 14px; }
.dtext .entry h3 { margin: 0; font-weight: 600; }
.dtext .entry .date { margin: 0 0 8px; }
.dtext .entry > p:not(.date), .dtext .entry .records { padding-left: 16px; }
.dtext .entry .records p { margin: 0 0 4px; }
/* Full credits: names indented under each group title */
.dtext .credit-group > p:not(.credit-group-title) { padding-left: 14px; margin-bottom: 2px; }

/* Footer */
.foot { display: flex; justify-content: space-between; padding: 80px var(--gut) var(--gut); color: var(--ink); }

/* Full-screen image viewer */
.viewer { position: fixed; inset: 0; background: var(--bg); z-index: 10; display: flex; align-items: center; justify-content: center; }
.viewer[hidden] { display: none; }
.viewer img { max-width: 92vw; max-height: 92vh; width: auto; }
.viewer button { position: absolute; background: none; border: 0; color: var(--ink); font-size: 30px; cursor: pointer; padding: 10px 16px; font-family: inherit; }
.v-close { top: 4px; right: 4px; }
.v-prev { left: 0; top: 50%; transform: translateY(-50%); }
.v-next { right: 0; top: 50%; transform: translateY(-50%); }

/* Tablets */
@media (max-width: 1100px) {
  .page, .row, .inforow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .index { grid-column: 2 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .isec h2 { min-height: 0; margin-bottom: 14px; }
  .pics { grid-column: 2 / -1; margin-top: 18px; }
  .rtext { grid-column: 2 / span 2; }
  .detail { grid-column: 2 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dhead { grid-column: 1 / -1; margin-bottom: 14px; }
  .dtext { grid-column: 1 / -1; }
  .dpics { grid-column: 1 / -1; }
}

/* Phones */
@media (max-width: 760px) {
  :root { --size: 14px; --head: 15px; --gut: 14px; --top: 28px; }
  .page, .row, .inforow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ident { grid-column: 1 / -1; }
  .ident .logo { margin-bottom: 18px; }
  .index { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
  .rtitle { grid-column: 1 / -1; margin-bottom: 10px; }
  .rtext, .pics, .inforow .itext { grid-column: 1 / -1; }
  .inforow h3 { grid-column: 1 / -1; margin-bottom: 8px; }
  .pics.grid { columns: 2; }
  .pics.strip img { height: 34vh; }
  .detail { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr; margin-top: 30px; }
  .masonry, .masonry.small { columns: 2; }
  .poster { max-width: 70%; }
  .is-detail .ident { position: static; max-height: none; overflow: visible; }
  .sitenav summary { display: block; cursor: pointer; margin-top: 10px; color: var(--muted); }
  .sitenav nav { margin-top: 6px; }
}