/* Liz Rincón Suárez — Dark Editorial: full-bleed b&w photography, two-column
   layouts, acid-color accents on a permanent black ground. */

:root {
	--bg: #0C0C0C;
	--bg-raised: #1A1A1A;
	--ink: #F3F2ED;
	--ink-soft: #A6A29A;
	--line: rgba(243, 242, 237, .16);
	--acid: #D6FF3D;
	--acid-2: #FF3EA5;
	--disp: 'Red Hat Display', sans-serif;
	--serif: 'Sorts Mill Goudy', Georgia, serif;
	--mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--pad: clamp(1.25rem, 4vw, 3rem);
	--header-h: 4.5rem;
}

/* Always reserve the scrollbar's width, even on short pages. Without this,
   a page that grows tall enough to need a scrollbar (e.g. once the tale
   template's pagination script inserts many square pages) shifts the
   available width for anything measured beforehand — a real source of
   subtle layout bugs. */
html { background: var(--bg); overflow-y: scroll; }
body {
	background: var(--bg); color: var(--ink);
	font-family: var(--serif);
}
p, li, h1, h2, h3, h4, h5, h6 { color: inherit; }
a { color: var(--ink); }
::selection { background: var(--acid); color: #0c0c0c; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

.eyebrow {
	font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--acid); display: block;
}
.liz-meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--ink-soft); }
.liz-tight { padding-left: var(--pad) !important; padding-right: var(--pad) !important; }

/* ---------- chrome: header, always fixed and visible ---------- */
/* The header is hand-authored HTML carrying WordPress's Group-block layout
   class names (is-content-justification-space-between, is-nowrap) without
   an actual wp:group block behind them, so WP never generates the CSS
   those classes normally trigger — they're inert. Set the real flex
   behavior explicitly here instead of relying on them. */
.liz-header {
	/* left:0 + right:0 with width left auto already solves for a box that
	   fills the viewport exactly, padding included. An explicit width:100%
	   here fought that: with box-sizing:content-box (this theme's default,
	   no universal border-box reset), 100% width plus horizontal padding
	   added 2×padding worth of overflow past the right edge of the
	   viewport — invisible until justify-content:space-between above
	   started actually pushing the nav out to that overflowing edge,
	   which pushed the mobile hamburger button off-screen entirely. */
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
	border-bottom: 1px solid var(--line);
	padding: 1rem var(--pad);
}
/* The header's frosted-glass effect lives on a ::before layer, not the
   header itself. backdrop-filter (like transform/filter) makes its own
   element the containing block for any position:fixed descendant — with
   it on .liz-header directly, the mobile nav's fullscreen overlay (which
   is position:fixed, meant to cover the whole viewport) was being
   contained by the header's own small box instead, clipping the open
   menu to a tiny sliver in the top corner. A ::before is a sibling of the
   nav in the box tree, not an ancestor, so it can't trap it. */
.liz-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(12, 12, 12, .88);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.liz-header__brand { display: flex; align-items: center; gap: .7rem; }
.liz-header__brand img { width: 30px; height: 30px; filter: brightness(0) invert(1); }
.liz-header__title, .liz-header__title a {
	font-family: var(--disp); font-weight: 900; font-size: .95rem; letter-spacing: .02em;
	color: var(--ink); text-decoration: none;
}
.liz-header__nav { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.liz-header__nav a {
	color: var(--ink-soft); text-decoration: none; padding: .3rem 0; margin-left: 1.6rem;
	border-bottom: 2px solid transparent;
}
.liz-header__nav a:hover { color: var(--ink); border-color: var(--acid); }

/* ---------- homepage-only header: transparent over the hero, ---------- */
/* ---------- solid + logo once scrolled past it (see home-header.js) --- */
.liz-header.header--home {
	border-bottom-color: transparent;
	transition: border-color .3s ease;
}
.liz-header.header--home::before {
	background: rgba(12, 12, 12, .8);
	transition: background-color .3s ease;
}
.liz-header.header--home .liz-header__brand {
	opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.liz-header.header--home.header--scrolled {
	border-bottom-color: var(--line);
}
.liz-header.header--home.header--scrolled::before {
	background: rgba(12, 12, 12, .88);
}
.liz-header.header--home.header--scrolled .liz-header__brand {
	opacity: 1; pointer-events: auto;
}

/* ---------- mobile nav: fullscreen vertical overlay ---------- */
.liz-header__nav .wp-block-navigation__responsive-container-open,
.liz-header__nav .wp-block-navigation__responsive-container-close {
	color: var(--ink);
}
.liz-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--pad);
	/* The nav block's own "justify right" setting (for the desktop inline
	   list) sets --navigation-layout-justify: flex-end at the <nav>
	   element, which cascades down into the open dialog's wrapper and
	   right-aligns the whole list instead of centering it. Overriding the
	   variable here — rather than just the inner container's
	   justify-content below — fixes it at every level that reads it. */
	--navigation-layout-justify: center;
	--navigation-layout-align: center;
	--navigation-layout-justification-setting: center;
}
.liz-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 1.4rem; height: 100%;
}
.liz-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--disp); font-weight: 900; font-size: clamp(1.6rem, 6vw, 2.4rem);
	letter-spacing: .01em; text-transform: none;
}

