/* ============================================================
   Leer Digital — diseño editorial, calmado y minimalista
   Paleta cálida · serif para cuerpo · sans/display para titulares
   ============================================================ */

/* Carga tipográfica (titulares en serif editorial) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── Tokens ────────────────────────────────────────────────── */
:root{
  --paper:       #faf7f2;
  --paper-soft:  #f4efe4;
  --paper-deep:  #ece6d8;
  --ink:         #595654;
  --ink-2:       #4a4640;
  --ink-3:       #7a736a;
  --ink-4:       #6d665c;
  --line:        #e7dfd0;
  --line-soft:   #f0e9dc;
  --accent:      #7a5c3a;
  --accent-soft: #c2a477;
  --tag-n: #7a736a;
  --tag-g:       #8b4a5e;
  --tag-e:       #5a5b8c;
  --shadow:      0 1px 0 rgba(30,28,25,.04);
  --radius:      4px;
  --radius-lg:   10px;
  --ease:        cubic-bezier(.22,.61,.36,1);
  --dur:         .6s;
  /* Tipografía */
  --sans:        system-ui, -apple-system, BlinkMacSystemFont, "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --serif:       "Fraunces", Georgia, "Times New Roman", Times, serif;
  /* Lectura: UI/cuerpo nativo + titulares editoriales en serif */
  --body:        var(--sans);
  --display:     var(--serif);
  color-scheme: light;
}
html[data-theme="dark"]{
  /* Paleta neutra: negros casi puros + grises fríos para letra */
  --paper:       #131313;
  --paper-soft:  #1c1c1c;
  --paper-deep:  #262626;
  --ink:         #ddd;
  --ink-2:       #b6b6b6;
  --ink-3: #d0c1a6;
  --ink-4:       #565656;
  --line:        #2a2a2a;
  --line-soft:   #1f1f1f;
  /* Accent conserva una ligera calidez (identidad editorial), pero mucho menos saturado */
  --accent: #d0bc98;
  --accent-soft: #7a7267;
  --tag-n: #d0bc98;
  --tag-g:       #d094ab;
  --tag-e:       #a0a1d6;
  --shadow:      0 1px 0 rgba(0,0,0,.35);
  color-scheme: dark;
}

html[data-theme="dark"]{

.ctrl-btn svg{
  stroke:#d0c1a6;
}
  
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:var(--body);
  font-size:clamp(17px, 0.22vw + 16.2px, 19px);
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","calt";
  transition:background-color .4s var(--ease), color .4s var(--ease);
  overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-soft);color:var(--paper)}

/* Subtle pattern (very low contrast noise) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(122,92,58,.04), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(122,92,58,.035), transparent 60%);
}
html[data-theme="dark"] body::before{
  /* Halo casi imperceptible y neutro — sin tinte amarillento */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.025), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(255,255,255,.018), transparent 60%);
}

/* En modo oscuro, los hover de títulos no se dorean: se "encienden" en blanco.
   Así evitamos el tinte amarillento que producía --accent sobre fondo oscuro. */
html[data-theme="dark"] .feat:hover .feat-title,
html[data-theme="dark"] .ncard:hover .ncard-title,
html[data-theme="dark"] .rel-card:hover .rel-title{
  color: #fff;
}

/* ── Reading progress (article page) ──────────────────────── */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--accent);
  z-index:60; transition:width .15s linear;
}

/* ── Header ────────────────────────────────────────────────── */
.hd{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:color-mix(in oklab, var(--paper) 94%, transparent);
  border-bottom:1px solid var(--line-soft);
}
.hd-inner{
  max-width:980px; margin:0 auto;
  padding:18px 32px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px;
}
.logo{display:flex; align-items:center; gap:10px}
.logo-mark{
  width:26px; height:26px; border-radius:50%;
  background:var(--ink);
  display:grid; place-items:center;
  color:var(--paper);
}
.logo-mark svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
.logo-text{
  font-family:var(--serif); font-weight:500; font-size:1.18rem;
  letter-spacing:-.01em;
}
.logo-text em{font-style:italic;font-weight:400;color: var(--ink-3);margin-left:3px}

