/* Plum Notes: el blog (prefijo pn-)
   Portada: la lista de notas a oscuras; la que miras se enciende (la luz baja por su canto) y las demás quedan en penumbra.
   Artículo: la lectura de las páginas legales (v3-legal) con la imagen a caballo entre la cabecera oscura y el papel,
   citas, notas al margen y un cierre con el siguiente paso */

/* Relleno de la luz animable con CSS (el canto de las filas y las tarjetas), como las puertas de servicios */
@property --fill {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0px;
}

/* ---------- Portada ---------- */

.pn-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 2.5rem clamp(3rem, 7vw, 7rem);
    align-items: end;
    padding: clamp(10rem, 22vh, 13rem) var(--gutter) clamp(4rem, 9vh, 6rem);
    background: var(--carbon);
}

.pn-head__title { margin: 0; font-family: var(--serif); font-size: clamp(4.6rem, 11.5vw, 11.5rem); font-weight: 300; letter-spacing: -.045em; line-height: .9; }
.pn-head__title .v3-kicker { margin-bottom: 2.2rem; letter-spacing: .3em; }
.pn-head__title em { color: var(--ciruela-luz); font-style: italic; font-weight: 300; }
/* La línea que entra recorta por arriba: con este interlineado tan corto se comía la parte alta de la P */
.pn-head__title .v3-line { margin-top: -.14em; padding-top: .14em; }
.pn-head__lead { max-width: 31rem; margin: 0; color: rgba(245, 244, 241, .72); font-size: clamp(1rem, 1.1vw, 1.12rem); font-weight: 300; line-height: 1.7; }

.pn-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }

.pn-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid rgba(245, 244, 241, .18);
    border-radius: 999px;
    color: rgba(245, 244, 241, .72);
    background: transparent;
    font: 300 .85rem/1.2 var(--sans);
    cursor: pointer;
    transition: border-color .5s ease, background-color .5s ease, color .5s ease;
}

.pn-chip small { color: rgba(245, 244, 241, .4); font-size: .7rem; font-variant-numeric: tabular-nums; }
html:not(.is-touch) .pn-chip:hover { border-color: rgba(245, 244, 241, .4); }
.pn-chip[aria-pressed="true"] { border-color: var(--ciruela-luz); color: var(--hueso); background: rgba(131, 19, 108, .35); }
.pn-chip[aria-pressed="true"] small { color: rgba(245, 244, 241, .7); }
.pn-chip:focus-visible { outline: 1px solid rgba(var(--luz), .8); outline-offset: 2px; }

/* La nota destacada */
.pn-featured { padding: 0 var(--gutter) clamp(4rem, 9vh, 6rem); background: var(--carbon); }
.pn-featured.is-hidden { display: none; }

.pn-featured__link {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding-top: clamp(2.5rem, 6vh, 4rem);
    border-top: 1px solid rgba(245, 244, 241, .12);
}

.pn-featured__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.pn-featured__media .v3-slot { transition: transform 1.6s var(--ease-out), filter 1.2s ease; filter: brightness(.82); }
html:not(.is-touch) .pn-featured__link:hover .v3-slot,
.pn-featured__link:focus-visible .v3-slot { transform: scale(1.03); filter: none; }

.pn-featured__body { display: grid; gap: 1.1rem; justify-items: start; }
.pn-featured__tag { display: flex; align-items: center; gap: .8rem; color: rgba(var(--luz), .85); font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.pn-featured__tag b { color: rgba(245, 244, 241, .4); font-weight: 600; }
.pn-featured__title { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.05; }
.pn-featured__desc { max-width: 32rem; color: rgba(245, 244, 241, .66); font-size: .98rem; font-weight: 300; line-height: 1.7; }

/* Meta y "leer" compartidos por la destacada, las filas y las tarjetas */
.pn-card__meta,
.pn-row__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; color: rgba(245, 244, 241, .5); font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.pn-card__meta span:first-child,
.pn-row__meta span:first-child { color: rgba(var(--luz), .85); }

.pn-card__go { display: inline-flex; align-items: center; gap: .7rem; margin-top: .4rem; color: var(--hueso); font-size: .82rem; font-weight: 500; }
.pn-card__go svg { width: 1rem; height: 1rem; transition: transform .8s var(--ease-curtain); }
html:not(.is-touch) a:hover .pn-card__go svg,
a:focus-visible .pn-card__go svg { transform: translateX(.4rem); }

/* La lista: la nota que miras se enciende y las demás quedan en penumbra */
.pn-all { padding: 0 var(--gutter) clamp(6rem, 13vh, 9rem); background: var(--carbon); }
.pn-list { margin: 0; padding: 0; border-top: 1px solid rgba(245, 244, 241, .12); list-style: none; counter-reset: pn; }
.pn-row { border-bottom: 1px solid rgba(245, 244, 241, .12); transition: opacity var(--glow-dur) var(--glow-ease); }
.pn-row.is-hidden { display: none; }
html:not(.is-touch) .pn-list:has(.pn-row:hover) .pn-row:not(:hover),
html.is-touch .pn-list:has(.pn-row.is-focus) .pn-row:not(.is-focus) { opacity: .45; }

.pn-row__link {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, .8fr) clamp(9rem, 11vw, 13rem) auto;
    grid-template-rows: auto auto;
    gap: .7rem 2.5rem;
    align-items: baseline;
    padding: 2.2rem 0 2.2rem 1.6rem;
}

