/* ===================================================================
   MALDITO CANGREJO — sistema visual
   Disciplina + irreverencia. Editorial, rápido, con identidad propia.
=================================================================== */

:root{
  --paper: #F1ECE2;
  --paper-2: #E7E0D2;
  --ink: #15130F;
  --ink-2: #2A2620;
  --accent: #FF3B1F;
  --accent-2: #7A8B6F;
  --line: rgba(21,19,15,.16);
  --line-invert: rgba(241,236,226,.22);

  --f-display: "Fraunces", "Iowan Old Style", ui-serif, Georgia, serif;
  --f-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gap: clamp(16px, 3vw, 40px);
  --pad: clamp(18px, 4vw, 56px);
  --radius: 2px;
  --ease: cubic-bezier(.16,1,.3,1);
}

@view-transition{ navigation: auto; }

*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; background:none; border:none; color:inherit; cursor:pointer; }
::selection{ background: var(--accent); color: var(--paper); }

h1,h2,h3,p{ margin:0; }

.eyebrow{
  font-family: var(--f-sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: .62;
}

/* -------------------------------------------------------------
   Custom cursor — el gesto lateral del cangrejo, discreto
--------------------------------------------------------------*/
.cursor-dot{
  position: fixed;
  top:0; left:0;
  width: 10px; height:10px;
  border-radius: 50%;
  background: var(--ink);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .18s var(--ease), height .18s var(--ease), background .2s;
  will-change: transform;
}
.cursor-dot.is-hover{
  width: 46px; height: 46px;
  background: var(--paper);
}
@media (hover:none), (pointer:coarse){
  .cursor-dot{ display:none; }
}

/* -------------------------------------------------------------
   Nav
--------------------------------------------------------------*/
.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px var(--pad);
  background: linear-gradient(180deg, rgba(21,19,15,.5) 0%, rgba(21,19,15,0) 100%);
  color: #fff;
}
.site-nav .links a.is-active{ color: var(--accent); }
.site-nav .mark{
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-nav .mark span{ color: var(--accent); }
.site-nav .links{
  display:flex;
  gap: clamp(16px,3vw,32px);
}
.site-nav .links a{
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
}
.site-nav .links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background: currentColor;
  transition: width .3s var(--ease);
}
.site-nav .links a:hover::after{ width:100%; }
.site-nav .links a.is-active{ color: var(--accent); }

/* -------------------------------------------------------------
   Home — intro
--------------------------------------------------------------*/
.intro{
  min-height: 92vh;
  min-height: 92svh;
  display:flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad);
  position: relative;
  overflow: hidden;
}
.intro.hero-video{
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
}
.hero-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* desktop: cover para sentirse inmersivo — el margen crema del video absorbe el recorte sin tocar al cangrejo */
  object-fit: cover;
  object-position: center 46%;
  background: var(--paper);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 640px){
  .hero-media{
    /* mobile: contain para no arriesgar recortar patas/pinzas en pantallas angostas */
    object-fit: contain;
    object-position: center;
  }
}
/* nota: si prefers-reduced-motion está activo, js/hero.js no carga ni reproduce
   el video — el <video poster="…"> se queda mostrando el poster estático solo. */