.hd-nav{
  display:flex; justify-content:center; gap:4px; flex-wrap:wrap;
}
.nav-link{
  font-size:.87rem; letter-spacing:.01em;
  color:var(--ink-3);
  padding:8px 14px; border-radius:999px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-link:hover{color:var(--ink)}
.nav-link.on{color:var(--ink); background:var(--paper-soft)}

.hd-right{display:flex;gap:4px;justify-content: flex-end;}
.ctrl-btn{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-2);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.ctrl-btn:hover{background:var(--paper-soft); color:var(--ink)}
.ctrl-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Franja contextual: debajo del header · clima + divisas (referencial) */
.hd-strip{
  position:relative;
  z-index:40;
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.02em;
  color:var(--ink-3);
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in oklab, var(--paper-soft) 55%, var(--paper));
}
.hd-strip-inner{
  max-width:980px;
  margin:0 auto;
  padding:7px 32px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px 28px;
  flex-wrap:wrap;
}
.hd-strip-weather,.hd-strip-econ{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:1.35em;
  line-height:1.35;
}
.hd-strip-econ{text-align:right;justify-content:flex-end}
.hd-strip-weathertext{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.hd-strip-weathertext:hover{color:var(--ink)}
.hd-strip-weathertext:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 60%, transparent);
  outline-offset:2px;
  border-radius:6px;
}
.hd-strip-ico{
  flex-shrink:0;
  opacity:.45;
  font-size:.65rem;
  line-height:1;
  transform:translateY(-.05em);
}
.hd-strip-loading{opacity:.55}

/* ── Hero section ──────────────────────────────────────────── */
.wrap{
  position:relative;
  z-index:1;
  max-width: 980px;
  margin:0 auto;
  padding:40px 32px 80px;
}
.intro{
  padding:0 0 48px;
  max-width:640px;
}
.intro h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:18px;
}
.intro h1 em{
  font-family:var(--serif);
  font-style:italic; font-weight:400; color:var(--ink-2);
}
.intro p{
  color:var(--ink-3); font-size:1.06rem; max-width:520px; line-height:1.65;
}
.intro-meta{
  display:flex; align-items:center; gap:14px;
  margin-top:26px;
  color:var(--ink-4); font-size:.8rem;
  letter-spacing:.04em; text-transform:uppercase;
}
.intro-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

/* Featured grid */
.section-label{
  display:flex; align-items:center; gap:18px;
  margin:0 0 34px;
  color:var(--ink-3);
}
.section-label-txt{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:.98rem; letter-spacing:.01em; color:var(--ink-2);
  white-space:nowrap;
}
.section-label-line{flex:1; height:1px; background:var(--line)}
.section-label-hint{
  color:var(--ink-4); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap;
}

/* ── Fuentes (chips) ────────────────────────────────────────── */
.sources-panel{margin:0 0 30px}
.sources-toggle{
  width:100%;
  display:flex; align-items:center; gap:18px;
  margin:0 0 16px;
  color:var(--ink-3);
  padding:0;
}
.sources-toggle .chev{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.7;
  transition:transform .25s var(--ease);
}
.sources-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sources-body{padding-top:6px}
.sources{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:0;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in oklab, var(--paper-soft) 70%, transparent);
  color:var(--ink-2);
  font-size:.86rem;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover{transform:translateY(-1px); border-color:color-mix(in oklab, var(--accent) 35%, var(--line))}
.chip .n{color:var(--ink-4); font-size:.78rem}
.chip.on{
  border-color:color-mix(in oklab, var(--accent) 55%, var(--line));
  background:color-mix(in oklab, var(--accent) 12%, var(--paper-soft));
  color:var(--ink);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); 
  gap:40px 56px;
  margin-bottom:90px;
}
.hero-grid > .side{display:flex; flex-direction:column; gap:34px}

/* v2 — Hero: 1 arriba, 2 debajo (solo layout) */
.hero-wrap{margin-bottom:90px}
.hero-subs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:34px 45px;
  margin-top:34px;
}
@media (max-width: 900px){
  .hero-wrap{margin-bottom:60px}
  .hero-subs{grid-template-columns:1fr; gap:34px; margin-top:34px}
}

.feat{
  display:block; position:relative;
  cursor:pointer; transition:transform .5s var(--ease);
}

.feat-img{
  position:relative;
  overflow:hidden;
  aspect-ratio: 1.91/1;
  background:var(--paper-soft);
  border-radius:var(--radius);
  margin-bottom: 5px;
}
.feat-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
  filter:saturate(.95);
  max-height: 600px;
}

.feat-tag{
  font-family:var(--sans);
  font-weight:600;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:10px; display:inline-block;
}

.feat-title{
  font-family:var(--display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--ink);
  margin-bottom: 7px;
  transition:color .25s var(--ease);
}
.feat.main .feat-title{font-size:clamp(1.8rem, 3vw, 2.5rem)}
.feat.sub .feat-title{font-size: clamp(1.3rem, 2vw, 1.6rem);line-height:1.22}
.feat:hover .feat-title{color:var(--accent)}

