/* =========================================================
   WORK — one archive, three disciplines, two views.

   This file exists to answer two questions in the first three
   seconds: how many projects are there, and which discipline
   does each one belong to.

   Every project is written once in the HTML and can be read
   two ways, switched by [data-view] on the archive:

     index  a table — number, title, discipline tag, client,
            year. The whole archive on one screen.
     grid   the same projects as cards with their cover.

   Components:
     .work-bar          sticky filter + view bar
     .disc-tag          the coloured discipline label
     .grp               one discipline group (header + items)
     .items / .item     the projects themselves
     .proj-*            one project page
     .home-disc         the three-way block on the home page
   ========================================================= */

/* ---------------------------------------------------------
   1. DISCIPLINE COLOUR
   One custom property per group and per item, so a tag, a dot
   or a rule inside it only ever has to say var(--c).
   --------------------------------------------------------- */
[data-disc="ux"]      { --c: var(--c-ux); }
[data-disc="front"]   { --c: var(--c-front); }
[data-disc="graphic"] { --c: var(--c-graphic); }

/* The tag itself: a solid chip in the discipline colour. Used
   in the archive, on the home page and on case studies. */
.disc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4em 0.8em;
  border-radius: 100px;
  background: var(--c, var(--accent));
  color: var(--c-on-tag);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* Outline variant, where a solid chip would shout */
.disc-tag--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.disc-tag--ghost::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--c);
}

/* ---------------------------------------------------------
   2. THE BAR — filter by discipline, choose a view
   Sticks under the header so the filter stays within reach
   all the way down a long archive.
   --------------------------------------------------------- */
.work-bar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
}
.work-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding-block: 0.8rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55em 1em;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease),
              background var(--dur-s) var(--ease);
}
.chip::before {
  content: "";
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--c, var(--fg-dim));
  transition: background var(--dur-s) var(--ease);
}
.chip b { font-variation-settings: "wght" 500; opacity: 0.55; }
.chip:hover { color: var(--fg); border-color: var(--fg); }
.chip[aria-pressed="true"] {
  background: var(--c, var(--fg));
  border-color: transparent;
  color: var(--c-on-tag);
}
/* "All" has no discipline colour, so it inverts the page instead —
   and its text has to follow the background, not the tag ink, or it
   disappears into itself on the light theme. */
.chip:not([data-disc])[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.chip[aria-pressed="true"]::before { background: currentColor; }
.chip[aria-pressed="true"] b { opacity: 0.7; }

/* View switch — two buttons in one pill */
.views {
  display: flex;
  gap: 0.2rem;
  padding: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 100px;
}
.views button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45em 0.95em;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.views button svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.views button:hover { color: var(--fg); }
.views button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* Live count of what the filter is showing */
.work-bar__count {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.work-bar__count b { color: var(--fg); font-variation-settings: "wght" 500; }

/* ---------------------------------------------------------
   3. ONE DISCIPLINE GROUP
   --------------------------------------------------------- */
.archive { padding-bottom: clamp(3rem, 7vw, 7rem); }

.grp {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  scroll-margin-top: calc(var(--header-h) + 4.5rem);
}
.grp.is-hidden { display: none; }

.grp__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "label count"
    "title desc";
  align-items: end;
  gap: 0.6rem var(--gutter);
  padding-bottom: clamp(1.1rem, 2.2vw, 1.8rem);
  border-bottom: 2px solid var(--c, var(--line));
}
.grp__label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.65rem;
}
.grp__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  color: var(--fg-dim);
}
.grp__head h2 {
  grid-area: title;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
}
.grp__head p { grid-area: desc; color: var(--fg-dim); max-width: 46ch; margin: 0; }
.grp__count {
  grid-area: count;
  justify-self: end;
  align-self: start;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------------------------------------------------------
   4. THE PROJECTS
   One markup, two layouts. Everything an item can show lives
   in the HTML; each view decides what to place and what to
   leave out.
   --------------------------------------------------------- */
.items { display: grid; }
.item { position: relative; }
.item.is-hidden { display: none; }
.item > *, .item__meta > * { position: relative; z-index: 1; }
.item__link { position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); }

.item__n { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--fg-dim); }
.item__title {
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.65rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  transition: color var(--dur-s) var(--ease), transform var(--dur-m) var(--ease);
}
.item__type, .item__client, .item__year {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}
.item__desc { color: var(--fg-dim); margin: 0; }