/* al salir del viewport, un desplazamiento de escala muy sutil — sin scroll-jacking, sin JS */
@supports (animation-timeline: view()){
  .intro.hero-video{
    animation: heroExit linear both;
    animation-timeline: view();
    animation-range: exit;
  }
  @keyframes heroExit{
    to{ transform: scale(.97); opacity: .82; }
  }
}
.intro .wordmark{
  font-family: var(--f-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(3rem, 11vw, 9.5rem);
  line-height: .92;
  letter-spacing: -.01em;
  max-width: 20ch;
}
.intro .wordmark em{
  font-style: normal;
  color: var(--accent);
  font-weight: 340;
}
/* sobre el video el cangrejo ya es rojo/naranja — "CANGREJO" en el mismo acento
   se perdía contra él. Mismo tono que "MALDITO" para que se lea siempre. */
.intro.hero-video .wordmark em{
  color: var(--ink);
}
.intro .byline{
  margin-top: clamp(18px,3vw,28px);
  display:flex;
  align-items:baseline;
  gap: 14px;
  font-family: var(--f-sans);
}
.intro .byline .name{
  font-size: 1rem;
  font-weight: 700;
}
.intro .byline .role{
  font-size: .84rem;
  opacity: .6;
}
/* hero-video: texto por encima del video, con entrada tardía y sobria */
.intro.hero-video .wordmark,
.intro.hero-video .byline,
.intro.hero-video .scroll-cue{
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 20px rgba(241,236,226,.7);
}
.intro.hero-video .wordmark{
  opacity: 0;
  transform: translateY(8px);
  animation: heroWordmark 1.15s var(--ease) 1.1s forwards;
}
.intro.hero-video .byline{
  opacity: 0;
  animation: heroFadeIn 1s var(--ease) 2.2s forwards;
}
.intro.hero-video .scroll-cue{
  opacity: 0;
  animation: heroFadeIn .9s var(--ease) 2.9s forwards;
  /* flujo normal en vez de absolute: evita choques con el byline en viewports bajos */
  position: static;
  bottom: auto; left: auto;
  margin-top: clamp(28px, 6vh, 56px);
}
@keyframes heroWordmark{
  from{ opacity: 0; letter-spacing: .015em; transform: translateY(8px); }
  to{ opacity: 1; letter-spacing: -.01em; transform: translateY(0); }
}
@keyframes heroFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .intro.hero-video .wordmark,
  .intro.hero-video .byline,
  .intro.hero-video .scroll-cue{
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.intro .scroll-cue{
  position:absolute;
  bottom: 28px; left: var(--pad);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity:.55;
  display:flex; align-items:center; gap:10px;
}
.intro .scroll-cue .dash{
  width: 26px; height:1px; background: currentColor;
  animation: crabshift 2.6s ease-in-out infinite;
}
@keyframes crabshift{
  0%,100%{ transform: translateX(0); }
  50%{ transform: translateX(8px); }
}

/* -------------------------------------------------------------
   Work sections — ritmo editorial
--------------------------------------------------------------*/
.work-list{
  display:flex;
  flex-direction: column;
}
.proj-block{
  position: relative;
  border-top: 1px solid var(--line);
  padding: clamp(48px,8vw,110px) var(--pad);
}
.proj-block.on-ink{
  background: var(--ink);
  color: var(--paper);
  border-top-color: var(--line-invert);
}
.proj-block .reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.proj-block.in-view .reveal{ opacity:1; transform: translateY(0); }

.proj-link{ display:block; }
.proj-media{
  overflow:hidden;
  background: var(--paper-2);
  position: relative;
}
.proj-media img{
  width:100%; height:100%; object-fit: cover;
  transform: scale(1.01);
  transition: transform .9s var(--ease);
}
.proj-link:hover .proj-media img{ transform: scale(1.06); }

.proj-title{
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  line-height: .96;
}
.proj-meta{
  display:flex;
  gap: 18px;
  align-items:center;
  margin-top: 14px;
  font-size: .8rem;
  opacity: .65;
  flex-wrap: wrap;
}
.proj-meta .dot{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; }

/* full — imagen a sangre, título enorme superpuesto */
.proj-block[data-layout="full"] .proj-media{
  aspect-ratio: 16/9;
  border-radius: var(--radius);
}
.proj-block[data-layout="full"] .proj-title{
  font-size: clamp(2.6rem, 8vw, 6.5rem);
}
.proj-block[data-layout="full"] .full-overlay{
  position:absolute;
  left: var(--pad); bottom: clamp(24px,4vw,56px);
  right: var(--pad);
  display:flex; justify-content: space-between; align-items:flex-end; gap: 24px;
  color: #fff;
  z-index: 2;
  pointer-events:none;
}
.proj-block[data-layout="full"] .full-overlay .proj-meta{ color:#fff; opacity:.85; }
.proj-block[data-layout="full"] .full-overlay .proj-title{
  text-shadow: 0 2px 24px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}
.proj-block[data-layout="full"] .proj-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%);
}

/* horizontal — banda ancha, texto al lado */
.proj-block[data-layout="horizontal"] .row{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--gap);
  align-items:center;
}
.proj-block[data-layout="horizontal"] .proj-media{ aspect-ratio: 4/3; }
.proj-block[data-layout="horizontal"] .proj-title{ font-size: clamp(2rem,5.4vw,4.2rem); }