/* ---------- footer ---------- */
.liz-footer { background: var(--bg-raised); border-top: 1px solid var(--line); }
.liz-footer__grid { padding: clamp(2.5rem,6vw,4rem) var(--pad) clamp(1.5rem,4vw,2.5rem); gap: clamp(2rem,5vw,4rem); }
.liz-footer__col { min-width: 200px; }
.liz-footer__col .wp-block-heading { margin-bottom: .8rem; }
.liz-footer__nav { font-family: var(--mono); font-size: .82rem; gap: .55rem !important; }
.liz-footer__nav a { color: var(--ink-soft); text-decoration: none; }
.liz-footer__nav a:hover { color: var(--acid); }
.liz-footer__bottom { padding: 1.2rem var(--pad) 1.8rem; border-top: 1px solid var(--line); }

/* ---------- full-bleed background section ---------- */
.bgsec {
	position: relative; height: 90vh; min-height: 520px;
	display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line);
	color: var(--ink);
}
/* These are real Cover blocks now (editable in the Page editor). Two of
   Cover's own core behaviors fight our design and re-assert themselves on
   every save (not just the first one), so both need permanent overrides:
   (1) WP auto-classifies some cover images as "is-light" and sets
   `color:#000` on the whole block via a zero-specificity :where() rule —
   harmless against most themes, but since none of our own rules set an
   explicit color (we rely on inheriting the page's white ink), that black
   cascades all the way down and makes text unreadable. The `color` above
   already beats it on specificity alone, restated here for clarity.
   (2) `.wp-block-cover__inner-container` is *always* position:relative in
   core CSS. Our content is bottom-anchored (align-items:flex-end) and
   shrink-wraps to its own content height, so it doesn't span the full
   cover — meaning it becomes the containing block for anything absolutely
   positioned inside it (like .hero-logo), landing that content partway
   down the section instead of relative to the full-height cover. Forcing
   it back to static lets absolute children correctly skip up to .bgsec. */
.bgsec .wp-block-cover__inner-container { position: static; }
.bgsec--mid { height: 62vh; min-height: 420px; align-items: center; justify-content: center; text-align: center; }
/* Articles with no featured image (single-portfolio.html falls back to this
   hero when a post has none) still got the full 90vh height with the title
   anchored to the bottom — a tall, empty dark box that pushed the title low
   enough to be cropped below the fold on first load. Without an image
   there's nothing to fill that height for, so collapse it to just the
   title's own size instead. */
.bgsec--bottom:not(:has(img)) {
	height: auto; min-height: 0; align-items: flex-start;
}
.bgsec--bottom:not(:has(img)) .bgsec__scrim { display: none; }
.bgsec--bottom:not(:has(img)) .bgsec__content {
	padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem));
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.bgsec__img, .bgsec .wp-block-post-featured-image {
	position: absolute; inset: 0; z-index: 0; margin: 0;
}
.bgsec__img img, .bgsec .wp-block-post-featured-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.bgsec__scrim { position: absolute; inset: 0; z-index: 1; }
.bgsec--mid .bgsec__scrim { background: rgba(12, 12, 12, .55); }
.bgsec__content { position: relative; z-index: 2; width: 100%; padding: clamp(2rem,6vw,4.5rem) var(--pad); }

.kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acid); display: block; margin-bottom: 1rem; }
.display-xl { font-family: var(--disp); font-weight: 900; font-size: clamp(2.6rem,7vw,6.5rem); line-height: .98; margin: 0; }
.display-lg { font-family: var(--disp); font-weight: 900; font-size: clamp(2rem,5vw,4rem); line-height: 1; margin: 0; }
.lede { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-soft); margin-top: 1.2rem; max-width: 46ch; }

/* "El Dolor de la Naturaleza" feature: full white copy (not the usual muted
   ink-soft lede) plus a solid CTA button instead of a plain text link, so
   the feature reads as a stronger visual anchor on the homepage. */