/* ── Hero MAIN: móvil = titular bajo imagen; escritorio = tag sobre imagen + titular sobre imagen ─ */
.feat-main-visual{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.feat.main .feat-main-body{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-top:4px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  min-width:0;
}
.feat.main .feat-sum{
  font-family:var(--sans);
  font-size:.98rem;
  line-height:1.55;
}

/* Móvil / tablet estrecha: titular debajo de la foto (no encima) */
.feat.main .feat-main-visual .feat-hero-cap{
  position:static;
  z-index:1;
  padding:14px 0 0;
  pointer-events:none;
}
.feat.main .feat-main-visual .feat-hero-cap .feat-title{
  margin:0;
  padding:0;
  color:var(--ink);
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.12;
  text-shadow:none;
}
@media (max-width: 900px){
  /* Sólo hacía falta leer el tag sobre la foto; el titular ya no está en la zona oscura */
  .feat.main .feat-img::after{display:none}
}

.feat.main .feat-img .feat-tag{
  position:absolute;
  top:0; left:0;
  margin:0;
  padding:18px 22px 0;
  max-width:min(100%, 28rem);
  z-index:4;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.28);
}
.feat.main .feat-img .feat-tag::before{background:#fff; opacity:.88}
.feat.main .feat-img::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:46%;
  max-height:160px;
  background:linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 55%, transparent 100%);
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
}
.feat.main .feat-img::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:75%;
  max-height:340px;
  background:linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.78) 35%, rgba(0,0,0,.38) 65%, transparent 100%);
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
}

@media (min-width: 640px){
  .feat.main .feat-main-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px 40px;
    align-items:start;
  }
  .feat.main .feat-sum{margin-bottom:0}
  .feat.main .feat-main-body:not(:has(.feat-sum)) .feat-meta{
    grid-column:1 / -1;
    justify-self:end;
    text-align:right;
    max-width:none;
  }
  .feat.main .feat-meta{
    margin-top:0;
    padding-top:2px;
    justify-self:end;
    max-width:14rem;
  }
}
@media (min-width: 640px) and (max-width: 900px){
  .feat.main .feat-meta{justify-content:flex-end}
}

@media (min-width: 901px){
  .feat.main{
    display:grid;
    border-radius: var(--radius);
    overflow:hidden;
  }
  .feat.main .feat-main-visual{
    position:relative;
    display:block;
    min-height:0;
  }
  .feat.main .feat-main-visual .feat-hero-cap{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:3;
    padding:28px 32px 30px;
    pointer-events:none;
  }
  .feat.main .feat-main-visual .feat-hero-cap .feat-title{
    margin:0;
    padding:0;
    color:#fff;
    font-size:clamp(1.65rem, 2.4vw, 1.875rem);
    line-height:1.07;
    text-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 32px rgba(0,0,0,.38);
  }
  .feat.main:hover .feat-main-visual .feat-hero-cap .feat-title{
    color:color-mix(in oklab, var(--accent-soft) 22%, #fff);
  }
  .feat.main .feat-img{
    margin:0;
    aspect-ratio: auto;
    height:100%;
    border-radius:0;
  }
  .feat.main .feat-img .feat-tag{
    padding:22px 28px 0;
    max-width:min(100%, 32rem);
  }
  .feat.main .feat-main-body{
    justify-content:center;
    align-content:center;
    align-self:center;
    padding:36px 0px 28px;
    gap:20px 48px;
  }
  .feat.main .feat-main-body .feat-title{
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height:1.15;
    margin-bottom:14px;
  }
  .feat.main .feat-sum{
    -webkit-line-clamp:4;
    color:var(--ink);
  }
  .feat.main .feat-meta{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    max-width:13rem;
    justify-content:flex-start;
  }
  .feat.main .feat-meta .feat-meta-mob-only{display:none}
  .feat.main .feat-meta .feat-meta-desktop-only{
    display:block;
    font-size:.72rem;
    font-weight:400;
    color:var(--ink-3);
    line-height:1.45;
    letter-spacing:.02em;
  }
  .feat.main .feat-meta .src{
    font-weight:600;
    font-size:.86rem;
    color:var(--ink);
    line-height:1.22;
  }
  /* El hover "subir" se vería raro con el borde/tarjeta, lo suavizamos */
  .feat.main:hover{transform:none;}
  .feat.main:hover .feat-img img{transform:none}
}

html[data-theme="dark"] .feat.main .feat-meta .feat-meta-desktop-only{color:var(--ink-2)}

@media (min-width: 1200px){
  .feat.main .feat-main-body{padding: 28px 0 26px;}
  .feat.main .feat-main-body .feat-title{font-size: clamp(1.6rem, 2vw, 2rem)}
  .feat.main .feat-main-visual .feat-hero-cap .feat-title{font-size:clamp(1.65rem, 2.4vw, 1.875rem)}
}

.feat-sum{
  color:var(--ink-2); font-size:1rem; line-height:1.62;
  margin-bottom:14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.feat.sub .feat-sum{-webkit-line-clamp:2; font-size:1rem}

.feat-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.78rem; color:var(--ink-3);
}
.feat-meta .src{color:var(--ink-2); font-weight:500}
.feat-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

/* Meta hero: sólo ≤900px — fila tipo .feat.sub y ocultar línea “hace… · min”.
   En ≥901 las reglas del bloque @media (min-width:901px) aplican (columna + .feat-meta-desktop-only). */
@media (max-width: 900px){
  .feat.main .feat-meta{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    font-family:var(--sans);
    font-size:.78rem;
    color:var(--ink-3);
    justify-content:flex-start;
    text-align:left;
  }
  .feat.main .feat-meta .src{
    font-weight:500;
    color:var(--ink-2);
    line-height:1.35;
  }
  .feat.main .feat-meta .feat-meta-mob-only{
    color:var(--ink-3);
  }
  .feat.main .feat-meta time{
    font-size:.78rem;
    color:var(--ink-3);
  }
  .feat.main .feat-meta .feat-meta-desktop-only{display:none}
}

/* Tag colors (very subtle) */
.tag-noticias{color:var(--tag-n)}
.tag-gamer{color:var(--tag-g)}
.tag-geek{color:var(--tag-e)}

/* Tabs (categories) removidas (se usa menú superior). */

/* ── Feed (cards) ──────────────────────────────────────────── */
.feed{
  display:flex; flex-direction:column; gap:0;
}
.feed-group{
  padding:8px 0 20px;
}
.feed-group-label{
  display:flex; align-items:baseline; gap:20px;
  margin:42px 0 30px;
}
.feed-group-label h3{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.05rem; color:var(--ink);
}
.feed-group-label .line{flex:1; height:1px; background:var(--line)}
.feed-group-label .count{color:var(--ink-4); font-size:.78rem; letter-spacing:.04em}

.feed-list{
  display:flex; flex-direction:column; gap:44px;
}
.ncard{
  display:grid;
  grid-template-columns: 1fr minmax(0, 320px);
  gap: 30px;
  padding:0 0 44px;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  animation:rise .8s var(--ease) forwards;
}
@keyframes rise{to{opacity:1; transform:translateY(0)}}
.ncard:last-child{border-bottom:0; padding-bottom:0}

.ncard-body{min-width:0; display:flex; flex-direction:column}
.ncard-top{
  font-family:var(--sans);
  font-weight:600;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:12px;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.ncard-top .cat{display:inline-flex; align-items:center; gap:7px}
.ncard-top .sep{width:2px;height:2px;border-radius:50%;background: var(--ink-3);}
.ncard-top .src{color: var(--ink-3);text-transform: uppercase;letter-spacing:.02em}

.ncard-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.3rem, 2vw, 1.6rem);
  line-height:1.18; letter-spacing:-.012em;
  color:var(--ink);
  margin-bottom:12px;
  transition:color .25s var(--ease);
}
.ncard:hover .ncard-title{color:var(--accent)}