.item__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}
.item__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transition: scale var(--dur-xl) var(--ease);
}
.item:hover .item__media img { scale: 1.04; }

.item__go {
  display: grid;
  place-items: center;
  width: clamp(30px, 2.4vw, 40px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease),
              transform var(--dur-m) var(--ease), border-color var(--dur-s) var(--ease);
}
.item__go svg { width: 42%; height: 42%; stroke: currentColor; fill: none; stroke-width: 1.7; }
.item:hover .item__go {
  background: var(--c, var(--accent));
  color: var(--c-on-tag);
  border-color: transparent;
  transform: rotate(45deg);
}

/* ---- 4a. INDEX VIEW — the archive as a table --------------
   number · title (and what it is) · discipline · client · year
   The cover is not drawn here: it flies with the pointer
   instead (.preview, in home.css).
   --------------------------------------------------------- */
.archive[data-view="index"] .items { border-top: 1px solid var(--line); }

.archive[data-view="index"] .item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 11.5rem 10rem 5rem auto;
  align-items: center;
  gap: clamp(0.7rem, 1.8vw, 2rem);
  padding: clamp(0.85rem, 1.5vw, 1.3rem) clamp(0.4rem, 1vw, 1rem);
  border-bottom: 1px solid var(--line);
}
/* Fill that wipes up behind the row, in the discipline colour */
.archive[data-view="index"] .item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-m) var(--ease);
}
.archive[data-view="index"] .item:hover::before { transform: scaleY(1); }

.archive[data-view="index"] .item__media,
.archive[data-view="index"] .item__desc { display: none; }
.archive[data-view="index"] .item__main { display: grid; gap: 0.28rem; }
.archive[data-view="index"] .item__meta { display: contents; }
/* the tag is a chip, not a column: it should not stretch to fill one */
.archive[data-view="index"] .disc-tag { justify-self: start; }
.archive[data-view="index"] .item:hover .item__title { transform: translateX(clamp(4px, 0.8vw, 12px)); }
.archive[data-view="index"] .item:hover .item__n { color: var(--c); }

/* Column captions, printed once per group */
.cols {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 11.5rem 10rem 5rem auto;
  gap: clamp(0.7rem, 1.8vw, 2rem);
  padding: 1.1rem clamp(0.4rem, 1vw, 1rem) 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.cols span:last-child { width: clamp(30px, 2.4vw, 40px); }
.archive[data-view="grid"] .cols { display: none; }

/* ---- 4b. GRID VIEW — the same archive as cards ----------- */
.archive[data-view="grid"] .items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.5vw, 3.4rem) clamp(1.2rem, 2.5vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.archive[data-view="grid"] .item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.archive[data-view="grid"] .item__media { order: 1; }
.archive[data-view="grid"] .item__meta  { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.archive[data-view="grid"] .item__main  { order: 3; }
.archive[data-view="grid"] .item__desc  { order: 4; font-size: 0.97em; }
.archive[data-view="grid"] .item__go    { display: none; }

.archive[data-view="grid"] .item__n {
  position: absolute;
  left: 0.85rem; top: 0.85rem;
  z-index: 2;
  padding: 0.4em 0.65em;
  border-radius: 100px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(8px);
  color: var(--fg);
}
.archive[data-view="grid"] .item__main {
  display: grid;
  gap: 0.3rem;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
}
.archive[data-view="grid"] .item:hover .item__title { color: var(--c); }

/* ---------------------------------------------------------
   5. EMPTY STATE (nothing matches the filter)
   --------------------------------------------------------- */
.archive__empty {
  display: none;
  padding-block: clamp(3rem, 8vw, 7rem);
  text-align: center;
  color: var(--fg-dim);
}
.archive.is-empty .archive__empty { display: block; }

/* ---------------------------------------------------------
   6. ONE PROJECT
   --------------------------------------------------------- */
.proj-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  border-block: 1px solid var(--line);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.proj-meta h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 400;
  margin-bottom: 0.6rem;
}
.proj-meta p { margin: 0; }

.proj-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--gutter);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.proj-body h2 {
  font-size: var(--t-h3);
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
/* Un bloque de texto que viene justo detrás de unas láminas necesita aire:
   sin él el titular se pega al canto inferior de la imagen de arriba. */
.proj-body--airy { padding-top: 40px; }

/* Una galería que cierra sección deja 60px antes de lo que venga después. */
.proj-figs--breather { margin-bottom: 60px; }

.proj-body__text { display: grid; gap: 1.2rem; max-width: 64ch; }
.proj-body__text p { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.3rem); margin: 0; }

