/* =============================================================
   Directorio de clínicas: índice (`/clinicas/`) y fichas (`/clinicas/<slug>/`).
   Lo cargan solo las páginas que genera `herramientas/generar-directorio.py`,
   después de `pagina.css`.

   ORIGEN DE LOS COMPONENTES. La barra de filtros (`.fbar`, `.fcat`), las filas
   (`.post`), el tope de diez (`.pmas`) y el estado vacío (`.pvacio`) son los del
   sumario del blog, que viven en el `<style>` de `web/blog/index.html`. Se copian
   aquí sin cambios de diseño para que el directorio se lea igual que el blog. Si
   el sumario del blog cambia, cambia también aquí. Pendiente: sacar los dos a una
   hoja común (`css/sumario.css`) en el pase de marca.

   CONTRATO DE DIRECCIÓN
   THESIS: un directorio que se lee como un índice de expediente, no como un
   buscador de clínicas para pacientes. Sin «pide cita», sin «centros Quality» y
   sin sello: son datos del centro, ordenados (decisión D5 del plan de
   unificación, 18 sep 2026).
   FORM: filas con filete y raíl izquierdo, como el blog. La ficha es una lista de
   definiciones que abre con el filete marino de 2 px («esto empieza aquí»).
   ============================================================= */

.chapter__body--top { padding-top: calc(var(--sp-section) * .55) }
/* Los dos índices de la red arrancan pegados a la cabecera: sin filete que los
   anuncie, el aire de media sección sobraba. 32 px a 1440 y 17 px a 390
   (decisión del usuario, 20 sep 2026: «sube el contenido más cerca del hero»).
   Las fichas conservan el aire de siempre: ahí no se quitó ningún filete. */
.chapter__body--pegado { padding-top: calc(var(--sp-section) * .27) }

/* ---- barra de filtros (del blog) ---- */
.fbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px 32px; flex-wrap: wrap;
  /* Sin filete superior: lo pidió el usuario el 20 sep 2026. La barra ya se
     separa del hero por el cambio de papel, y la primera ficha trae su propia
     línea. Sin borde, el aire de arriba tampoco hace falta. */
  border-top: 0; padding-block: 0 16px; margin-bottom: 0;
}
.fbar__l { display: flex; flex-wrap: wrap; gap: 4px 26px }
.fcat {
  background: none; border: 0; padding: 10px 0; font: inherit;
  font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--ink-2);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
.fcat:hover, .fcat:focus-visible { color: var(--brand); text-decoration-color: currentColor }
.fcat[aria-pressed="true"] {
  color: var(--brand);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.fbar__c { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums }
html:not(.js) .fbar { display: none }

/* Propio del directorio: el desplegable de comunidades y el recuento, a la
   derecha. `align-items: center` y no `baseline`: un `<select>` no tiene línea
   base útil y se descolgaba respecto al recuento. 48 px de alto con el relleno
   de `.frm__s`, por encima del suelo táctil de 44. */
.fbar__r { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap }
.fbar__s { width: auto; min-width: 15rem; padding-block: 12px }

/* ---- filas (del blog) ---- */
.post {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: 1px solid var(--line); padding-block: 26px 28px; align-items: start;
  position: relative;
}
.post[hidden] { display: none }
.post__k {
  grid-column: 1/span 2; grid-row: 1;
  font-size: var(--t-2xs); font-weight: var(--w-semibold); letter-spacing: .01em;
  color: var(--ink-3); padding-top: 6px;
}
.post__t { grid-column: 3/span 5; grid-row: 1; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.14 }
.post__t a { display: inline-block }
.post__t a::after { content: ''; position: absolute; inset: 0 }
.post__x {
  position: absolute; right: 0; top: 30px;
  font-size: 1.25rem; line-height: 1; font-weight: var(--w-regular);
  color: var(--brand-ghost);
}
@media (prefers-reduced-motion: no-preference) {
  .post__x { transition: transform .2s cubic-bezier(.16, 1, .3, 1), color .18s ease }
}
.post__d {
  grid-column: 8/span 5; grid-row: 1;
  font-size: var(--t-sm); color: var(--ink-2); padding-right: 44px; padding-top: 4px;
}
.pmas {
  border-top: 1px solid var(--line); padding-top: 36px;
  display: flex; justify-content: center;
}
.pmas[hidden], html:not(.js) .pmas { display: none }
.post::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--brand); opacity: 0;
}
.post:hover::before, .post:focus-within::before { opacity: 1 }
.post:hover .post__t a, .post:focus-within .post__t a { color: var(--brand-3) }
.post:hover .post__x, .post:focus-within .post__x { color: var(--brand-3); transform: translateX(5px) }
.post:focus-within { outline: 2px solid var(--brand); outline-offset: 6px }
.post__t a:focus-visible { outline: none }
@media (prefers-reduced-motion: no-preference) {
  .post::before { transition: opacity .18s ease }
}
.pvacio { border-top: 1px solid var(--line); padding-block: 64px; max-width: 52ch }
.pvacio h2 { font-size: 1.5rem; margin-bottom: 12px }
.pvacio p { font-size: var(--t-sm); color: var(--ink-2) }
.pvacio__b { margin-top: 26px }
.pvacio[hidden] { display: none }
@media (prefers-reduced-motion: no-preference) {
  .post.is-new { animation: postin .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms) }
  @keyframes postin {
    from { opacity: 0; transform: translateY(12px); filter: blur(5px) }
    to { opacity: 1; transform: none; filter: none }
  }
}