.ncard-sum{
  color:var(--ink-2); font-size:1rem; line-height:1.68;
  margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  max-width:62ch;
}
.ncard-bot{
  margin-top:auto;
  display:flex; align-items:center; gap:12px;
  font-size:.8rem; color:var(--ink-3);
}
.ncard-bot .time-read{
  display:inline-flex; align-items:center; gap:6px;
}
.ncard-bot .time-read svg{width:13px;height:13px; stroke:currentColor; fill:none; stroke-width:1.6}

.ncard-img{
  position:relative;
  overflow:hidden;
  aspect-ratio: 1.91/1;
  background:var(--paper-soft);
  border-radius:var(--radius);
  margin: auto;
}
.ncard-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease);
  filter:saturate(.9);
}

.ncard.no-img{grid-template-columns:1fr}
.ncard.no-img .ncard-img{display:none}

/* ── Pause / continue ──────────────────────────────────────── */
.pause{
  display:none;
  padding:70px 0 40px;
  text-align:center;
}
.pause.show{display:block}
.pause-orn{
  display:flex; align-items:center; justify-content:center; gap:18px;
  color:var(--ink-4); margin-bottom:24px;
}
.pause-orn .ln{width:60px; height:1px; background:var(--line)}
.pause-orn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;opacity:.7}
.pause h4{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:1.4rem; color:var(--ink); margin-bottom:10px;
  letter-spacing:-.01em;
}
.pause p{color:var(--ink-3); font-size:.92rem; max-width:380px; margin:0 auto 28px}
.pause-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.86rem; letter-spacing:.02em;
  color:var(--ink);
  padding:12px 26px; border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  transition:all .3s var(--ease);
}
.pause-btn:hover{background:var(--paper-soft); border-color:var(--accent-soft); transform:translateY(-1px)}
.pause-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}

/* End state */
.end{
  text-align:center; padding:80px 0 30px;
  color:var(--ink-3);
}
.end-orn{
  display:inline-flex; align-items:center; gap:14px; margin-bottom:18px;
  color:var(--ink-4);
}
.end-orn .ln{width:40px; height:1px; background:var(--line)}
.end h4{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.15rem; color:var(--ink-2);
}
.end p{font-size:.84rem; margin-top:8px; color:var(--ink-3)}