.proj-figs { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
.proj-figs figure {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}
.proj-figs figure img { width: 100%; display: block; }

/* Muestras de logo: cada versión sobre el fondo para el que está pensada,
   fijo y ajeno al tema, para que no se pierda ni en claro ni en oscuro. */
.proj-figs .logo-plate img {
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: clamp(1.75rem, 5vw, 3.5rem);
}
.proj-figs .logo-plate--dark img  { background: #1d1d1d; }
.proj-figs .logo-plate--light img { background: #f2efe8; }
.proj-figs figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0.9rem 0.2rem 0;
  background: var(--bg);
}
.proj-figs .figs-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/* Una sola lámina vertical (una portada, una cubierta): a todo el ancho de la
   caja se iría de alto, así que se centra con una medida de página. */
.proj-figs .fig-solo { max-width: min(560px, 100%); margin-inline: auto; }

/* The breadcrumb of a case study carries its discipline tag,
   so you always know which shelf the project came from. */
.crumbs { flex-wrap: wrap; }
.crumbs .disc-tag { margin-left: 0.15rem; }

/* Where this project sits inside its discipline */
.proj-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.proj-place a:hover { color: var(--fg); }
.proj-place__n { color: var(--fg); }

/* ---------------------------------------------------------
   7. HOME — the three disciplines, with their projects named
   --------------------------------------------------------- */
.home-disc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.home-disc > a {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  padding-top: 1rem;
  border-top: 2px solid var(--c, var(--line));
}
.home-disc__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}
.home-disc__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transition: scale var(--dur-xl) var(--ease);
}
.home-disc a:hover .home-disc__media img { scale: 1.04; }
.home-disc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.home-disc__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.home-disc h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.7rem);
  transition: color var(--dur-s) var(--ease);
}
.home-disc a:hover h3 { color: var(--c); }
.home-disc p { color: var(--fg-dim); margin: 0; }

/* The projects of each discipline, named. This is the part
   that answers "what is actually in there?" without a click. */
.home-disc__list {
  display: grid;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.03em;
  color: var(--fg-dim);
}
.home-disc__list li { display: flex; gap: 0.55rem; align-items: baseline; }
.home-disc__list li::before {
  content: "";
  flex: none;
  width: 0.4em; height: 0.4em;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.6;
  transition: opacity var(--dur-s) var(--ease);
}
.home-disc a:hover .home-disc__list li::before { opacity: 1; }

/* ---------------------------------------------------------
   7 bis. CUBIERTA EXTENDIDA Y MUESTRARIO TIPOGRÁFICO
   Dos piezas que sólo pide la ficha del BAEDE. Una portada se
   entrega, en realidad, como cubierta extendida —contraportada,
   lomo y portada en un solo pliego de 359 x 242 mm—, y eso es
   una lámina muy apaisada que no se puede recortar sin mentir.
   Y las dos familias con las que está compuesta hay que verlas
   en la fuente real: descritas no valen de nada.
   --------------------------------------------------------- */

/* La cubierta extendida es casi 1,5 veces más ancha que alta. A ancho
   de caja se lee bien; por debajo del móvil cada una de las tres zonas
   bajaría de los 90 px y el lomo desaparecería, así que ahí se le pone
   un ancho mínimo y se deja rodar en horizontal —con foco visible y su
   región etiquetada— en lugar de seguir encogiéndola. */
.proj-figs .fig-spread__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.proj-figs .fig-spread__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Muestrario de las fuentes de la cubierta. Cada tarjeta enseña un peso
   con el texto que ese peso compone de verdad en la pieza, y debajo el
   dato de imprenta: familia, peso y cuerpo real. */
.type-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.type-spec__card {
  display: grid;
  /* La muestra manda su propia altura y el pie absorbe la diferencia: al revés,
     la tarjeta cuyo pie es más corto estira su plancha y las cinco muestras
     dejan de compararse a la misma altura. */
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
}
/* El cuerpo de la muestra lo fija cada tarjeta con --s, porque «BAEDE»
   y «ISSN 1131-6780» no pueden ocupar lo mismo sin descuadrar la fila. */