.dolor-feature .display-lg,
.dolor-feature .lede { color: #fff; }
/* Real Buttons-block button — className lands on the wrapper <div>, actual
   link styling has to target the nested .wp-block-button__link. */
.wp-block-button.cta-button { margin-top: 1.6rem; }
.wp-block-button.cta-button .wp-block-button__link {
	display: inline-flex; align-items: center;
	padding: .9rem 1.8rem; background: var(--acid); color: var(--bg);
	font-family: var(--mono); font-weight: 700; font-size: .85rem;
	letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
	border-radius: 2px; transition: background-color .2s ease, transform .2s ease;
	box-shadow: none; height: auto;
}
.wp-block-button.cta-button .wp-block-button__link:hover { background: var(--ink); transform: translateX(3px); }

/* ---------- two-column split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; border-bottom: 1px solid var(--line); }
.split__media { align-self: stretch; min-height: 420px; position: relative; }
.split__media img, .split__media .wp-block-post-featured-image {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0;
}
.split__text { padding: clamp(2rem,5vw,3rem) var(--pad); }
.split__text p { font-size: 1.08rem; color: var(--ink-soft); margin-top: 1.1rem; max-width: 52ch; }
.split__text h2 { font-family: var(--disp); font-weight: 900; font-size: clamp(1.8rem,3.2vw,2.6rem); margin-top: .6rem; }

/* ---------- credentials list ---------- */
.credlist { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.credlist li {
	padding: .8rem 0; border-top: 1px solid var(--line); font-size: .98rem; color: var(--ink-soft);
	display: flex; justify-content: space-between; gap: 1rem;
}
.credlist li span.tag { font-family: var(--mono); font-size: .72rem; color: var(--acid-2); white-space: nowrap; }

/* ---------- explore teaser (2-up) ---------- */
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; }
/* The grid's parent carries WP's "is-layout-constrained" class, whose
   generated CSS gives every non-alignfull child `margin-inline: auto` and
   a max-width — meant for centering ordinary content blocks, not grid
   cells. Since each card's image is position:absolute (out of flow, so it
   doesn't count toward the card's intrinsic width), that auto-margin rule
   was shrinking each card down to just the width of its label text and
   centering it, leaving gaps instead of a true full-bleed grid — worse
   for short labels like "Filmoteca" than long ones like "Obra de
   Creación". Force it back to filling its grid cell. */
/* Plain <div>, not a real <a> — a raw <a> spanning multiple real blocks
   (the image + the label group) gets its open/close tags mangled by the
   editor's own save-time HTML processing the next time this page is
   saved (confirmed live). Whole-card click-through instead comes from
   assets/js/card-link.js, following the real <a> already on the heading
   (kept for accessibility / no-JS) — see build note in that file. */
.teaser-card {
	position: relative; text-decoration: none; display: block; min-height: 60vh; overflow: hidden;
	border-right: 1px solid var(--line); cursor: pointer;
	width: 100%; max-width: none; margin: 0;
}
.teaser-card:last-child { border-right: none; }
.teaser-card img, .teaser-card .wp-block-post-featured-image {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0;
	transition: transform .6s ease, filter .4s ease;
}
.teaser-card:hover img { transform: scale(1.04); }
.teaser-card__scrim { position: absolute; inset: 0; background: rgba(12, 12, 12, .45); z-index: 1; }
.teaser-card__label { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem,4vw,2.5rem); }
.teaser-card h3 { font-family: var(--disp); font-weight: 900; font-size: clamp(1.8rem,3.4vw,2.8rem); margin: 0; }
.teaser-card h3 a { color: inherit; text-decoration: none; }
.teaser-card p { color: var(--ink-soft); margin-top: .5rem; max-width: 40ch; }

/* =====================================================
   BIBLIOTECA (library index)
====================================================== */
.lib-item {
	display: grid; grid-template-columns: 90px 1fr auto; gap: 1.6rem; align-items: baseline;
	padding: 1.8rem 0; border-bottom: 1px solid var(--line);
}
.lib-item__year { font-family: var(--mono); font-size: .95rem; color: var(--acid); }
.lib-item h3 { font-family: var(--disp); font-weight: 700; font-size: 1.3rem; line-height: 1.3; margin: 0; }
.lib-item p { color: var(--ink-soft); margin-top: .5rem; max-width: 62ch; font-size: .98rem; }
.lib-item__source { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); text-align: right; white-space: nowrap; }
a.dl { font-family: var(--mono); font-size: .78rem; color: var(--acid-2); text-decoration: none; }

/* =====================================================
   FILMOTECA (video grid)
====================================================== */
.film-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
.film-card { text-decoration: none; display: block; position: relative; background: var(--bg); }
.film-card .fr { aspect-ratio: 4/5; position: relative; overflow: hidden; }
.film-card .fr img, .film-card .fr .wp-block-post-featured-image {
	width: 100%; height: 100%; object-fit: cover; margin: 0;
	transition: filter .3s ease;
}
.film-card .fr .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 12, 12, .25); z-index: 2; }
.film-card .fr .play span {
	width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 2px solid var(--acid);
	display: flex; align-items: center; justify-content: center; color: var(--acid); font-size: 1.1rem;
}
.film-card__label { padding: 1.1rem 0; }
.film-card h3 { font-family: var(--disp); font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin: 0; }
.film-card p { color: var(--ink-soft); margin-top: .4rem; font-size: .9rem; }