/* Empty */
.empty{
  text-align:center; padding:80px 20px; color:var(--ink-3);
}
.empty svg{margin:0 auto 16px; stroke:currentColor; fill:none; stroke-width:1.5}
.empty-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.2rem; color:var(--ink-2); margin-bottom:8px;
}

/* ── Skeletons ─────────────────────────────────────────────── */
.sk{
  background:linear-gradient(90deg,var(--paper-soft) 0%,var(--paper-deep) 40%,var(--paper-soft) 80%);
  background-size:200% 100%;
  animation:shimmer 1.6s linear infinite;
  border-radius:var(--radius);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Imágenes: placeholder mientras carga el <img> (hero, destacados, feed, relacionadas) */
.img-ph{position:relative}
.img-ph-skel{
  position:absolute; inset:0; z-index:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--paper-soft) 0%,var(--paper-deep) 40%,var(--paper-soft) 80%);
  background-size:200% 100%;
  animation:shimmer 1.6s linear infinite;
  pointer-events:none;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
/* Icono “foto” centrado (mask = silueta sobre el shimmer) */
.img-ph-skel::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(38px, 11vw, 56px);
  height:clamp(38px, 11vw, 56px);
  transform:translate(-50%,-50%);
  background:var(--ink-3);
  opacity:.38;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21%2019V5c0-1.1-.9-2-2-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2zM8.5%2013.5l2.5%203.01L14.5%2012l4.5%206H5l3.5-4.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21%2019V5c0-1.1-.9-2-2-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2zM8.5%2013.5l2.5%203.01L14.5%2012l4.5%206H5l3.5-4.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}
.img-ph > img{
  position:relative; z-index:1;
  opacity:0;
  transition:opacity .45s var(--ease);
}
.img-ph.is-loaded > img{opacity:1}
.img-ph.is-loaded .img-ph-skel{
  opacity:0;
  visibility:hidden;
}
@media (prefers-reduced-motion: reduce){
  .img-ph-skel{animation:none}
}

.sk-hero{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:40px 56px;
  margin-bottom:90px;
}
.sk-feat{aspect-ratio:16/10}
.sk-side{display:flex; flex-direction:column; gap:34px}
.sk-sm{aspect-ratio:16/10}
.sk-line{height:14px; border-radius:4px; margin-top:14px}
.sk-line.s{width:40%}
.sk-line.m{width:70%}
.sk-line.l{width:90%}

.sk-row{
  display:grid; grid-template-columns:1fr 220px; gap:36px; padding:0 0 44px; border-bottom:1px solid var(--line-soft);
}
.sk-row-body{display:flex;flex-direction:column;gap:12px}
.sk-row-img{aspect-ratio:4/3; border-radius:var(--radius)}