.type-spec__sample {
  display: grid;
  place-items: center;
  min-height: clamp(96px, 14vw, 148px);
  padding: clamp(1.1rem, 2.4vw, 1.8rem) 0.9rem;
  font-size: var(--s, 2.4rem);
  /* El <body> fija font-variation-settings, y en una fuente variable —Jost lo
     es— eso gana al font-weight: sin repetirlo aquí las cinco muestras salen
     en 400 y el muestrario enseña cinco veces el mismo peso. */
  font-weight: var(--w, 400);
  font-variation-settings: "wght" var(--w, 400);
  line-height: 1;
  color: var(--fg);
  text-align: center;
  border-bottom: 1px solid var(--line);
  /* Una muestra tipográfica no se puede reflowear: si la caja se queda
     corta, que se vea que se sale, no que se parta en dos líneas. */
  white-space: nowrap;
  overflow: hidden;
}
.type-spec__meta { padding: 0.85rem 1rem; display: grid; gap: 0.3rem; }
.type-spec__meta b { font-size: 0.98rem; }
.type-spec__meta code {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.type-spec__meta small { color: var(--fg-dim); font-size: 0.86rem; line-height: 1.45; }

/* Clave de una figura vectorial: los números del dibujo, explicados fuera.
   Meter cuatro rótulos largos dentro del SVG obliga a partirlos a mano y a
   duplicarlos por idioma; aquí se traducen solos y se reflowean. */
.cs-fig .fig-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.55rem 1.4rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: figkey;
}
/* El número va absoluto, no como item de un flex: en un contenedor flex cada
   hijo elemento es su propia columna, así que el <b> del rótulo se separaría
   del texto que lo sigue y la entrada saldría partida en dos columnas. */
.cs-fig .fig-key li { position: relative; padding-left: 2.4em; }
.cs-fig .fig-key li b { color: var(--fg); font-variation-settings: "wght" 500; }
.cs-fig .fig-key li::before {
  counter-increment: figkey;
  content: counter(figkey);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--accent);
}

/* El muestrario y el pliego son pruebas, no comentario al margen: dentro de
   un .proj-body ocupan las dos columnas y dejan que el titular siga sticky. */
.proj-body > .type-spec { grid-column: 1 / -1; }

/* Las dos familias de la cubierta, con su pila de reserva. No son las
   del sitio: viven sólo dentro del muestrario y del rótulo del pliego. */
.ff-jost     { font-family: "Jost", var(--font-sans); }
.ff-playfair { font-family: "Playfair Display", "Times New Roman", Georgia, serif; }

/* ---------------------------------------------------------
   8. RESPONSIVE
   Kept in this file so the whole section is self-contained.
   --------------------------------------------------------- */
@media (max-width: 1180px) {
  /* the client column is the first to go */
  .archive[data-view="index"] .item,
  .cols { grid-template-columns: 2.4rem minmax(0, 1fr) 10.5rem 4.5rem auto; }
  .archive[data-view="index"] .item__client,
  .cols [data-col="client"] { display: none; }

  .archive[data-view="grid"] .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .proj-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .proj-body { grid-template-columns: 1fr; }
  .proj-body h2 { position: static; }
}

@media (max-width: 900px) {
  .work-bar__inner { justify-content: flex-start; }
  .work-bar__count { display: none; }

  .grp__head {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "title" "desc" "count";
    align-items: start;
    gap: 0.8rem;
  }
  .grp__count { justify-self: start; }

  /* Index rows become two lines: title over its labels. */
  .archive[data-view="index"] .item {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: start;
    row-gap: 0.6rem;
  }
  .archive[data-view="index"] .item__main { grid-column: 2; }
  .archive[data-view="index"] .disc-tag   { grid-column: 2; grid-row: 2; justify-self: start; }
  .archive[data-view="index"] .item__year { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
  .archive[data-view="index"] .item__go   { grid-column: 3; grid-row: 1; }
  .cols { display: none; }

  .home-disc { grid-template-columns: 1fr; }
  .home-disc__media { aspect-ratio: 16 / 10; }
  .proj-figs .figs-pair { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* Por debajo de aquí el pliego se mira rodando, no encogido. */
  .proj-figs .fig-spread img { min-width: 560px; }

  .proj-meta { grid-template-columns: 1fr; }
  .archive[data-view="grid"] .items { grid-template-columns: 1fr; }
  .chip { padding: 0.5em 0.8em; }
  .views button span { display: none; }
  .views button { padding: 0.5em 0.75em; }
}