/* ---- red: fila del listado con contacto y descripción (decisión del usuario, 18 sep 2026:
   «el nombre, el teléfono, el correo y lo que se pueda de descripción») ----
   Raíl: tipo y lugar. Columnas 3-7: nombre y, debajo, teléfono y correo. Columnas 8-12: la
   descripción. Los enlaces de contacto quedan POR ENCIMA del `::after` que hace pulsable la
   fila entera (`z-index`), para que el teléfono y el correo se puedan pulsar solos. */
.post__k span { display: block; font-weight: var(--w-regular); color: var(--ink-3); margin-top: 4px }
.post__c { grid-column: 3/span 5; grid-row: 2; font-size: var(--t-sm); color: var(--ink-2); margin-top: 10px }
.post__c a {
  position: relative; z-index: 1; color: var(--brand); font-weight: var(--w-medium);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  display: inline-block; padding-block: 6px;
}
.post__c a:hover, .post__c a:focus-visible { text-decoration-color: currentColor }
.post--red .post__d { grid-row: 1 / span 2 }
/* El alto sobrante de una descripción larga va a la segunda fila: así el contacto queda pegado
   al nombre y no a media fila. */
.post--red { grid-template-rows: auto 1fr }
.post--red .post__k { grid-row: 1 / span 2 }

/* ---- sello de la red, sobre el titular de cada ficha ----
   Tipográfico, sin insignia ni logotipo: el filete marino de 2 px es el que «abre» en todo
   el sistema. Es la validación de Quality Clinic (decisión del usuario, 18 sep 2026). */
.dsello {
  display: inline-block; border-top: 2px solid var(--brand); padding-top: 10px; margin-bottom: 18px;
  font-size: var(--t-2xs); font-weight: var(--w-semibold); letter-spacing: .01em; color: var(--brand);
}

/* ---- niveles de la red: miembro y validada (decisión del usuario, 18 sep 2026) ---- */
.post__v { display: block; margin-top: 8px; color: var(--brand); font-weight: var(--w-semibold) }
.dsello--miembro { color: var(--ink-2); border-top-color: var(--line-2) }
.fsel { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; min-height: 44px }
.dval { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter) }
.dval > * { grid-column: 3/span 8 }
.dval__t { font-size: var(--t-lg); font-weight: var(--w-semibold); color: var(--ink); letter-spacing: -.02em }
.dval__d { font-size: var(--t-sm); color: var(--ink-2); margin-top: 8px; max-width: 58ch }
.dval .link { justify-self: start; margin-top: 12px }
/* Pasos del alta: lista ordenada con su propio numeral (el reset de listas no cubre `ol`). */
.dpas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--gutter) }
.dpas__i { border-top: 2px solid var(--brand); padding-top: 20px }
.dpas__n { display: block; font-size: var(--t-2xs); font-weight: var(--w-semibold); color: var(--ink-3); font-variant-numeric: tabular-nums; margin-bottom: 14px }
.dpas__t { font-size: var(--t-lg); font-weight: var(--w-semibold); color: var(--brand); letter-spacing: -.02em; margin-bottom: 8px }
.dpas__d { font-size: var(--t-sm); color: var(--ink-2) }
.dalta { max-width: 760px }
.dotro--red { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap }

/* ---- qué significa formar parte de la red ---- */
.dred { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 36px }
.dred__i { grid-column: span 4; border-top: 2px solid var(--brand); padding-top: 22px }
.dred__i dt { font-size: var(--t-lg); font-weight: var(--w-semibold); color: var(--brand); letter-spacing: -.02em; margin-bottom: 10px }
.dred__i dd { font-size: var(--t-sm); color: var(--ink-2); max-width: 44ch }
.dotro--red { border-top: 0; padding-top: 0; margin-top: var(--sp-block) }

