/* Andrés Mora, No. 1. El portafolio como número de revista.
   Tokens arriba; cada reportaje trae su propio papel (--paper) y su tinta (--ink). */

@font-face {
  font-family: "Ancizar Sans";
  src: url("../fonts/AncizarSans-Variable.woff2?v=5d8297145e") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "Ancizar Serif";
  src: url("../fonts/AncizarSerif-Variable.woff2?v=25963083f2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Ancizar Serif";
  src: url("../fonts/AncizarSerif-Italic-Variable.woff2?v=9dc29dc7c2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Kalnia";
  src: url("../fonts/Kalnia-Variable.woff2?v=58befb151e") format("woff2");
  font-weight: 100 700;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  --paper: #fff;
  --ink: #000;
  --ink-2: color-mix(in srgb, var(--ink) 64%, var(--paper));   /* 5,9:1 sobre blanco */
  --shirt: #e9a93b;                                            /* la camisa de la portada */

  --sans: "Ancizar Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "Ancizar Serif", ui-serif, Georgia, serif;
  --display: "Kalnia", "Ancizar Serif", Georgia, serif;

  --m: clamp(12px, 2.8vw, 40px);       /* margen de página */
  --gut: clamp(16px, 2.2vw, 32px);
  --bar: 52px;
  --ease: cubic-bezier(.2, .7, .1, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 8px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  line-height: 1.5;
  font-kerning: normal;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
::selection { background: var(--shirt); color: #000; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; z-index: 50; left: var(--m); top: 8px; padding: 8px 12px;
  background: #000; color: #fff; font: 500 .9375rem/1.2 var(--sans); text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus-visible { transform: none; }

/* Marca de borrador: titulares y textos que William reescribe. Es un atributo, no texto. */
[data-draft]::after {
  content: "draft";
  content: "draft" / "";
  margin-inline-start: .45em;
  padding: .1em .35em .15em;
  background: var(--shirt);
  color: #000;
  font: 600 11px/1 var(--sans);
  font-style: normal;
  letter-spacing: .02em;
  vertical-align: .5em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- barra */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--bar); padding: 0 var(--m);
  background: #fff; color: #000;
  font: 500 .875rem/1 var(--sans);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.bar.is-down { border-bottom-color: #000; }
.bar-name {
  font: 600 1.375rem/1 var(--display);
  text-decoration: none;
}
.bar nav { display: flex; gap: clamp(14px, 2.6vw, 32px); }
.bar nav a { text-decoration: none; padding: 6px 0; }
.bar nav a:hover, .bar nav a[aria-current="page"] { text-decoration: underline; }

/* Marcas de corte en las esquinas de lo que va enmarcado */
.marks { --o: -24px; --l: 14px; position: absolute; inset: 0; pointer-events: none; }
.marks i { position: absolute; width: calc(var(--l) + 4px); height: calc(var(--l) + 4px); }
.marks i::before, .marks i::after { content: ""; position: absolute; background: currentColor; }
.marks i::before { width: var(--l); height: 1px; }
.marks i::after { width: 1px; height: var(--l); }
.marks i:nth-child(1) { left: var(--o); top: var(--o); }
.marks i:nth-child(1)::before { left: 0; bottom: 0; }
.marks i:nth-child(1)::after { right: 0; top: 0; }
.marks i:nth-child(2) { right: var(--o); top: var(--o); }
.marks i:nth-child(2)::before { right: 0; bottom: 0; }
.marks i:nth-child(2)::after { left: 0; top: 0; }
.marks i:nth-child(3) { left: var(--o); bottom: var(--o); }
.marks i:nth-child(3)::before { left: 0; top: 0; }
.marks i:nth-child(3)::after { right: 0; bottom: 0; }
.marks i:nth-child(4) { right: var(--o); bottom: var(--o); }
.marks i:nth-child(4)::before { right: 0; top: 0; }
.marks i:nth-child(4)::after { left: 0; bottom: 0; }

/* ---------------------------------------------------------------- portada */
.cover {
  container-type: inline-size;
  padding: 28px var(--m) 0;
}
.cover .marks { --o: calc(-1 * min(24px, var(--m) - 3px)); --l: min(14px, calc(var(--m) - 9px)); }
.cover-box {
  position: relative;
  height: min(max(calc(100svh - var(--bar) - 72px), min(55cqw, 760px)), 62.5cqw);
  background: #b9c3c4;
}
.cover-clip { position: absolute; inset: 0; overflow: hidden; }
.cover-art {
  position: absolute; inset: 0 0 auto 0;
  aspect-ratio: 16 / 10;
  container-type: size;
  transform: translate3d(0, calc(var(--c, 0) * 6%), 0);
}
.cover-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mast {
  position: absolute; left: 0; right: 0; top: .4cqw;
  font: 600 13.6cqw/1 var(--display);
  font-stretch: 100%;
  letter-spacing: -.004em;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  transform: translate3d(0, calc(var(--c, 0) * 5cqh), 0);
}
.cover-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(270deg, rgb(0 0 0 / .66), rgb(0 0 0 / .34) 30%, rgb(0 0 0 / 0) 56%);
}
.cover-issue {
  display: flex; align-items: baseline; gap: .7em;
  font: 500 clamp(.8125rem, 1.05cqw, 1rem)/1.2 var(--sans);
}
.cover-issue b { font: 600 clamp(1.5rem, 2.6cqw, 2.25rem)/1 var(--display); }
.cover-text {
  position: absolute; right: 3cqw; bottom: 3.2cqw;
  width: min(38cqw, 520px);
  display: grid; gap: clamp(14px, 2.2cqw, 24px);
  color: #fff;
}
.cover-quote p {
  font: italic 400 clamp(1.25rem, 2.7cqw, 2.25rem)/1.12 var(--serif);
  text-wrap: balance;
  text-shadow: 0 1px 16px rgb(0 0 0 / .3);
}
.cover-lines { display: grid; border-top: 1px solid currentColor; }
.cover-lines a {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline;
  text-shadow: 0 1px 12px rgb(0 0 0 / .35);
  padding: clamp(5px, .7cqw, 9px) 0;
  border-bottom: 1px solid rgb(255 255 255 / .55);
  text-decoration: none;
}
.cover-lines b { font: 600 clamp(1rem, 1.6cqw, 1.375rem)/1.15 var(--display); }
.cover-lines em { grid-row: 1; grid-column: 2; font: 500 clamp(.8125rem, 1cqw, 1rem)/1 var(--sans); font-style: normal; }
.cover-lines a:hover b { text-decoration: underline; text-decoration-thickness: 1px; }
.cover-credit {
  display: flex; justify-content: flex-end;
  padding-top: 12px;
  font: 400 .8125rem/1.4 var(--sans);
  color: var(--ink-2);
}

/* Teléfonos: la portada vertical, y el texto de portada debajo, en tinta */
@media (min-width: 700px) and (max-width: 899.98px) {
  .cover-box { height: 62.5cqw; }
}
@media (max-width: 699.98px) {
  .cover { padding: 22px 20px 0; }
  .cover-box { --ch: max(320px, min(133.33cqw, calc(100svh - var(--bar) - 150px))); height: auto; background: none; }
  .cover-clip { position: relative; height: var(--ch); background: #b9c3c4; }
  .cover .marks { --o: -15px; --l: 9px; bottom: auto; height: var(--ch); }
  .cover-art { aspect-ratio: 3 / 4; }
  .mast { top: 9cqw; }
  .cover-scrim { display: none; }
  .cover-issue {
    position: absolute; top: 26cqw; right: 4cqw;
    flex-direction: column; align-items: flex-end; gap: 2px;
    color: #fff;
  }
  .cover-issue b { font-size: 1.75rem; }
  .cover-text { position: static; width: auto; color: var(--ink); padding-top: 18px; }
  .cover-quote p { text-shadow: none; }
  .cover-lines { display: none; }  /* en el teléfono el sumario viene justo debajo */
  .cover-credit { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- sumario */
.contents { padding: clamp(72px, 10vw, 168px) var(--m) clamp(72px, 9vw, 150px); }
.contents-frame {
  container-type: inline-size;
  border: 2px solid var(--ink);
  padding: clamp(18px, 3vw, 44px);
}
.contents-t {
  padding-bottom: clamp(18px, 2.4vw, 36px);
  font: 100 min(8rem, calc(100cqw / 7.4))/.9 var(--display);   /* "Contents" mide 7,12 em */
  font-stretch: 125%;
  letter-spacing: -.01em;
}
.toc { counter-reset: toc; border-top: 1px solid var(--ink); }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--ink); }
.toc a {
  --n: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
  display: grid;
  grid-template-columns: calc(var(--n) * 1.5) minmax(0, 1fr) auto;
  column-gap: var(--gut);
  align-items: baseline;
  padding: clamp(14px, 1.6vw, 24px) 0;
  text-decoration: none;
}
.toc a::before {
  content: counter(toc);
  grid-row: 1 / span 2;
  font: 100 var(--n)/.9 var(--display);
  font-stretch: 125%;
  transition: font-weight .5s var(--ease);
}
.toc-name { grid-column: 2; font: 600 clamp(1.875rem, 1rem + 3.6vw, 4.75rem)/1 var(--display); }
.toc-deck {
  grid-column: 2;
  margin-top: 6px;
  max-width: 34em;
  font: italic 400 clamp(1rem, .95rem + .3vw, 1.25rem)/1.35 var(--serif);
  color: var(--ink-2);
}
.toc-pg {
  grid-column: 3; grid-row: 1;
  font: 500 .9375rem/1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
}
.toc a:hover::before, .toc a:focus-visible::before { font-weight: 600; }
.toc a:hover .toc-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }

/* La vista previa: la portada del sitio en 4:5, inclinada, que sigue al cursor */
.toc-float {
  position: fixed; left: 0; top: 0; z-index: 30;
  width: min(320px, 34vw); aspect-ratio: 4 / 5;
  border: 2px solid #000; background: #fff;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.toc-float.is-on { opacity: 1; visibility: visible; }
.toc-float img {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: cover; object-position: top;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .45s var(--ease);
}
.toc-float img.is-on { clip-path: inset(0); }
@media (hover: none), (pointer: coarse) { .toc-float { display: none; } }

/* ---------------------------------------------------------------- reportajes */
.feature {
  --ink-2: color-mix(in srgb, var(--ink) 80%, var(--paper));
  background: var(--paper);
  color: var(--ink);
  padding: 18px var(--m) clamp(72px, 9vw, 150px);
}
.f-micapi   { --paper: #0d6b63; --ink: #fff; --wt: 600; --wd: 100%; }
.f-editorial{ --paper: #305674; --ink: #fff; --wt: 300; --wd: 125%; }
.f-andes    { --paper: #2b2f35; --ink: #fff; --wt: 500; --wd: 112%; }
.f-festival { --paper: #ffc928; --ink: #000; --wt: 700; --wd: 125%; }
.f-norcasia { --paper: #243528; --ink: #fff; --wt: 100; --wd: 125%; }

.spread {
  container-type: inline-size;
  --span: 5;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "run run run run run run run run run run run run"
    "ttl ttl ttl ttl ttl . pic pic pic pic pic pic"
    "txt txt txt txt txt . pic pic pic pic pic pic";
  column-gap: var(--gut);
}
.feature:nth-of-type(even) .spread {
  grid-template-areas:
    "run run run run run run run run run run run run"
    "pic pic pic pic pic pic . ttl ttl ttl ttl ttl"
    "pic pic pic pic pic pic . txt txt txt txt txt";
}
/* Llamador: el titular de cartel, a todo el ancho */
.feature.f-festival .spread {
  --span: 12;
  grid-template-areas:
    "run run run run run run run run run run run run"
    "ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl"
    "pic pic pic pic pic pic pic . txt txt txt txt";
}
.run {
  grid-area: run;
  display: flex; justify-content: space-between; gap: 16px;
  margin-bottom: clamp(48px, 7vw, 120px);
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  font: 500 .8125rem/1.3 var(--sans);
}
.run b { font-weight: 700; margin: 0 .6em; }
.page { grid-area: txt; align-self: start; }
/* --fit: lo que mide en em la línea más larga del titular, con su peso y su ancho finales */
.f-micapi { --fit: 3.63; }
.f-editorial { --fit: 6.93; }
.f-andes { --fit: 5.6; }
.f-festival { --fit: 9.85; --cap: 15rem; }
.f-norcasia { --fit: 5.22; }
.ft {
  grid-area: ttl;
  align-self: end;
  --tw: calc((100cqw - 11 * var(--gut)) * var(--span) / 12 + (var(--span) - 1) * var(--gut));
  font-family: var(--display);
  font-size: min(var(--cap, 8rem), calc(var(--tw) / var(--fit) * .97));
  line-height: .95;
  letter-spacing: -.01em;
  font-weight: calc(100 + var(--w, 1) * (var(--wt) - 100));
  font-stretch: var(--wd);
  overflow-wrap: normal;
}
/* cada línea del titular va entera: el peso cambia al entrar y los cortes no deben saltar */
.ft .ln { display: block; white-space: nowrap; }
.deck {
  margin-top: clamp(16px, 1.8vw, 26px);
  max-width: 24em;
  font: italic 400 clamp(1.25rem, 1rem + .9vw, 1.875rem)/1.25 var(--serif);
  text-wrap: pretty;
}
.facts {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  margin-top: clamp(22px, 2.4vw, 36px);
  padding-top: 12px;
  border-top: 1px solid currentColor;
  font: 600 .9375rem/1.4 var(--sans);
}
.credit {
  margin-top: 10px;
  max-width: 34em;
  font: 400 .9375rem/1.5 var(--sans);
  color: var(--ink-2);
}
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(20px, 2.2vw, 32px); }
.live {
  display: inline-flex; align-items: baseline; gap: .6em;
  padding: 11px 18px 12px;
  border: 1px solid currentColor;
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.live small { font-weight: 400; font-size: .8125rem; }
.live:hover { background: var(--ink); color: var(--paper); }
.aside-link { font: 400 .9375rem/1.4 var(--sans); }

/* Ventanas: la captura real del sitio, que corre por dentro al bajar */
.pic { grid-area: pic; align-self: end; position: relative; padding: 30px 0 0; }
.f-festival .pic { margin-top: clamp(28px, 3vw, 48px); }
.win { position: relative; }
.win-view {
  position: relative; overflow: hidden;
  background: #fff;
  border: 7px solid #fff;
  outline: 1px solid var(--ink);
  clip-path: inset(calc((1 - var(--r, 1)) * 100%) -2px -2px -2px);
}
.win-desk { width: 84%; }
.win-desk .win-view { aspect-ratio: 1440 / 900; }
.win-phone { position: absolute; right: 0; bottom: -9%; width: 25%; }
.win-phone .win-view { aspect-ratio: 390 / 844; }
.win-img {
  width: 100%;
  transform: translate3d(0, calc(var(--s, 0) * var(--travel, 0) * -1px), 0);
}
/* cota: la medida del ancho, como en un plano */
.dim {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px);
  height: 11px;
  border-inline: 1px solid currentColor;
  font: 500 .75rem/1 var(--sans);
}
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px solid currentColor; }
.dim::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 44%, currentColor 44% 56%, transparent 56%) left center / 11px 11px no-repeat,
    linear-gradient(135deg, transparent 44%, currentColor 44% 56%, transparent 56%) right center / 11px 11px no-repeat;
}
.dim span { position: absolute; left: 50%; top: -1px; transform: translateX(-50%); padding: 0 8px; background: var(--paper); }
.win-phone .dim { bottom: auto; top: calc(100% + 10px); }

/* MiCapi: cuatro pantallas de la app, en columnas que corren a distinto paso */
.screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); align-items: start; }
.screens .win-view { aspect-ratio: 1215 / 2160; }
.screens .win:nth-child(1) { transform: translate3d(0, calc((var(--s, .5) - .5) * -90px), 0); }
.screens .win:nth-child(2) { transform: translate3d(0, calc(40px + (var(--s, .5) - .5) * 70px), 0); }
.screens .win:nth-child(3) { transform: translate3d(0, calc((var(--s, .5) - .5) * -60px), 0); }
.screens .win:nth-child(4) { transform: translate3d(0, calc(56px + (var(--s, .5) - .5) * 110px), 0); }
.screens .win-img { transform: none; }
.pic-note { margin-bottom: 64px; font: 400 .8125rem/1.4 var(--sans); color: var(--ink-2); }

@media (max-width: 899.98px) {
  .spread, .feature:nth-of-type(even) .spread, .feature.f-festival .spread {
    --span: 12;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "run" "ttl" "txt" "pic";
  }
  .pic { margin-top: 56px; }
  .win-phone { bottom: -14%; width: 30%; }
  .feature:not(.f-micapi) .pic { padding-bottom: 14%; }
}
@media (max-width: 559.98px) {
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screens .win:nth-child(n) { transform: none; }
  .pic-note { margin-bottom: 18px; }
}

/* ---------------------------------------------------------------- entrevista (About) */
.iv { padding: clamp(36px, 6vw, 96px) var(--m) clamp(72px, 9vw, 150px); }
.iv-open {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  align-items: end;
}
.iv-portrait { grid-column: 1 / span 6; margin: 24px; }
.framed { position: relative; }
.iv-portrait .frame { overflow: hidden; outline: 1px solid #000; border: 8px solid #fff; }
.iv-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.iv-portrait figcaption, .iv-detail figcaption { margin-top: 30px; font: 400 .8125rem/1.4 var(--sans); color: var(--ink-2); }
.iv-head { grid-column: 8 / -1; padding-bottom: 54px; container-type: inline-size; }
.iv-head .run { margin-bottom: clamp(28px, 4vw, 64px); }
.iv-t {
  font: 600 min(9.5rem, calc(100cqw / 3.95))/.92 var(--display);   /* "Andrés" mide 3,81 em */
  letter-spacing: -.012em;
  overflow-wrap: normal;
}
.iv-t .ln { display: block; white-space: nowrap; }
.iv-stand {
  margin-top: clamp(18px, 2vw, 30px);
  font: italic 400 clamp(1.375rem, 1rem + 1.2vw, 2.25rem)/1.22 var(--serif);
  text-wrap: pretty;
}
.iv-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  margin-top: clamp(64px, 9vw, 150px);
}
.iv-text { grid-column: 2 / span 6; container-type: inline-size; }
.iv-lede { max-width: 32em; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.6; }
.dropcap {
  float: left;
  margin: .02em .12em 0 0;
  font: 600 4.6em/.8 var(--display);
}
.qa { margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid currentColor; }
.q { margin-top: 26px; font: 700 1rem/1.3 var(--sans); }
.a { margin-top: 10px; max-width: 32em; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.55; }
.contact { display: grid; gap: 8px; margin-top: 14px; }
.contact a {
  justify-self: start;
  font: 300 min(3rem, calc(100cqw / 13.7))/1.15 var(--display);
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.iv-detail { grid-column: 9 / -1; align-self: start; position: relative; margin-top: 8px; }
.iv-detail .frame { overflow: hidden; outline: 1px solid #000; border: 8px solid #fff; clip-path: inset(calc((1 - var(--r, 1)) * 100%) -2px -2px -2px); }
.iv-detail img { width: 100%; aspect-ratio: 1; object-fit: cover; transform: scale(calc(1.12 - var(--r, 1) * .12)); }

@media (max-width: 899.98px) {
  .iv-portrait, .iv-head, .iv-text, .iv-detail { grid-column: 1 / -1; }
  .iv-portrait { margin: 24px 24px 0; }
  .iv-head { padding-bottom: 0; margin-top: 48px; }
  .iv-detail { margin-top: 56px; max-width: 520px; }
}

/* ---------------------------------------------------------------- colofón */
.colophon {
  background: #000; color: #fff;
  padding: clamp(56px, 8vw, 120px) var(--m) 32px;
}
.colophon-mast { font: 100 min(13rem, calc((100vw - 2 * var(--m)) / 10.6))/.9 var(--display); font-stretch: 125%; letter-spacing: -.01em; }
.colophon-line { margin-top: 18px; font: italic 400 clamp(1.125rem, 1rem + .5vw, 1.5rem)/1.35 var(--serif); }
.block {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid #fff; border-left: 1px solid #fff;
  font: 400 .9375rem/1.4 var(--sans);
}
.block > div { padding: 12px 14px 16px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; min-width: 0; }
.block .wide { grid-column: span 2; }
.block dt { font-size: .75rem; color: #c8c8c8; margin-bottom: 6px; }
.block dd a { text-decoration-thickness: 1px; }
@media (max-width: 899.98px) { .block { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .block { grid-template-columns: minmax(0, 1fr); } .block .wide { grid-column: auto; } }

/* ---------------------------------------------------------------- entrada (solo con movimiento) */
.intro .cover-art img,
.intro .iv-portrait img { clip-path: inset(100% 0 0 0); }
.intro .mast, .intro .iv-t, .intro [data-in] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .cover-art, .mast { transform: none !important; }
}