/* ── Search overlay ────────────────────────────────────────── */
.veil{
  position:fixed; inset:0; z-index:80;
  background:color-mix(in oklab, var(--paper) 70%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
  display:grid; place-items:start center;
  padding-top:18vh;
}
.veil.open{opacity:1; pointer-events:auto}

/* Login: con el velo cerrado, Safari iOS aún “ve” inputs name=password dentro del
   overlay (opacity:0) y puede mostrar el aviso de credenciales al cargar.
   display:none evita que ese contenido participe hasta que el usuario abra el modal. */
#loginVeil:not(.open) .veil-box{display:none}

.veil-box{
  width:min(560px, 92vw);
  transform:translateY(-8px);
  transition:transform .4s var(--ease);
}
.veil.open .veil-box{transform:translateY(0)}
.sinput-wrap{
  position:relative;
  border-bottom:1px solid var(--ink-4);
  padding:4px 0;
  margin-bottom:16px;
}
.sinput-icon{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  color:var(--ink-3);
}
.sinput-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.sinput{
  width:100%; padding:14px 0 14px 32px;
  font-family:var(--sans); font-weight:500;
  font-size:1.5rem; letter-spacing:-.01em;
  background:transparent; border:0; outline:none;
  color:var(--ink);
}
.sinput::placeholder{color:var(--ink-4); font-style:italic}
.sinput-hint{
  color:var(--ink-3); font-size:.78rem; text-align:center;
  letter-spacing:.02em;
}
.sinput-hint kbd{
  font-family:var(--sans); font-size:.72rem;
  background:var(--paper-soft); padding:2px 7px; border-radius:4px;
  border:1px solid var(--line); color:var(--ink-2);
}

/* ── Auth overlay (login) ───────────────────────────────────── */
.auth-box{
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 14px 40px rgba(20,18,14,.08);
  padding:22px 22px 18px;
}
html[data-theme="dark"] .auth-box{
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}
.auth-head{margin-bottom:14px}
.auth-title{
  font-family:var(--sans);
  font-weight:650;
  font-size:1.35rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.auth-sub{color:var(--ink-3); font-size:.9rem; margin-top:4px}
.auth-form{display:flex; flex-direction:column; gap:12px}
.auth-field{display:flex; flex-direction:column; gap:6px}
.auth-label{color:var(--ink-3); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase}
.auth-input{
  width:100%;
  background:transparent;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 12px;
  outline:none;
  color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.auth-input:focus{
  border-color:color-mix(in oklab, var(--accent) 60%, var(--line));
  background:color-mix(in oklab, var(--paper-soft) 72%, transparent);
}
.auth-remember{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-2); font-size:.9rem;
  user-select:none;
}
.auth-remember input{transform:translateY(1px)}
.auth-btn{
  margin-top:4px;
  width:100%;
  background:var(--ink);
  color:var(--paper);
  border-radius:999px;
  padding:12px 16px;
  font-size:.92rem;
  letter-spacing:.02em;
  transition:transform .15s var(--ease), filter .2s var(--ease);
}
.auth-btn:hover{transform:translateY(-1px); filter:saturate(1.05)}
.auth-btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.auth-btn-oidc{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  text-decoration:none;
}
.auth-btn-oidc:hover{background:color-mix(in oklab, var(--paper-soft) 70%, transparent)}
.auth-divider{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-3); font-size:.78rem; letter-spacing:.03em;
}
.auth-divider::before,.auth-divider::after{
  content:''; flex:1; height:1px; background:var(--line);
}
.auth-hint{
  color:var(--ink-3); font-size:.78rem; text-align:center;
  letter-spacing:.02em; margin-top:2px;
}
.auth-hint kbd{
  font-family:var(--sans); font-size:.72rem;
  background:var(--paper-soft); padding:2px 7px; border-radius:4px;
  border:1px solid var(--line); color:var(--ink-2);
}

/* ── Toast ─────────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:32px; left:50%; transform:translate(-50%, 20px);
  background:var(--ink); color:var(--paper);
  padding:12px 22px; border-radius:999px;
  font-size:.84rem; letter-spacing:.01em;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  z-index:90;
}
.toast.show{opacity:1; transform:translate(-50%, 0)}

/* ── Footer ────────────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--line-soft);
  padding:40px 32px 60px;
  text-align:center;
  color:var(--ink-3); font-size:.82rem; letter-spacing:.02em;
  position:relative; z-index:1;
}
.footer .mark{
  font-family:var(--serif); font-style:italic; color:var(--ink-2);
}

/* ============================================================
   Article page
   ============================================================ */

.art-hero{
  position:relative;
  max-width:850px; margin:40px auto 0;
  padding:0 32px;
}
.art-hero-img{
  aspect-ratio: 1.91 / 1;
  overflow:hidden; border-radius:var(--radius);
  background:var(--paper-soft);
}
.art-hero-img img{width:100%;height:100%;object-fit:cover; filter:saturate(.92)}
.art-no-hero{padding-top:40px}

.art{
  max-width:830px;
  margin:0 auto;
  padding:60px 32px 80px;
}
.art-head{
  max-width:830px;
  margin:0 auto;
  padding:30px 32px 0;
}
.art.art-has-head{padding-top:20px;}
.art-head .art-hero{max-width:none; margin:18px 0 0; padding:0}
.art-head .art-no-hero{padding-top:18px}
.art-head .art-top{margin-top:22px; margin-bottom:26px}
.art-back{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink-3); font-size:.82rem; letter-spacing:.02em;
  margin-bottom:0;
  transition:color .25s var(--ease);
}
.art-back:hover{color:var(--ink)}
.art-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}

.art-top{
  font-family:var(--sans);
  font-weight:600;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:30px;
}
.art-top .cat{display:inline-flex; align-items:center; gap:7px}
.art-top .sep{width:2px;height:2px;border-radius:50%;background:var(--ink-4)}
.art-top .src{color:var(--ink-3); text-transform:uppercase; letter-spacing:.02em}

.art-h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem, 4.2vw, 2.4rem);
  line-height:1.15; 
  color:var(--ink);
  margin-bottom:24px;
}

.art-lede{
  font-family:var(--serif); font-style:italic; font-weight:300;
  color:var(--ink-2);
  font-size:clamp(1.15rem, 1.4vw, 1.3rem); line-height:1.55;
  margin-bottom:40px;
  padding-left:20px; border-left:2px solid var(--accent-soft);
}

.art-ext{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--accent); font-size:.84rem; letter-spacing:.02em;
  padding:10px 16px; border-radius:999px;
  border:1px solid var(--line);
  margin-bottom:3px;
  transition:all .25s var(--ease);
}
.art-ext:hover{background:var(--paper-soft); border-color:var(--accent-soft)}
.art-ext svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}