/* ---- ficha: datos del centro ----
   Etiqueta en el raíl izquierdo (columnas 1-2) y la lista en las 3-10, como la
   gramática de capítulo. La lista abre con el filete marino de 2 px y cada fila
   cierra con el de 1 px en `--line`. */
.dfi {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter); align-items: start;
}
.dfi__k {
  grid-column: 1/span 2; padding-top: 22px;
  font-size: var(--t-2xs); font-weight: var(--w-semibold); letter-spacing: .01em; color: var(--ink-3);
}
/* Logotipo de la clínica y foto del médico, bajo la etiqueta del raíl. Son imágenes del
   propio centro, enlazadas desde la web vieja mientras esto sea maqueta. El logotipo va
   sobre papel porque la mayoría son JPG con fondo blanco. */
.dfi__logo { display: block; width: 100%; max-width: 180px; height: auto; margin-top: 20px; background: var(--paper) }
.dfi__foto { display: block; width: 100%; max-width: 180px; aspect-ratio: 4/5; object-fit: cover; margin-top: 20px; background: var(--bone-3) }
.dfi__p { grid-column: 3/span 8; font-size: var(--t-lg); color: var(--ink-2); max-width: 58ch; padding-bottom: var(--sp-block) }
.dfi__l { grid-column: 3/span 8; border-top: 2px solid var(--brand) }
.dfi__r {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gutter);
  border-bottom: 1px solid var(--line); padding-block: 20px 22px;
}
.dfi__r dt { font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--ink-2); padding-top: 2px }
.dfi__r dd { font-size: var(--t-base); color: var(--ink) }
/* Enlaces dentro del dato: subrayado que nace de la letra, como el resto del
   sitio. Van en línea con el texto, así que el suelo táctil de 44 px no les
   aplica (misma excepción que los enlaces dentro de una frase). */
.dfi__a {
  color: var(--brand); font-weight: var(--w-medium);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
.dfi__a:hover, .dfi__a:focus-visible { color: var(--brand-3); text-decoration-color: currentColor }

/* ---- ficha: bloques de capítulo (presentación, servicios, equipo) ----
   Misma gramática que los datos: rótulo en el raíl (columnas 1-2), contenido en la 3-12. */
.dblk { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); align-items: start }
.dblk__k {
  grid-column: 1/span 2; padding-top: 4px;
  font-size: var(--t-2xs); font-weight: var(--w-semibold); letter-spacing: .01em; line-height: 1.55; color: var(--ink-3);
}
.dblk__c { grid-column: 3/span 10 }

/* La presentación es TEXTO DE LA CLÍNICA, no nuestro: va citada, como las reseñas. */
.dcit { max-width: 64ch; border-left: 2px solid var(--brand); padding-left: 24px; margin: 0 }
.dcit p { font-size: var(--t-base); color: var(--ink-2) }
.dcit p + p { margin-top: 14px }

/* Fotos de las instalaciones: rejilla, nunca carrusel (DESIGN.md). En color, sin duotono. */
.dfot { list-style: none; padding: 0; margin: var(--sp-block) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--gutter) }
.dfot img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; background: var(--bone-3) }
.dcit + .dfot { margin-top: var(--sp-block) }
.dblk__c > .dfot:first-child { margin-top: 0 }

/* Servicios por grupos. */
.dser { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 40px var(--gutter) }
.dser__g { border-top: 2px solid var(--brand); padding-top: 18px }
.dser__g h3 { font-size: var(--t-base); letter-spacing: -.01em; margin-bottom: 12px }
.dser__g ul { list-style: none; padding: 0; margin: 0 }
.dser__g li { font-size: var(--t-sm); color: var(--ink-2); padding-block: 6px; border-bottom: 1px solid var(--line) }

/* Equipo: foto, nombre y cargo tal cual lo guardaba la web vieja. */
.deq { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 36px var(--gutter) }
.deq img, .deq__sin { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--bone-3) }
.deq__n { font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--ink); margin-top: 12px }
.deq__c { font-size: var(--t-xs); color: var(--ink-2); margin-top: 4px }
.deq__m { margin-top: var(--sp-block); border-top: 1px solid var(--line); padding-top: 20px }
.deq__m > p { font-size: var(--t-2xs); font-weight: var(--w-semibold); color: var(--ink-3); margin-bottom: 10px }
.deq__m ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px }
.deq__m li { font-size: var(--t-sm) }

/* Enlace al otro índice, bajo la lista. */
.dotro { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 0 }
.pmas:not([hidden]) + .pvacio[hidden] + .dotro { border-top: 0 }