/* ---------- longform article ---------- */
.lf-article p:first-of-type::first-letter {
	font-family: var(--disp); font-weight: 900; font-size: 4.2em; line-height: .82;
	float: left; padding: .04em .09em 0 0; color: var(--acid);
}
.lf-quote {
	border-left: 2px solid var(--acid-2); padding-left: 1.2rem;
	font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.35; color: var(--ink);
}

@media (max-width: 880px) {
	.split { grid-template-columns: 1fr; }
	.split__media { min-height: 320px; order: -1; }
	.teaser-grid { grid-template-columns: 1fr; }
	.teaser-card { border-right: none; border-bottom: 1px solid var(--line); }
	.lib-item { grid-template-columns: 1fr; gap: .3rem; }
	.lib-item__source { text-align: left; }
	.film-grid { grid-template-columns: 1fr; }
}

/* ---------- generic photo grid (etnografías / overview archive) ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
.photo-card { text-decoration: none; display: block; position: relative; background: var(--bg); }
.photo-card .fr { aspect-ratio: 4/5; position: relative; overflow: hidden; }
.photo-card .fr img, .photo-card .fr .wp-block-post-featured-image {
	width: 100%; height: 100%; object-fit: cover; margin: 0;
	transition: transform .4s ease, filter .4s ease;
}
.photo-card:hover .fr img { transform: scale(1.04); }
.photo-card__label { padding: 1.1rem 0; }
.photo-card h3 { font-family: var(--disp); font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin: 0; }
.photo-card p { color: var(--ink-soft); margin-top: .4rem; font-size: .9rem; }

@media (max-width: 880px) {
	.photo-grid { grid-template-columns: 1fr; }
}

/* ---------- defensive: prevent WP's is-layout-constrained child clamp
   from shrinking our own full-bleed/grid structural elements, regardless
   of which layout type the wrapping wp:group block used ---------- */
.lib-item, .film-grid, .photo-grid,
.bgsec__content, .bgsec__img, .split__media, .split__text,
.liz-header, .liz-footer__grid, .liz-footer__bottom {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* .bgsec/.split/.teaser-grid need genuine viewport-edge-to-edge breakout,
   not just "fill my immediate parent" — on the homepage Page they sit one
   level deeper than other templates (inside wp:post-content's own centered
   700px wrapper), so a plain margin:0 only fills that 700px box instead of
   reaching the viewport edge. The standard WP full-bleed technique (width
   100vw + negative margin computed from the element's own 50%) escapes
   correctly regardless of how many centered ancestors sit above it. */
.bgsec, .split, .teaser-grid, .row, .genre-nav {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* =====================================================
   IMAGE TONE SYSTEM
   Apply one of these to the image wrapper (.bgsec, .split__media,
   .teaser-card, .film-card .fr, .photo-card .fr):
   - .tone-color    full color, no filter
   - .tone-mono     flat grayscale (default fallback below)
   - .tone-halftone grayscale + halftone dot overlay
   - .tone-hover    grayscale by default, reveals full color on hover
     (used for elements that are themselves links to other posts/pages)
====================================================== */
.bgsec__img img, .bgsec .wp-block-post-featured-image img,
.split__media img, .split__media .wp-block-post-featured-image img,
.teaser-card img, .teaser-card .wp-block-post-featured-image img,
.film-card .fr img, .film-card .fr .wp-block-post-featured-image img,
.photo-card .fr img, .photo-card .fr .wp-block-post-featured-image img {
	filter: grayscale(1) contrast(1.05);
}

.tone-color img, .tone-color .wp-block-post-featured-image img,
.wp-block-post-featured-image.tone-color img { filter: none !important; }

.tone-mono img, .tone-mono .wp-block-post-featured-image img,
.wp-block-post-featured-image.tone-mono img { filter: grayscale(1) contrast(1.05) !important; }

.tone-halftone img, .tone-halftone .wp-block-post-featured-image img,
.wp-block-post-featured-image.tone-halftone img { filter: grayscale(1) contrast(1.05) !important; }
.tone-halftone::after, .wp-block-post-featured-image.tone-halftone::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background-image: radial-gradient(circle, rgba(0,0,0,.6) 1px, transparent 1.4px);
	background-size: 4px 4px; mix-blend-mode: multiply; opacity: .28;
}

.tone-hover img, .tone-hover .wp-block-post-featured-image img,
.wp-block-post-featured-image.tone-hover img { filter: grayscale(1) contrast(1.05) !important; }
.tone-hover:hover img, .tone-hover:hover .wp-block-post-featured-image img,
.wp-block-post-featured-image.tone-hover:hover img { filter: grayscale(0) contrast(1.05) !important; }

/* =====================================================
   FILMOTECA (page-filmoteca.html: streaming-style browse page,
   genre rows aggregating audiovisual portfolio items across
   portfolio_category via the portfolio_reel taxonomy)
====================================================== */
/* Filmoteca uses its own, much smaller edge gutter than the rest of the
   site's --pad (which scales up to 3rem) — the whole point of a streaming
   browse page is that the rows and hero read as full width, not inset
   inside the same margins as an editorial article. */
.filmoteca-hero .bgsec__content { padding-left: 1.5rem; padding-right: 1.5rem; }
.genre-nav { display: flex; gap: .6rem; flex-wrap: wrap; padding: clamp(1.4rem,3vw,2rem) 1.5rem 0; }
.genre-nav a {
	font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink-soft); text-decoration: none; border: 1px solid var(--line); border-radius: 999px;
	padding: .5rem 1.05rem;
}
.genre-nav a:hover { color: var(--ink); border-color: var(--acid); }

.row { padding: clamp(2.2rem,4vw,3rem) 0 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
.row__head { padding: 0 1.5rem; }
.row__title { font-family: var(--disp); font-weight: 900; font-size: clamp(1.3rem,2.4vw,1.9rem); margin: .35rem 0 0; }
.row__desc { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: .98rem; margin: .5rem 0 0; max-width: 62ch; }

.reel-track {
	display: flex; gap: 1.1rem; overflow-x: auto; list-style: none; margin: 0;
	padding: .3rem 1.5rem 1.4rem;
	scroll-snap-type: x proximity;
}
.reel-track > li { flex: 0 0 auto; width: 220px; scroll-snap-align: start; }
.reel-card__frame { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--line); }
.reel-card__frame img, .reel-card__frame .wp-block-post-featured-image {
	width: 100%; height: 100%; object-fit: cover; margin: 0;
	filter: grayscale(1) contrast(1.05);
	transition: transform .5s ease, filter .35s ease;
}
.reel-card__frame:hover img { transform: scale(1.045); filter: grayscale(0) contrast(1.05); }
.reel-card__frame .play {
	position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
	background: rgba(12, 12, 12, 0); opacity: 0; transition: opacity .3s ease, background-color .3s ease;
}
.reel-card__frame:hover .play { opacity: 1; background: rgba(12, 12, 12, .18); }
.reel-card__frame .play span {
	width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--acid);
	display: flex; align-items: center; justify-content: center; color: var(--acid);
	font-size: .95rem; background: rgba(12, 12, 12, .5);
}
/* Title + topics live permanently on top of the card image (not below it),
   inside the same frame as the photo — a bottom gradient scrim keeps them
   legible over any image tone. */