.art-content{
  font-size:1.1rem; line-height:1.82;
  color:var(--ink);
  font-feature-settings:"kern","liga","onum";
}
.art-content > *+*{margin-top:1.3em}
.art-content p{font-size:1.1rem}
.art-content h2, .art-content h3{
  font-family:var(--sans); font-weight:650;
  color:var(--ink);
  margin-top:1.3em;
}
.art-content h2{font-size:1.55rem; line-height:1.25}
.art-content h3{font-size:1.25rem; line-height:1.3}
.art-content a{color: var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art-content a:hover{color:var(--ink)}
.art-content img{
  height:auto; max-width:100%;
  border-radius:var(--radius); margin:1.5em 0;
}
.art-content blockquote{
  border-left:2px solid var(--accent-soft);
  font-family:var(--serif);
  font-style:italic;
  color:var(--ink-2);
  padding: 20px;
  margin: 20px 0px 20px 0px;
}
.art-content ul, .art-content ol{padding-left:1.4em}
.art-content li+li{margin-top:.4em}
.art-content hr{border:0; height:1px; background:var(--line); margin:2.5em 0}

/* ── Embeds dentro del artículo (iframes, redes sociales) ── */
.art-content iframe{
  width:100%; max-width:100%;
  border:0; border-radius:var(--radius);
  margin:1.5em 0;
  aspect-ratio: 16/9; /* por defecto; se sobreescribe para embeds cuadrados */
}
.art-content iframe.youtube-video,
.art-content .youtube-video iframe{aspect-ratio:16/9}
.art-content .instagram-media,
.art-content .twitter-tweet,
.art-content .tiktok-embed,
.art-content blockquote[class*="embed"]{margin:1.6em auto}
.art-content figure{margin:1.6em 0}
.art-content figure img{margin:0}

/* ── Tarjeta de Dailymotion (reemplazo de .js-dailymotion) ── */
.miredden-dm-card{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); cursor:pointer;
  aspect-ratio:16/9; margin:1.5em 0;
  background:var(--paper-soft);
  transition:transform .2s var(--ease);
}
.miredden-dm-card:hover{transform:translateY(-1px)}
.miredden-dm-card img{
  width:100%; height:100%; object-fit:cover;
  margin:0; border-radius:0; display:block;
}
.miredden-dm-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
}
.miredden-dm-info{
  position:absolute; left:18px; right:18px; bottom:18px;
  color:#fff; z-index:2; pointer-events:none;
}
.miredden-dm-title{
  font-family:var(--sans); font-weight:500;
  font-size:.95rem; line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.miredden-play_screen_content{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
}
.miredden-button_play{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px 10px 14px; border-radius:999px;
  background:rgba(0,0,0,.7); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  font-family:var(--sans); font-size:.85rem;
  backdrop-filter:blur(6px);
}
.miredden-button_play svg{width:20px; height:20px}
.miredden-button_play_content{display:inline-flex; align-items:center; gap:8px}
.miredden-dm-brand{
  position:absolute; top:12px; right:14px;
  color:rgba(255,255,255,.85); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase;
  z-index:2; pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.miredden-dm-brand strong{font-weight:700; color:#fff}

/* ── Thumbnail de YouTube (Kudasai) ── */
.art-content .youtube-thumbnail{
  position:relative; display:block;
  aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius); cursor:pointer;
  margin:1.5em 0; background:var(--paper-soft);
}
.art-content .youtube-thumbnail::before{
  content:""; position:absolute; top:50%; left:50%;
  width:64px; height:64px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(0,0,0,.6);
  pointer-events:none; z-index:2;
}
.art-content .youtube-thumbnail::after{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-40%,-50%);
  border-style:solid; border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff;
  pointer-events:none; z-index:3;
}
.art-content .youtube-thumbnail img{
  width:100%; height:100%; object-fit:cover;
  margin:0; border-radius:0;
}
.art-content .youtube-thumbnail iframe{
  position:absolute; inset:0;
  width:100%; height:100%; margin:0;
  aspect-ratio:auto;
}

/* ── Header con imagen añadido por el backend (.mr_header) ── */
.art-content .mr_header{margin:0 0 1.6em 0}
.art-content .mr_header img{margin:0; border-radius:var(--radius)}

.art-divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:70px 0;
  color:var(--ink-4);
}
.art-divider .ln{width:80px; height:1px; background:var(--line)}
.art-divider svg{width:12px;height:12px;fill:currentColor}

/* Sección: Explorar (interacciones) */
.explore{
  margin:70px 0 10px;
  padding:32px;
  background:var(--paper-soft);
  border-radius:var(--radius-lg);
  border:1px solid var(--line-soft);
}
.explore-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:10px;
}
.explore-head h4{
  font-family:var(--serif); font-weight:400;
  font-size:1.2rem; letter-spacing:-.01em;
  color:var(--ink);
}
.explore-head .pill{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:3px 10px;
  border:1px solid var(--line); border-radius:999px;
}
.explore p.explore-lede{
  color:var(--ink-3); font-size:.92rem; margin-bottom:20px;
}
.explore-actions{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;
}
.explore-btn{
  text-align:left;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  transition:all .25s var(--ease);
}
.explore-btn:hover{border-color:var(--accent-soft); transform:translateY(-1px)}
.explore-btn .label{
  font-family:var(--serif); font-weight:500; font-size:.96rem; color:var(--ink); display:block; margin-bottom:2px;
}
.explore-btn .hint{color:var(--ink-3); font-size:.78rem}