/* vertical — columna angosta con aire */
.proj-block[data-layout="vertical"] .row{
  display:grid;
  grid-template-columns: .58fr 1fr;
  gap: clamp(24px, 6vw, 90px);
  align-items:center;
}
.proj-block[data-layout="vertical"] .proj-media{ aspect-ratio: 3/4; max-width: 420px; }
.proj-block[data-layout="vertical"] .proj-title{ font-size: clamp(2rem,5vw,3.6rem); }
.proj-block[data-layout="vertical"] .proj-desc{
  font-family: var(--f-display);
  font-size: clamp(1.05rem,2vw,1.5rem);
  line-height: 1.5;
  max-width: 46ch;
  margin-top: 18px;
}

/* duo — dos proyectos en tensión */
.duo-row{
  display:grid;
  grid-template-columns: .62fr 1fr;
  gap: var(--gap);
}
.duo-row .duo-item{ display:flex; flex-direction:column; gap: 16px; }
.duo-row .duo-item:first-child{ align-self:flex-end; }
.duo-row .duo-item:first-child .proj-media{ aspect-ratio: 3/4; }
.duo-row .duo-item:last-child .proj-media{ aspect-ratio: 5/4; }
.duo-row .proj-title{ font-size: clamp(1.7rem,3.6vw,2.6rem); }

/* split — dos imágenes, jerarquía distinta */
.proj-block[data-layout="split"] .row{
  display:grid;
  grid-template-columns: 1fr .55fr;
  gap: var(--gap);
}
.proj-block[data-layout="split"] .proj-media.a{ aspect-ratio: 4/5; }
.proj-block[data-layout="split"] .proj-media.b{ aspect-ratio: 3/4; margin-top: 14%; }
.proj-block[data-layout="split"] .proj-title{ font-size: clamp(2rem,5vw,3.8rem); margin-top: 20px; }

/* text — pequeño, mucho aire, tipografía como protagonista */
.proj-block[data-layout="text"] .row{
  display:grid;
  grid-template-columns: 1fr .9fr;
  gap: var(--gap);
  align-items:center;
}
.proj-block[data-layout="text"] .pull{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.6rem,3.6vw,2.6rem);
  line-height: 1.15;
}
.proj-block[data-layout="text"] .proj-media{ aspect-ratio: 4/5; max-width: 340px; margin-left:auto; }
.proj-block[data-layout="text"] .proj-title{ font-size: clamp(1.3rem,2.4vw,1.7rem); margin-top: 22px; font-style: normal; }

/* -------------------------------------------------------------
   Footer
--------------------------------------------------------------*/
.site-footer{
  border-top: 1px solid var(--line);
  padding: clamp(40px,7vw,80px) var(--pad) 40px;
  display:flex;
  flex-direction: column;
  gap: 28px;
}
.site-footer .foot-top{
  display:flex; justify-content: space-between; align-items:flex-end; gap: 20px; flex-wrap:wrap;
}
.site-footer .foot-mark{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2rem,6vw,4rem);
}
.site-footer .foot-links{ display:flex; gap:26px; flex-wrap:wrap; }
.site-footer .foot-links a{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
.site-footer .foot-bottom{
  display:flex; justify-content:space-between; font-size:.75rem; opacity:.55; flex-wrap:wrap; gap:8px;
}

/* -------------------------------------------------------------
   Work — archivo completo, grilla editorial controlada
--------------------------------------------------------------*/
.work-header{
  padding: clamp(110px,14vw,150px) var(--pad) clamp(24px,4vw,40px);
}
.work-header h1{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: .96;
}
.work-header p{
  margin-top: 14px;
  max-width: 46ch;
  opacity: .65;
  font-size: .95rem;
}

.work-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: var(--gap);
  padding: 0 var(--pad) clamp(60px,8vw,100px);
}