/* ---- ficha: otros centros de la misma comunidad ---- */
.dcer { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter) }
.dcer__t { grid-column: 3/span 8; font-size: 1.75rem; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 28px }
.dcer__l { grid-column: 3/span 8; list-style: none; padding: 0; margin: 0 }
.dcer__l li { border-top: 1px solid var(--line) }
.dcer__l li:last-child { border-bottom: 1px solid var(--line) }
.dcer__l a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap;
  padding-block: 16px; color: var(--brand);
}
.dcer__n { font-size: var(--t-base); font-weight: var(--w-semibold) }
.dcer__p { font-size: var(--t-sm); color: var(--ink-3) }
.dcer__l a:hover .dcer__n, .dcer__l a:focus-visible .dcer__n { color: var(--brand-3); text-decoration: underline; text-underline-offset: 4px }
.dcer__m { grid-column: 3/span 8; justify-self: start; margin-top: 28px }

@media (prefers-reduced-motion: reduce) {
  .fcat, .dfi__a { transition: none }
}

@media(max-width:900px) {
  .post { display: block; padding-block: 22px 24px }
  .post__k { margin-bottom: 10px }
  .post__t { font-size: 1.375rem; margin-bottom: 8px; padding-right: 32px }
  .post__x { top: 56px; font-size: 1.125rem }
  .post__d { max-width: none; padding-right: 0 }
  .fbar { gap: 14px 20px; padding-block: 14px }
  .fbar__l { gap: 2px 20px }
  .fbar__r { width: 100% }
  .fbar__s { flex: 1 1 100%; min-width: 0; width: 100% }
  .pmas { padding-top: 28px }
  .dfi, .dcer, .dblk, .dred, .dval { display: block }
  .dpas { grid-template-columns: 1fr }
  .fbar__r .fsel { flex: 1 1 100% }
  .dred__i + .dred__i { margin-top: 32px }
  .post__c { margin-top: 6px }
  .dblk__k { margin-bottom: 16px }
  .dfi__logo, .dfi__foto { max-width: 150px }
  .deq { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dfi__k { padding-top: 0; margin-bottom: 14px }
  .dfi__r { grid-template-columns: 1fr; row-gap: 6px }
  .dcer__t { font-size: 1.5rem }
}
@media(min-width:901px) and (max-width:1200px) {
  .post__t { grid-column: 3/span 10; grid-row: 1; padding-right: 36px }
  .post__d { grid-column: 3/span 8; grid-row: 2; padding-top: 10px; padding-right: 0 }
  .dfi__l, .dfi__p, .dcer__t, .dcer__l, .dcer__m { grid-column: 3/span 10 }
  .post--red .post__c { grid-column: 3/span 10; grid-row: 2 }
  .post--red .post__d { grid-column: 3/span 8; grid-row: 3 }
  .dred__i { grid-column: span 6 }
}

/* ---- Artículos de la red (blog de pacientes de la web vieja, D6) ---------------
   El cuerpo llega del editor viejo, ya limpio por herramientas/generar-blog-pacientes.py:
   sin estilos ni clases, con imágenes sueltas, h3 y h4 y alguna tabla. Aquí solo se le da
   la forma de los artículos de la consultoría (`.doc--art`), sin rehacer el texto. */
.doc--red img { display: block; max-width: 100%; height: auto; margin: 8px 0 26px; border-radius: 2px }
.doc--red a:has(> img) { display: block; text-decoration: none }
.doc--red h2 { margin-top: 44px }
.doc--red h3 { margin-top: 34px }
.doc--red h4, .doc--red h5 { font-size: var(--t-base); font-weight: var(--w-semibold); letter-spacing: -.01em; margin: 28px 0 12px }
.doc--red > :first-child, .doc--red .doc__u + * { margin-top: 0 }
.doc--red table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: var(--t-sm) }
.doc--red td, .doc--red th { border-top: 1px solid var(--line); padding: 10px 12px 10px 0; vertical-align: top; text-align: left }

/* La clínica del artículo, en el raíl del índice: a un clic de su ficha. */
.idx__red { margin-top: 36px; padding-top: 20px; border-top: 2px solid var(--brand) }
.idx__red p { font-size: var(--t-2xs); color: var(--ink-3); margin-bottom: 6px }
.idx__red a { font-weight: var(--w-semibold); color: var(--brand) }

/* Paginación del índice: enlaces reales (/articulos/page/2/), sin JavaScript. */
.pgn { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: var(--t-sm) }
.pgn a, .pgn span { color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px }
.pgn a:hover, .pgn a:focus-visible { color: var(--brand); text-decoration-color: currentColor }
.pgn [aria-current="page"] { color: var(--brand); font-weight: var(--w-semibold); text-decoration: none }
.pgn__f { font-weight: var(--w-semibold); color: var(--brand) !important }
@media (max-width: 900px) {
  .idx__red { margin-top: 20px }
}