.reel-card__caption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.6rem .9rem .8rem;
	background: linear-gradient(0deg, rgba(12,12,12,.92) 20%, rgba(12,12,12,0) 100%);
}
.reel-card__caption .wp-block-post-title { font-family: var(--disp); font-weight: 700; font-size: .92rem; line-height: 1.25; margin: 0; }
.reel-card__caption .wp-block-post-title a { color: var(--ink); }
.reel-card__meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-top: .35rem; display: block; }
.reel-card__meta a { color: var(--ink-soft); text-decoration: none; }
.reel-card__meta a:hover { color: var(--acid); }

/* Desktop: landscape 16:9 posters, ~1/3 of the row's width so a sliver of
   the next card peeks in as an affordance for horizontal scroll. */
@media (min-width: 900px) {
	.reel-track > li { width: calc(33.333% - .75rem); }
	.reel-card__frame { aspect-ratio: 16/9; }
}

@media (max-width: 720px) {
	.reel-track > li { width: 160px; }
}

/* =====================================================
   TRAYECTORIA (bio page: post-content prose)
====================================================== */
.trayectoria h2 {
	font-family: var(--mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--acid); margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.trayectoria h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.trayectoria p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }
.trayectoria ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.trayectoria ul li {
	padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .98rem; line-height: 1.5;
}
.trayectoria a { color: var(--acid-2); text-decoration: underline; text-underline-offset: 2px; }
.trayectoria a:hover { color: var(--acid); }

/* =====================================================
   TAG CLOUD (topics / interests pills)
====================================================== */
.tag-cloud {
	display: flex; flex-wrap: wrap; gap: .5rem; max-width: none !important;
	margin-top: 1.2rem !important;
}
.tag-pill {
	font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
	color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px;
	padding: .35rem .85rem; white-space: nowrap;
}
/* Homepage hero / mobile-topics pills are real Buttons-block buttons (so
   they're individually add/remove/editable in the canvas) — the "tag-pill"
   className lands on the wrapper <div class="wp-block-button">, so the
   actual pill look (and the .tag-cloud--hero color/hover treatment) has to
   target the nested real link, not the wrapper itself. */