.work-card{
  position: relative;
  display: block;
  grid-column: span 4;
}
.work-card[data-size="lg"]{ grid-column: span 8; }
.work-card[data-size="md"]{ grid-column: span 6; }
.work-card[data-size="sm"]{ grid-column: span 4; }
.work-card[data-size="tall"]{ grid-column: span 4; }

.work-card .work-media{
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 4/3;
}
.work-card[data-size="lg"] .work-media{ aspect-ratio: 16/9; }
.work-card[data-size="tall"] .work-media{ aspect-ratio: 3/4; }

.work-card .work-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.01);
  filter: saturate(.96) contrast(1);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.work-card:hover .work-media img{ transform: scale(1.045); filter: saturate(1.05) contrast(1.03); }

.work-card.featured .work-media::after{
  content:"";
  position:absolute; top:12px; right:12px;
  width:8px; height:8px; border-radius:50%;
  background: var(--accent);
  z-index:2;
}

.work-card .work-caption{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.work-card .work-caption .w-name{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
}
.work-card .work-caption .w-meta{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .5;
  white-space: nowrap;
  flex-shrink: 0;
}

/* -------------------------------------------------------------
   Project page
--------------------------------------------------------------*/
.p-hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 110px var(--pad) 50px;
  overflow:hidden;
}
.p-hero .hero-bg{
  position:absolute; inset:0;
  z-index:0;
}
.p-hero .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.p-hero .hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.72) 100%);
}
.p-hero .hero-content{ position:relative; z-index:1; color:#fff; }
.p-hero .back{
  position:relative; z-index:2;
  display:inline-block;
  margin-bottom: auto;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  opacity:.8;
}
.p-hero h1{
  font-family: var(--f-display);
  font-style: italic;
  font-weight:500;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: .96;
  max-width: 16ch;
}
.p-hero .p-meta{
  display:flex; gap:22px; flex-wrap:wrap;
  margin-top:22px;
  font-size:.82rem;
  opacity:.85;
}

.p-section{
  padding: clamp(50px,8vw,110px) var(--pad);
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.p-section.in-view{ opacity:1; transform: translateY(0); }
.p-section.full-bleed{ padding-left:0; padding-right:0; }
.p-section.full-bleed img{ width:100%; }

.p-pullquote{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  line-height:1.2;
  max-width: 22ch;
}
.p-desc{
  font-size: clamp(1rem,1.6vw,1.2rem);
  line-height:1.65;
  max-width: 58ch;
  margin-top: 20px;
}

.p-pair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.p-pair img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }

.p-vertical{ display:flex; justify-content:center; }
.p-vertical img{ max-width: 560px; }

.p-credits{
  padding: clamp(40px,6vw,70px) var(--pad);
  border-top: 1px solid var(--line);
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 24px;
}
.p-credits .credit-line{ font-size:.88rem; opacity:.75; }
.p-credits .credit-line strong{ display:block; opacity:1; font-weight:600; margin-bottom:2px; }

.p-next{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line-invert);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(36px,6vw,56px) var(--pad);
}
.p-next .next-inner{ position:relative; z-index:1; }
.p-next .eyebrow{ opacity:.6; color: var(--paper); }
.p-next h2{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  margin-top: 8px;
}
.p-next .next-arrow{
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  opacity: .7;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
  flex-shrink: 0;
}
.p-next:hover .next-arrow{ transform: translateX(12px); opacity: 1; }