.explore-panel{
  display:none;
  margin-top:16px;
  padding:18px 20px;
  background:var(--paper);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  color:var(--ink-2); font-size:.9rem;
}
.explore-panel.show{display:block; animation:rise .4s var(--ease)}
.explore-panel strong{color:var(--ink); font-weight:500; font-family:var(--serif)}

/* Related */
.related{
  max-width:1100px; margin:0 auto;
  padding:30px 32px 100px;
}
.rel-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:30px;
}
.rel-card{
  cursor:pointer; display:block;
}
.rel-img{
  aspect-ratio:1.91 / 1;overflow:hidden; border-radius:var(--radius);
  background:var(--paper-soft); margin-bottom:14px;
}
.rel-img img{width:100%;height:100%;object-fit:cover; transition:transform 1s var(--ease); filter:saturate(.9)}

.rel-tag{
  font-family:var(--sans);
  font-weight:600;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px;
}
.rel-title{
  font-family:var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height:1.25;
  color:var(--ink);
  transition:color .25s var(--ease);
  display:-webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.rel-card:hover .rel-title{color:var(--accent)}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px){
  /* Una sola línea: sin rotación se centra el bloque visible; con rotación alterna clima/divisas */
  .hd-strip-inner{
    padding:17px 20px 12px;
    justify-content:center;
    flex-wrap:nowrap;
    gap:12px;
  }
  .hd-strip-inner:not(.hd-strip-mob-rotate) .hd-strip-weather,
  .hd-strip-inner:not(.hd-strip-mob-rotate) .hd-strip-econ{
    text-align:center;
    justify-content:center;
  }
  .hd-strip-inner.hd-strip-mob-rotate{
    position:relative;
    display:block;
    min-height:2.35em;
    overflow:hidden;
  }
  .hd-strip-inner.hd-strip-mob-rotate .hd-strip-weather,
  .hd-strip-inner.hd-strip-mob-rotate .hd-strip-econ{
    --hd-strip-slide:1.15em;
    position:absolute;
    left:20px;
    right:20px;
    top:50%;
    justify-content:center;
    text-align:center;
    margin:0;
    transition:
      opacity .88s var(--ease),
      transform .88s var(--ease);
    will-change:transform, opacity;
  }
  /* Clima visible: divisas esperan arriba (entran cayendo) */
  .hd-strip-inner.hd-strip-mob-rotate[data-phase="weather"] .hd-strip-weather{
    transform:translateY(-50%);
    opacity:1;
    z-index:2;
    pointer-events:auto;
  }
  .hd-strip-inner.hd-strip-mob-rotate[data-phase="weather"] .hd-strip-econ{
    transform:translateY(calc(-50% - var(--hd-strip-slide)));
    opacity:0;
    z-index:1;
    pointer-events:none;
  }
  /* Divisas visibles: clima sale hacia abajo */
  .hd-strip-inner.hd-strip-mob-rotate[data-phase="econ"] .hd-strip-econ{
    transform:translateY(-50%);
    opacity:1;
    z-index:2;
    pointer-events:auto;
  }
  .hd-strip-inner.hd-strip-mob-rotate[data-phase="econ"] .hd-strip-weather{
    transform:translateY(calc(-50% + var(--hd-strip-slide)));
    opacity:0;
    z-index:1;
    pointer-events:none;
  }
  .hd-inner{padding:16px 20px; grid-template-columns:auto auto; gap:12px}
  .hd-nav{
    grid-column:1/-1; order:3;
    border-top:1px solid var(--line-soft);
    padding-top:12px; margin-top:2px;
    justify-content:flex-start; overflow-x:auto;
    scrollbar-width:none;
  }
  .hd-nav::-webkit-scrollbar{display:none}
  .wrap{padding:4px 20px 60px}
  .intro{padding:0 0 32px}
  .hero-grid, .sk-hero{grid-template-columns:1fr; gap:34px; margin-bottom:60px}
  .ncard{grid-template-columns:1fr; gap:18px}
  .ncard-img{aspect-ratio:1.91/1; order:-1}
  .sk-row{grid-template-columns:1fr}
  .sk-row-img{aspect-ratio:16/9; order:-1}
  .art{padding:40px 22px 60px}
  .art-hero{padding:0 20px}
  .related{padding:20px 22px 80px}
}

@media (max-width: 600px){
  .feat.main .feat-title{font-size:1.7rem}
  .intro h1{font-size:2rem}
  .art-h1{font-size:1.8rem}
  .art-content{font-size:1.14rem}
  .art-content p{font-size:1.14rem}
  .explore{padding:22px}
}

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