/* El canto de la fila: la luz baja por él al encenderla (mismo ritmo en todas sus partes). Se llena hasta el 100 %:
   así su final se funde dentro de la fila, igual que su principio, y nunca se corta en el borde */
.pn-row__edge,
.pn-card__edge { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; }
.pn-row__edge .v3-beam,
.pn-card__edge .v3-beam { --fill: 0%; transition: --fill var(--glow-dur) var(--glow-ease); }
html:not(.is-touch) .pn-row:hover .v3-beam,
.pn-row.is-focus .v3-beam,
.pn-row__link:focus-visible .v3-beam,
html:not(.is-touch) .pn-card:hover .v3-beam,
.pn-card.is-focus .v3-beam,
.pn-card__link:focus-visible .v3-beam { --fill: 100%; }

.pn-row__n { grid-row: 1 / span 2; color: rgba(245, 244, 241, .3); font-family: var(--serif); font-size: 1.1rem; font-style: italic; transition: color var(--glow-dur) var(--glow-ease); }
.pn-row__meta { grid-column: 2; }
.pn-row__title { grid-column: 2; font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2.2rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.12; transition: transform var(--glow-dur) var(--glow-ease); }
.pn-row__desc { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: rgba(245, 244, 241, .58); font-size: .92rem; font-weight: 300; line-height: 1.65; }
.pn-row__go { grid-column: 5; grid-row: 1 / span 2; align-self: center; width: 1.1rem; height: 1.1rem; color: rgba(245, 244, 241, .5); transition: transform var(--glow-dur) var(--glow-ease), color var(--glow-dur) var(--glow-ease); }

/* Miniaturas: en penumbra, como la lista; se encienden con la luz de su fila o su tarjeta */
.pn-row__media,
.pn-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #1a191f; }
.pn-row__media { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
.pn-card__media { margin-bottom: .5rem; aspect-ratio: 16 / 9; }
.pn-row__media img,
.pn-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.72) saturate(.85);
    transform: scale(1.001);
    transition: filter var(--glow-dur) var(--glow-ease), transform 1.6s var(--ease-out);
}
html:not(.is-touch) .pn-row:hover .pn-row__media img,
.pn-row.is-focus .pn-row__media img,
.pn-row__link:focus-visible .pn-row__media img,
html:not(.is-touch) .pn-card:hover .pn-card__media img,
.pn-card.is-focus .pn-card__media img,
.pn-card__link:focus-visible .pn-card__media img { filter: none; transform: scale(1.04); }

html:not(.is-touch) .pn-row:hover .pn-row__n,
.pn-row.is-focus .pn-row__n { color: rgba(var(--luz), .9); }
html:not(.is-touch) .pn-row:hover .pn-row__title,
.pn-row.is-focus .pn-row__title { transform: translateX(.4rem); }
html:not(.is-touch) .pn-row:hover .pn-row__go,
.pn-row.is-focus .pn-row__go { color: rgb(var(--luz-core)); transform: translateX(.4rem); }
.pn-row__link:focus-visible { outline: 1px solid rgba(var(--luz), .6); outline-offset: 4px; }

.pn-empty { margin: 2rem 0 0; color: rgba(245, 244, 241, .5); font-family: var(--serif); font-size: 1.2rem; font-style: italic; }

.pn-ask { display: grid; justify-items: start; gap: 1.6rem; padding: clamp(6rem, 14vh, 9rem) var(--gutter); background: var(--carbon-2); }
.pn-ask .v3-title { max-width: 15em; }

/* ---------- Artículo ---------- */

.pn-hero h1 { max-width: 15em; font-size: clamp(2.8rem, 5.8vw, 5.6rem); }