/* -------------------------------------------------------------
   About / Contact
--------------------------------------------------------------*/
.simple-page{
  min-height: 100vh;
  padding: clamp(120px,16vw,180px) var(--pad) 80px;
  max-width: 900px;
}
.simple-page h1{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: clamp(24px,4vw,44px);
}
.simple-page p{
  font-size: clamp(1.05rem,1.8vw,1.3rem);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 1.3em;
}
.simple-page .tag-row{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 20px;
}
.simple-page .tag-row span{
  border:1px solid var(--line);
  padding: 6px 12px;
  font-size:.78rem;
  border-radius: 999px;
  opacity:.75;
}
.contact-list{ margin-top: 36px; display:flex; flex-direction:column; gap: 4px; }
.contact-list a, .contact-list .row{
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-style: italic;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display:flex; justify-content: space-between; align-items:baseline;
  gap: 16px;
}
.contact-list a small, .contact-list .row small{
  font-family: var(--f-sans);
  font-style: normal;
  font-size: .78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.55;
}
.contact-list a:hover{ color: var(--accent); }

/* -------------------------------------------------------------
   Responsive — tablet: WORK pasa de 12 a 2 columnas principales
--------------------------------------------------------------*/
@media (max-width: 1024px) and (min-width: 641px){
  .work-grid{ grid-template-columns: repeat(2, 1fr); }
  .work-card, .work-card[data-size="sm"], .work-card[data-size="md"], .work-card[data-size="tall"]{ grid-column: span 1; }
  .work-card[data-size="lg"]{ grid-column: span 2; }
  .work-card[data-size="lg"] .work-media{ aspect-ratio: 16/10; }
}

/* -------------------------------------------------------------
   Responsive — mobile primero en comportamiento, no solo tamaño
--------------------------------------------------------------*/
@media (max-width: 860px){
  .site-nav{ padding: 14px 18px; }
  .intro{ padding: 0 18px; min-height: 62vh; }
  .intro .byline{ flex-direction: column; align-items:flex-start; gap: 4px; }
  .proj-block{ padding: 40px 18px; }
  .work-header{ padding: 90px 18px 24px; }
  .proj-block[data-layout="horizontal"] .row,
  .proj-block[data-layout="vertical"] .row,
  .proj-block[data-layout="split"] .row,
  .proj-block[data-layout="text"] .row,
  .duo-row{
    grid-template-columns: 1fr !important;
  }
  .proj-block[data-layout="vertical"] .proj-media{ max-width:none; }
  .proj-block[data-layout="split"] .proj-media.b{ margin-top:0; }
  .proj-block[data-layout="text"] .proj-media{ margin-left:0; order:-1; margin-bottom: 18px; }
  .duo-row .duo-item:first-child{ align-self:auto; }
  .p-pair{ grid-template-columns: 1fr; }
  .p-hero{ padding: 90px 18px 40px; }
  .p-section{ padding: 40px 18px; }
  .p-credits{ padding: 30px 18px; }
  .p-next{ padding: 40px 18px; }
  .simple-page{ padding: 100px 18px 60px; }

  /* en móvil, transform-hover de imagen molesta más que ayuda */
  .proj-link:hover .proj-media img{ transform:none; }
}

/* -------------------------------------------------------------
   Responsive — mobile real (teléfono): principalmente 1 columna
--------------------------------------------------------------*/
@media (max-width: 640px){
  .work-grid{
    grid-template-columns: repeat(2, 1fr);
    padding: 0 18px 60px;
    gap: 14px;
  }
  /* principalmente 1 columna: lg/md/tall ocupan la fila completa */
  .work-card, .work-card[data-size="md"], .work-card[data-size="lg"], .work-card[data-size="tall"]{ grid-column: span 2; }
  /* solo las piezas chicas se permiten en pareja, si la legibilidad lo permite */
  .work-card[data-size="sm"]{ grid-column: span 1; }
  .work-card[data-size="lg"] .work-media{ aspect-ratio: 4/3; }
  .work-card:hover .work-media img{ transform:none; filter:none; }
  .work-card .work-caption{ flex-direction: column; align-items:flex-start; gap: 2px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html{ scroll-behavior:auto; }
}