/* ---- Índice de artículos: buscador, filas y la red (decisiones del usuario, 24 sep 2026) ----
   Buscador y filtros por GET: funcionan sin JavaScript (botón «Buscar»); con él, cambiar un
   desplegable ya busca (js/articulos.js). Primera fila, el texto; segunda, los tres filtros.
   Sin filete marino encima: el usuario lo quitó el 26 sep 2026, al llevar foto la cabecera. */
.abus { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 18px; padding-top: 28px }
.abus__q { grid-column: 1/span 10; grid-row: 1 }
.abus__b { grid-column: 11/span 2; grid-row: 1; align-self: end }
.abus__b .btn { width: 100%; justify-content: center; min-height: 0; height: 48px; padding-block: 0 }
.abus__f { grid-column: span 4 }
.abus__k { display: block; font-size: var(--t-2xs); font-weight: var(--w-semibold); letter-spacing: .01em; color: var(--ink-3); margin-bottom: 8px }
.abus__i, .abus__s { width: 100%; height: 48px; padding-block: 0 }
.abus__r { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 36px; padding-bottom: 14px }
.abus__n { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums }
.abus__x { font-size: var(--t-sm) }

/* Fila del artículo: título a la izquierda con su clínica debajo, el texto a la derecha. */
.post--art { grid-template-rows: auto 1fr }
.post--art .post__t { grid-column: 1/span 6; grid-row: 1 }
.post--art .post__a { grid-column: 1/span 6; grid-row: 2; font-size: var(--t-2xs); font-weight: var(--w-semibold); letter-spacing: .01em; color: var(--ink-3); margin-top: 10px }
.post--art .post__d { grid-column: 8/span 5; grid-row: 1/span 2 }

/* La red: franja a dos paneles con la foto a sangre, el velo y el titular encima, como el
   hero de la portada. Sin rótulo ni aire propio: la franja mide lo que las fotos (decisión del
   usuario, 24 sep 2026). Desde el 26 sep 2026 lleva el velo y la letra blanca del hero (`hero--oscuro`), a
   petición del usuario: el negro cálido de la tinta (`--ink`, #141210) al 0,62, que se
   oscurece al 0,80 al señalar el panel, igual que el hero. */
.apuer { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bone); border-top: 1px solid var(--line) }
.apuer__i { position: relative; display: flex; min-height: 420px; isolation: isolate; overflow: hidden; color: inherit; text-decoration: none }
.apuer__f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2 }
.apuer__i::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(20, 18, 16, .62) }
.apuer__c { display: flex; flex-direction: column; width: 100%; padding: 64px 4vw 48px }
.apuer__i:first-child .apuer__c { padding-left: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))) }
.apuer__i:last-child .apuer__c { padding-right: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))) }
.apuer__t { font-size: 2.5rem; letter-spacing: -.04em; line-height: 1.02; color: var(--on-ink); font-weight: var(--w-semibold) }
.apuer__d { margin-top: 14px; font-size: var(--t-base); color: var(--on-ink); max-width: 34ch }
.apuer__go { margin-top: auto; padding-top: 16px; border-top: 2px solid var(--on-ink); display: flex; justify-content: space-between; align-items: center; font-weight: var(--w-semibold); color: var(--on-ink); max-width: 26rem }
.apuer__i:hover::after, .apuer__i:focus-visible::after { background: rgba(20, 18, 16, .80) }
.apuer__i:hover .apuer__go i, .apuer__i:focus-visible .apuer__go i { transform: translateX(5px) }
.apuer__i:focus-visible { outline: 2px solid var(--on-ink); outline-offset: -4px }
@media (prefers-reduced-motion: no-preference) {
  .apuer__i::after { transition: background .3s cubic-bezier(.16, 1, .3, 1) }
  .apuer__go i { transition: transform .2s cubic-bezier(.16, 1, .3, 1) }
}
@media (max-width: 900px) {
  .abus { display: block }
  .abus > * + * { margin-top: 16px }
  .post--art .post__t, .post--art .post__a, .post--art .post__d { grid-column: 1/-1; grid-row: auto }
  .post--art .post__a { margin-top: 6px }
  .post--art .post__d { padding-top: 10px }
  .apuer { grid-template-columns: 1fr }
  .apuer__i { min-height: 300px }
  .apuer__c { padding: 44px var(--pad) 36px !important }
  .apuer__t { font-size: 2rem }
}