.wp-block-button.tag-pill { border: none; padding: 0; background: none; }
.wp-block-button.tag-pill .wp-block-button__link {
	font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
	color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px;
	padding: .35rem .85rem; white-space: nowrap; background: none; box-shadow: none; height: auto;
}
.tag-cloud--hero { justify-content: center; }
.tag-cloud--hero .wp-block-button.tag-pill .wp-block-button__link {
	color: var(--ink); border-color: rgba(255,255,255,.35);
	text-decoration: none; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.tag-cloud--hero .wp-block-button.tag-pill .wp-block-button__link:hover { color: var(--bg); background-color: var(--acid); border-color: var(--acid); }
.trayectoria .tag-cloud { margin-top: .8rem !important; }

/* Filter menu (archive-portfolio.html): same pill look, but real <button>s
   that toggle .photo-card visibility via tag-filter.js instead of linking out. */
.tag-cloud--filter { margin-bottom: 2.5rem !important; }
.tag-cloud--filter .tag-pill {
	background: none; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.tag-cloud--filter .tag-pill:hover { color: var(--ink); border-color: rgba(255,255,255,.35); }
.tag-cloud--filter .tag-pill.is-active { color: var(--bg); background-color: var(--acid); border-color: var(--acid); }

/* Mobile-only topics section (homepage): hidden on desktop, shown below the
   hero on narrow viewports once the hero's own tag cloud is hidden there. */
.mobile-topics { display: none; }

@media (max-width: 640px) {
	.home-hero .tag-cloud--hero { display: none; }
	.mobile-topics {
		display: block; padding: clamp(2rem,6vw,3rem) var(--pad);
		border-bottom: 1px solid var(--line);
	}
	.mobile-topics .eyebrow { display: block; margin-bottom: 1rem; }
	.mobile-topics .tag-cloud { justify-content: flex-start; margin-top: 0 !important; }
}

/* =====================================================
   HERO LOGO (large mark top-right of the homepage hero)
====================================================== */
.hero-logo {
	display: block; position: absolute !important; z-index: 3;
	top: calc(clamp(1rem, 3vw, 2rem) + 20px); right: clamp(1rem, 3vw, 2rem);
	width: clamp(110px, 16vw, 220px); height: auto; opacity: 1; pointer-events: none;
	filter: brightness(0) invert(1);
}
/* The block editor canvas wraps every block's own outer element in its
   own ".block-editor-block-list__block { position: relative }" utility
   class for selection/drag-handle UI (editor-only, never present on the
   live front end) — higher specificity than a plain ".hero-logo" rule, so
   without !important the logo loses its absolute positioning and drops
   into normal document flow only inside the editor. */

/* =====================================================
   LIGHTBOX (gallery carousel)
====================================================== */
body.liz-lightbox-lock { overflow: hidden; }
.wp-block-gallery a { cursor: zoom-in; }

.liz-lightbox {
	position: fixed; inset: 0; z-index: 999;
	background: rgba(12, 12, 12, .96);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.liz-lightbox.is-open { opacity: 1; visibility: visible; }

.liz-lightbox__stage { max-width: min(92vw, 1400px); max-height: 88vh; text-align: center; }
.liz-lightbox__img {
	max-width: 100%; max-height: 80vh; width: auto; height: auto;
	display: block; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.liz-lightbox__caption {
	font-family: var(--mono); font-size: .78rem; color: var(--ink-soft);
	margin-top: 1rem; max-width: 60ch; margin-left: auto; margin-right: auto;
}

.liz-lightbox__close, .liz-lightbox__nav {
	position: absolute; background: none; border: none; color: var(--ink);
	cursor: pointer; line-height: 1; transition: color .2s ease;
}
.liz-lightbox__close:hover, .liz-lightbox__nav:hover { color: var(--acid); }

.liz-lightbox__close { top: clamp(.75rem, 2vw, 1.75rem); right: clamp(1rem, 3vw, 2rem); font-size: 2.4rem; }
.liz-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: .5rem 1rem; }
.liz-lightbox__nav--prev { left: clamp(.25rem, 2vw, 1.5rem); }
.liz-lightbox__nav--next { right: clamp(.25rem, 2vw, 1.5rem); }

.liz-lightbox__counter {
	position: absolute; bottom: clamp(1rem, 3vw, 1.75rem); left: 0; right: 0; text-align: center;
	font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink-soft);
}

@media (max-width: 640px) {
	.liz-lightbox__nav { font-size: 2.2rem; padding: .4rem .6rem; }
	.liz-lightbox__close { font-size: 2rem; }
}

/* =====================================================
   FEATURE STRIP (small photo preview under a featured project)
====================================================== */
.feature-strip {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line);
	margin-top: clamp(1.5rem, 3vw, 2rem); max-width: 640px;
}
/* Each image is a real wp:image block, so the actual CSS grid item is the
   <figure> WP wraps it in, not the <a> one level below it — aspect-ratio
   living only on the <a> left the grid item itself with no sizing of its
   own, so the grid's row-height resolution came out inconsistent per item
   (one card taller than the rest, images misaligned). Moving the
   aspect-ratio onto the actual grid item fixes it deterministically. */
.feature-strip figure { aspect-ratio: 3 / 4; margin: 0; overflow: hidden; }
.feature-strip a { display: block; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
.feature-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
	.feature-strip { grid-template-columns: repeat(4, 1fr); max-width: 100%; }
}

/* =====================================================
   PAM'S BOOK — cover/index (dark, matches the site)
====================================================== */
.pam-cover {
	position: relative; height: 56vh; min-height: 380px;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background: var(--bg-raised); border-bottom: 1px solid var(--line);
	background-image: linear-gradient(180deg, rgba(12,12,12,.35), rgba(12,12,12,.85)), url('/wp-content/uploads/2026/09/pam-la-ultima-vez.png');
	background-size: cover; background-position: center 20%;
}
.pam-cover__inner { max-width: 640px; padding: 0 var(--pad); }
.pam-cover__back { font-family: var(--mono); font-size: .78rem; margin-bottom: 1.2rem; }
.pam-cover__back a { color: var(--ink-soft); text-decoration: none; }
.pam-cover__back a:hover { color: var(--acid); }
.pam-cover__title {
	font-family: var(--disp); font-weight: 900; font-size: clamp(3.5rem, 12vw, 7rem);
	letter-spacing: .04em; margin: .6rem 0 0; color: var(--ink);
}
.pam-cover__lede {
	font-family: var(--serif); font-style: italic; color: var(--ink-soft);
	font-size: 1.1rem; max-width: 46ch; margin: 1rem auto 0;
}

.pam-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); }
.pam-index__item { background: var(--bg); }
.pam-index__cover { aspect-ratio: 4 / 3; overflow: hidden; }
.pam-index__cover .wp-block-post-featured-image,
.pam-index__cover .wp-block-post-featured-image a { display: block; height: 100%; margin: 0; }
.pam-index__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s ease; }
.pam-index__cover:hover img { transform: scale(1.03); }
.pam-index__label { padding: 1.4rem 0 2rem; }
.pam-index__label time,
.pam-index__label .wp-block-post-date {
	font-family: var(--mono); font-size: .74rem; color: var(--acid); display: block; margin-bottom: .4rem;
}
.pam-index__label h3, .pam-index__label .wp-block-post-title {
	font-family: var(--disp); font-weight: 900; font-size: 1.3rem; margin: 0 0 .5rem;
}
.pam-index__label h3 a, .pam-index__label .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.pam-index__label p { color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
@media (max-width: 640px) {
	.pam-index { grid-template-columns: 1fr; }
}

/* =====================================================
   BOOK PAGE — single-tale reading template (warm paper,
   deliberately breaks from the site's dark ground). Full-
   width open-book spread: two facing pages, a printed
   gutter down the middle, text reflows between them via
   CSS columns so it works at any length.
====================================================== */
.tale-page { background: #E7DCC4; min-height: 100vh; }

/* cover: two squares side by side, image left / title right — the "front
   cover" of the booklet before you turn to the spread. Same width as the
   spread below it, not full-bleed. */
.tale-page__cover {
	display: grid; grid-template-columns: 1fr 1fr; color: #2B2620;
	max-width: 1400px; margin: 0 auto; padding: clamp(1rem, 3vw, 1.5rem) var(--pad) 0;
}
.tale-page__cover-img {
	aspect-ratio: 1 / 1; overflow: hidden; background: #2B2620;
	box-shadow: inset -10px 0 16px -12px rgba(43,38,32,.35);
}
.tale-page__cover-img .wp-block-post-featured-image { margin: 0; height: 100%; }
.tale-page__cover-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tale-page__cover-text {
	aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center;
	padding: clamp(1.5rem, 4vw, 3.5rem); background: #F6EFDE;
	border-left: 1px solid rgba(43,38,32,.15);
	box-shadow: inset 10px 0 16px -12px rgba(43,38,32,.35);
}
.tale-page__back-wrap {
	max-width: 1400px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad) 0;
}
.tale-page__back { font-family: var(--mono); font-size: .78rem; margin: 0; color: #8A7F6A; }
.tale-page__back a { color: inherit; text-decoration: none; }
.tale-page__back a:hover { color: #B0431E; }
.tale-page__kicker {
	font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
	color: #B0431E; display: block; margin-bottom: .8rem;
}
.tale-page__title {
	font-family: var(--disp); font-style: normal; font-weight: 900; color: #2B2620;
	font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.1; margin: 0;
}
.tale-page__author {
	font-family: var(--serif); font-style: italic; font-size: 1rem; color: #2B2620;
	margin: 1.2rem 0 0;
}
.tale-page__year {
	font-family: var(--mono); font-size: .78rem; color: #8A7F6A; display: block; margin-top: .3rem;
}
@media (max-width: 640px) {
	.tale-page__cover { grid-template-columns: 1fr; }
	.tale-page__cover-text { border-left: none; border-top: 1px solid rgba(43,38,32,.15); aspect-ratio: auto; padding: 2.5rem var(--pad) 3rem; }
}

/* a small ornament marking the turn from cover into the story */
.tale-page__spread::before {
	content: "❧"; display: block; text-align: center; color: #B0431E;
	font-size: 1.6rem; padding: clamp(2rem, 5vw, 3rem) 0 0;
}

/* the open book: real pagination. tale-pages.js measures how much text
   fits on one page and creates as many square pages as the story needs.
   Pages are two fluid columns — the same width division as
   .tale-page__cover above them — not a fixed pixel size, so they scale
   naturally with the viewport. */
.tale-page__spread {
	max-width: 1400px; margin: 0 auto; padding: 0 var(--pad) clamp(4rem, 8vw, 7rem);
}
.tale-page__leaves {
	display: grid; grid-template-columns: 1fr 1fr; row-gap: clamp(1rem, 3vw, 1.75rem);
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.tale-page__page {
	position: relative; aspect-ratio: 1 / 1; min-height: 0;
	background: #F6EFDE; color: #2B2620;
	box-shadow: 0 20px 40px rgba(43,38,32,.16), 0 2px 0 rgba(43,38,32,.06);
	border-radius: 3px; display: flex; flex-direction: column;
	padding: clamp(2.2rem, 5vw, 4rem);
}
/* Facing pages touch directly now (no gap), so a page's own box-shadow no
   longer shows on the inner edge — it's hidden behind the adjacent page.
   Add a matching inset shadow on that inner edge instead, mirrored so left
   and right pages get exactly the same weight, suggesting a book's gutter
   crease between them. */
.tale-page__leaves > *:nth-child(odd) {
	box-shadow: inset -10px 0 16px -12px rgba(43,38,32,.35), 0 20px 40px rgba(43,38,32,.16), 0 2px 0 rgba(43,38,32,.06);
}
.tale-page__leaves > *:nth-child(even) {
	box-shadow: inset 10px 0 16px -12px rgba(43,38,32,.35), 0 20px 40px rgba(43,38,32,.16), 0 2px 0 rgba(43,38,32,.06);
}
.tale-page__page--image { padding: 0; overflow: hidden; }
.tale-page__page--image img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tale-page__body {
	flex: 1 1 auto; min-height: 0; overflow: hidden;
	font-family: var(--serif); font-size: 1rem; line-height: 1.6;
}
.tale-page__body p { margin: 0 0 1em; }
.tale-page__body p:last-child { margin-bottom: 0; }
.tale-page__page:first-child .tale-page__body p:first-of-type::first-letter {
	/* Body text is 1rem / line-height 1.6, so one line is 1.6rem. Sized so
	   the letter's own box (font-size × line-height) is exactly two of
	   those lines (3.2rem) tall, with the surrounding text wrapping around
	   it for that span. */
	font-family: var(--disp); font-weight: 900; font-size: 3.69em; line-height: .78;
	float: left; padding: .04em .06em 0 0; color: #B0431E;
}
.tale-page__end-ornament {
	text-align: center; color: #B0431E; font-size: 1.3rem; margin-top: .6em !important;
}
.tale-page__number {
	/* Absolutely positioned, in its own reserved (smaller) bottom padding —
	   NOT a normal flex child taking space from .tale-page__body. It used
	   to be flex:0 0 auto with padding-top, which quietly shrank the text
	   area below what tale-pages.js had measured as available, so the
	   last line could get clipped by overflow:hidden right where the
	   number sits. */
	position: absolute; bottom: 1.2rem; left: 0; right: 0;
	text-align: center; font-family: var(--mono); font-size: .7rem; color: #8A7F6A;
}
.tale-page__page--image .tale-page__number {
	position: absolute; bottom: 0; left: 0; right: 0; margin: 0;
	padding: .5rem 0;
}

@media (max-width: 640px) {
	.tale-page__leaves { grid-template-columns: 1fr; }
	.tale-page__page { aspect-ratio: 3 / 4; }
}

/* ---------- promo banner: Pam's Book, closes out the Biblioteca page ---------- */
.pam-promo {
	position: relative; display: block; height: 46vh; min-height: 340px; overflow: hidden;
	margin-top: 1rem; border-top: 1px solid var(--line); text-decoration: none;
}
.pam-promo__img { position: absolute; inset: 0; margin: 0; }
.pam-promo__img img {
	width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
	transition: transform .6s ease;
}
.pam-promo:hover .pam-promo__img img { transform: scale(1.04); }
.pam-promo__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,12,12,.25) 0%, rgba(12,12,12,.55) 55%, rgba(12,12,12,.92) 100%);
}
.pam-promo__content {
	position: relative; z-index: 2; height: 100%;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(2rem,5vw,3rem) var(--pad);
}
.pam-promo__eyebrow {
	font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--acid); display: block; margin-bottom: .6rem;
}
.pam-promo__title {
	font-family: var(--disp); font-weight: 900; font-size: clamp(2.2rem,6vw,4rem); line-height: 1;
	margin: 0; color: var(--ink);
}
.pam-promo__lede {
	font-family: var(--serif); font-style: italic; color: var(--ink-soft);
	margin-top: .7rem; font-size: 1.05rem; max-width: 48ch;
}