.pn-crumbs { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.8rem; color: rgba(245, 244, 241, .6); font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.pn-crumbs::before { content: ""; width: 2.2rem; height: 1px; background: linear-gradient(90deg, rgba(var(--luz), .9), rgba(var(--luz), 0)); }
.pn-crumbs span { color: rgba(245, 244, 241, .3); }
.pn-crumbs a { text-decoration: none !important; transition: color .4s ease; }
.pn-crumbs a:last-child { color: rgba(var(--luz), .9); }
.pn-crumbs a:hover, .pn-crumbs a:focus-visible { color: var(--hueso); }

/* La imagen, a caballo entre la cabecera oscura y el papel */
.pn-cover {
    margin: 0;
    padding: 0 var(--gutter);
    background: linear-gradient(180deg, var(--carbon) 0, var(--carbon) 50%, var(--hueso) 50%, var(--hueso) 100%);
}

.pn-cover__frame { position: relative; max-width: 96rem; margin: 0 auto; aspect-ratio: 21 / 9; overflow: hidden; }

.pn-post .l3-body { padding-top: clamp(4rem, 9vh, 6rem); }

.pn-body .l3-section > p:first-of-type { font-size: 1.08rem; }

.pn-quote {
    margin: 2rem 0 2.2rem;
    padding: .2rem 0 .2rem 1.6rem;
    border-left: 1px solid var(--ciruela);
    color: var(--carbon);
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.2vw, 1.95rem);
    font-style: italic;
    font-weight: 300;
    letter-spacing: -.015em;
    line-height: 1.3;
}

.pn-note {
    margin: 1.8rem 0 2rem;
    padding: 1.3rem 1.5rem;
    border-radius: .6rem;
    color: rgba(17, 17, 17, .75);
    background: #ebe8e1;
    font-size: .96rem;
    font-weight: 300;
    line-height: 1.65;
}

.pn-note b { display: block; margin-bottom: .45rem; color: var(--ciruela); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.pn-note a { color: var(--ciruela); text-decoration: underline; text-decoration-color: rgba(131, 19, 108, .35); text-underline-offset: .2em; }

/* El cierre del artículo */
.pn-end { margin-top: 1rem; padding: 2.4rem 0 0; border-top: 1px solid rgba(17, 17, 17, .14); }
.pn-end__kicker { margin: 0 0 1rem; color: var(--plomo); font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.pn-end__text { max-width: 30em; margin: 0; color: var(--carbon); font-family: var(--serif); font-size: clamp(1.5rem, 2.1vw, 1.9rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.25; }
.pn-end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin: 1.8rem 0 0; }
.pn-end__link { color: var(--ciruela); font-size: .88rem; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(131, 19, 108, .35); text-underline-offset: .22em; }

/* Sigue leyendo */
.pn-more { padding: clamp(5rem, 11vh, 7rem) var(--gutter); background: var(--carbon); }
.pn-more .v3-kicker { margin-bottom: 2rem; }
.pn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.pn-card { border-top: 1px solid rgba(245, 244, 241, .12); }
.pn-card__link { position: relative; display: grid; gap: .9rem; align-content: start; height: 100%; padding: 1.8rem 0 1.8rem 1.4rem; }
.pn-card__title { font-family: var(--serif); font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.18; }
.pn-card__desc { color: rgba(245, 244, 241, .58); font-size: .88rem; font-weight: 300; line-height: 1.6; }
.pn-card__link:focus-visible { outline: 1px solid rgba(var(--luz), .6); outline-offset: 4px; }
.pn-more__all { margin: 2rem 0 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .pn-row__link { grid-template-columns: 3.2rem minmax(0, 1fr) clamp(8rem, 18vw, 11rem) auto; }
    .pn-row__desc { grid-column: 2; grid-row: auto; }
    .pn-row__media { grid-column: 3; grid-row: 1 / span 3; }
    .pn-row__go { grid-column: 4; grid-row: 1 / span 3; }
    .pn-row__n { grid-row: 1 / span 3; }
    .pn-cards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .pn-head { grid-template-columns: 1fr; padding-top: 8.5rem; }
    .pn-featured__link { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .pn-head, .pn-featured, .pn-all, .pn-more { padding-left: 1.5rem; padding-right: 1.5rem; }
    .pn-ask { padding: 5.5rem 1.5rem; }
    .pn-row__link { grid-template-columns: minmax(0, 1fr) 6.2rem; gap: .6rem 1rem; padding: 1.8rem 0 1.8rem 1.2rem; }
    .pn-row__n, .pn-row__go { display: none; }
    .pn-row__meta, .pn-row__title, .pn-row__desc { grid-column: 1; }
    .pn-row__media { grid-column: 2; grid-row: 1 / span 2; align-self: start; aspect-ratio: 1 / 1; }
    .pn-cover { padding: 0 1.5rem; }
    .pn-cover__frame { aspect-ratio: 4 / 3; }
    .pn-end__actions .v3-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-row, .pn-row__title, .pn-row__go, .pn-featured__media .v3-slot { transition: none; }
}