/* Theme Name: 
 * Imagely Child Theme 
 * URI: https://example.com/ 
 * Description: Child theme for the Imagely theme 
 * Author: Ronny Mariano Version: 1.0.0 
 * Template: imagely 
 * Text Domain: imagely-child */















/* ========================================================================== 
 * 0) GLOBAL SETUP (variables, containers, type, shared components) 
 * -------------------------------------------------------------------------- 
 * Used site-wide (Vision, Echo, Photo Notes, pages, single posts). 
 * ========================================================================== */
/* --- CSS variables: widths, spacing, palette, borders --- */
:root {
	/* content widths */
	--wrap: 1200px;
	/* standard content width */
	--wrap-wide: 1320px;
	/* Vision parent can use this if needed */
	/* spacing scale */
	--g1: .5rem;
	--g2: 1rem;
	--g3: 1.5rem;
	--g4: 2rem;
	/* color palette */
	--bg: #D7CBB5;
	/* main page background */
	--panel: #BFAE91;
	/* alternate section tone */
	--hi: #fef5e6;
	/* chip background / subtle cards */
	--ink: #201C17;
	/* headings / primary ink */
	--dim: #5C554C;
	/* body dim text */
	--accent: #7C5C34;
	--accent-hi: #9B7143;
	--line: rgba(32, 28, 23, .10);
	/* borders / radii */
	--r: 10px;
	--border: 1px solid var(--line);
}

/* --- wrapper containers (GLOBAL) --- */
.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--g3);
}

.wrap-wide {
	max-width: var(--wrap-wide);
	margin: 0 auto;
	padding: 0 var(--g3);
}

/* --- base typography (GLOBAL) --- */
body {
	font-family: "Istok Web", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--dim);
}

h1,
h2,
h3,
h4 {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	color: var(--ink);
}

.measure {
	max-width: 70ch;
	margin: auto;
}

/* Hide search form completely (theme header) */
.header-searchform,
.header-searchform-wrap,
form.header-searchform {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* --- simple section rhythm (optional, GLOBAL) --- */
section:nth-of-type(odd) {
	background: var(--bg);
}

section:nth-of-type(even) {
	background: var(--panel);
}



@media(max-width:1024px) {
	[class*="-grid"] {
		gap: 1.5rem;
	}
}

@media(max-width:640px) {
	[class*="-grid"] {
		gap: 1.25rem;
	}
}

/* --- shared “card/tile” look (used by Echo/Visions cards) --- */
.card {
	border: var(--border);
	border-radius: var(--r);
	overflow: hidden;
	background: transparent
}

.card a {
	color: inherit;
	text-decoration: none;
	display: block
}

.card img {
	width: 100%;
	display: block;
	transition: transform .25s ease, filter .25s ease
}

.card:hover img {
	transform: scale(1.02);
	filter: brightness(1.06)
}

/* --- chips (GLOBAL) used by Photo Notes and elsewhere --- */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem .55rem
}

.chip {
	background: var(--hi);
	color: var(--accent);
	border: var(--border);
	border-radius: 999px;
	padding: .32rem .7rem;
	font: 1.3rem "Istok Web", sans-serif;
	line-height: 1.15;
	text-decoration: none;
}

.chip:hover {
	text-decoration: underline;
}

/* --- standard page content container (GLOBAL pages like Echo Essays) --- */
.page .site-main,
.page .content-area {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ========================================================================== 
 * 1) VISION (parent/child lists & homepage Vision tiles) 
 * -------------------------------------------------------------------------- 
 * Controls Vision index grids and tile look. 
 * ========================================================================== */
/* Vision parent grid (square responsive tiles) */

/* .vision-parent-grid — responsive grid layout for Vision tiles (square cards). */ 
/* =========================================================
   VISION – child gallery grid (single source of truth)
   Applies on Vision taxonomy pages.
   ========================================================= */


/* Make sure items can shrink fully */
.tax-vision .tile.tile-vision { display: block; width: 100%; min-width: 0; }




















/* --- grid gap helper (GLOBAL) --- */
[class*="-grid"] {
	display: grid;
	gap: 1.75rem;
}






/* ================================================
   Vision child gallery grid (mobile-friendly)
   ================================================ */
/* === Vision child gallery: auto-responsive grid === */



/* Tiles should not impose fixed widths */
.tile.tile-vision {
  display: block;
  width: 100%;
  min-width: 0;               /* critical to allow shrinking in some themes */
  text-decoration: none;
}

/* Images scale fluidly */
.vp-thumb {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;        /* optional aesthetic */
}

.vp-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}




/* Hover effect on Gallery titles*/
.tile-vision:hover .vp-thumb img {
  transform: scale(1.03);
  transition: transform 0.25s ease;
}


/*==========================================================================
/* === Header: make site title use available width === 
 * =========================================================================*/

.top-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.top-col.clr.col-2 {
  flex: 1 1 auto;      /* allows center column to expand */
  text-align: center;  /* keeps title centered */
}

.top-col.clr.col-1,
.top-col.clr.col-3 {
  flex: 0 0 auto;      /* side columns stay at natural width */
}

/* Prevent the title text from wrapping */
.site-title {
  white-space: nowrap;
}














/* Grid that lays out the child galleries (cards) */
/*  .vision-parent-grid — responsive grid layout for Vision tiles (square cards).  */ 
.vision-parent-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
	align-items: start;
}

/* .vision-parent-card — the tile link wrapper.   */ 
.vision-parent-card {
	display: block;
	text-decoration: none;
}

/*  .vp-thumb — the square thumbnail container (aspect-ratio 1/1, rounded corners).  */ 
.vp-thumb {
	display: block;
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: 8px;
}

/*  .vp-thumb img — image fills/crops within the square.  */ 
.vp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}





/*  .vp-title — simple title spacing under a tile.  */ 
.vp-title {
	display: block;
	margin: 8px 0 0;
}

/* ===== Vision term page (child gallery list) ===== */
/* Hide the theme's default archive header; we render our own */
/*    */ 
.taxonomy-vision .page-header {
	display: none;
}

/* Constrain width the same as other content pages */
/*  .taxonomy-vision .page-header — hides the theme’s default archive header (you render your own).
.taxonomy-vision .site-main, .taxonomy-vision .wrap — keep taxonomy pages constrained like regular pages.  */ 
.taxonomy-vision .site-main,
.taxonomy-vision .wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--g3);
}


















/* VISION — tile sizing (canonical) */
.tax-vision .tile.tile-vision {
  display: block;
  width: 100%;
  min-width: 0;
  text-decoration: none;
}

.tax-vision .tile-vision .vp-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;        /* square tile controls height */
  overflow: hidden;
  border-radius: 8px;
}

.tax-vision .tile-vision .vp-thumb img {
  display: block;
  width: 100%;
  height: 100%;               /* fill the square */
  object-fit: cover;          /* crop to square without distortion */
}


















/* =========================================================
   VISION — child gallery grid (canonical, breakpoint-based)
   ========================================================= */
.tax-vision .vision-grid {
  display: grid;
  gap: var(--g3, 1rem);
  grid-template-columns: 1fr;                /* phones: 1 col */
}

@media (min-width: 641px) {                   /* tablets */
  .tax-vision .vision-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {                  /* desktops */
  .tax-vision .vision-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Items can shrink fully (guards against theme min-widths) */
.tax-vision .tile.tile-vision { display: block; width: 100%; min-width: 0; }

/* Fluid images (no fixed heights) */
.tax-vision .vp-thumb { width: 100%; overflow: hidden; border-radius: 8px; }






/* ============================
   VISION — tile sizing (final)
   ============================ */

/* Grid already set to 1 col on phones — now constrain each tile */
.tax-vision .tile.tile-vision {
  display: block;
  width: 100%;
  min-width: 0;
  text-decoration: none;
}

/* The tile controls height: make it a responsive square */
.tax-vision .tile-vision .vp-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;      /* square tile */
  overflow: hidden;
  border-radius: 8px;
}

/* Image fills the square (never uses natural tall height) */
.tax-vision .tile-vision .vp-thumb img {
  position: absolute;       /* decouple intrinsic img height */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* crop to square without distortion */
  display: block;
}
















/* Title + optional description “paint” (reuses your tile styles) */
/*  .tile-vision .tile-title — heading style used inside custom Vision tiles.  */ 
.tile-vision .tile-title {
	margin-top: .6rem;
	font-family: "Playfair Display", serif;
	font-weight: 600;
}

/*  .tile-vision .tile-excerpt — summary/description style inside tiles.  */ 
.tile-vision .tile-excerpt {
	margin: .35rem 0 0;
	color: var(--dim);
	line-height: 1.5;
}

/* ========================================================================== 
 * 2) ECHO (Echoes archive grid / cards) -------------------------------------------------------------------------- 
 * The Echo archive and echo grids used on pages.
 *  ========================================================================== */

/*  .echo-grid — responsive card grid for Echo content (pages and archives), with enforced gaps.  */ 
.echo-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: 22px !important;
	align-items: start;
	margin-top: 16px;
}

/*  .card.echo-card .thumb img — Echo card thumbnails: 4:3 crop, radius, thin border.  */ 
.card.echo-card .thumb img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid rgba(32, 28, 23, .1);
}

/*  .card.echo-card .meta — card inner padding below the image.  */ 
.card.echo-card .meta {
	padding: 12px;
}


/* .card.echo-card h3 — spacing for the Echo card title.  */ 
.card.echo-card h3 {
	margin: 0 0 .35rem;
}

/*  .card.echo-card .excerpt — paragraph styling inside Echo cards.  */ 
.card.echo-card .excerpt {
	color: var(--dim);
	line-height: 1.6;
}







/* ========================================================================== 
 * 3) PHOTO NOTES — ARCHIVE (CPT archive at /photo-notes/) 
 * -------------------------------------------------------------------------- 
 * Aim: Match the Echo heading tone/size and site content width. “Rows” markup comes from template; thumbnails square-cropped ONLY here. 
 * ========================================================================== */
/* Container width & spacing for the PN archive page */

/*  .post-type-archive-photo_notes .site-main — constrain archive content to --wrap.  */ 
.post-type-archive-photo_notes .site-main {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Archive header: match Echo Essays style */
/*  .post-type-archive-photo_notes .entry-header — neutral header (no panel), spacing.  */ 
.post-type-archive-photo_notes .entry-header {
	text-align: left !important;
	background: transparent;
	padding: 0;
	margin: 0 0 1.25rem;
}

/*  .post-type-archive-photo_notes .entry-title, .entry-title.headline-bar — H1 scale/color for archive.  */ 
.post-type-archive-photo_notes .entry-title,
.post-type-archive-photo_notes .entry-title.headline-bar {
	color: var(--ink);
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 1.6vw + 1.6rem, 1.5rem);
	line-height: 1.2;
}

/*  .post-type-archive-photo_notes .entry-summary.measure — readable intro width coloring.  */ 
.post-type-archive-photo_notes .entry-summary.measure {
	max-width: 65ch;
	margin: .35rem 0 0;
	color: var(--dim);
}

/* Archive-only: square crop for the list/thumbs */
/*  .post-type-archive-photo_notes .note-row .thumb img — archive-only square thumbnails (1:1, cover, rounded).  */ 
.post-type-archive-photo_notes .note-row .thumb img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* ========================================================================== 
 * 4) PHOTO NOTES — SHORTCODE LIST (used on a regular Page) 
 * -------------------------------------------------------------------------- 
 * Shortcode: [photo_notes_list] Layout: One item per row, image LEFT (fixed column), text RIGHT (fluid). Natural image aspect ratio here (NOT square-cropped). 
 * ========================================================================== */
/* Outer container produced by the shortcode */

/*  .pn-notes-list — the wrapper printed by the shortcode; one row per post, capped to --wrap.  */ 
.pn-notes-list {
	max-width: var(--wrap);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	/* one post per row */
	gap: var(--g3);
}

/* Each post row (article) = two columns: image | text */
/*  .pn-notes-list > article — the two-column row (260px image, fluid text), border/radius/background.  */ 
.pn-notes-list>article {
	display: grid !important;
	grid-template-columns: 260px 1fr !important;
	/* adjust 240–340px as you like */
	gap: var(--g2) !important;
	align-items: start;
	border: var(--border);
	border-radius: var(--r);
	padding: var(--g2);
	background: rgba(255, 255, 255, .03);
}

/* Image column */
/*  .pn-notes-list > article > a.thumb — left image column box; radius/overflow.  */ 
.pn-notes-list>article>a.thumb {
	display: block;
	width: 100%;
	max-width: 260px;
	overflow: hidden;
	border-radius: 8px;
}

/*  .pn-notes-list > article > a.thumb img — natural aspect (not square): width 100%, object-fit:contain.  */ 
.pn-notes-list>article>a.thumb img {
	width: 100% !important;
	height: auto !important;
	/* natural aspect */
	aspect-ratio: auto !important;
	/* explicitly undo any square-crop */
	object-fit: contain !important;
	/* keep full photo in the box */
	display: block;
}

/* Text column */
/*  .pn-notes-list > article > .text — right column as a compact grid for title, summary, labels.  */ 
.pn-notes-list>article>.text {
	display: grid;
	gap: .5rem;
}

/* Post title (linked) */
/*    */ 
.pn-notes-list>article h3 {
	font: 600 clamp(1.25rem, 1.2vw + 1rem, 1.75rem) "Playfair Display", serif;
	margin: .15rem 0 .35rem;
}

/*  .pn-notes-list > article h3 (+ a, a:hover) — title typographic scale & link behaviors.  */ 
.pn-notes-list>article h3 a {
	color: inherit;
	text-decoration: none;
}

.pn-notes-list>article h3 a:hover {
	text-decoration: underline;
}

/* “Collections / Visual Elements” labels + chips */
/*  .pn-notes-list .labels h4 — “Collections / Visual Elements” label styling.  */ 
.pn-notes-list .labels h4 {
	/* Make the “Collections / Visual Elements” labels larger */
	font: 600 1.1rem "Istok Web", sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dim);
	margin: .6rem 0 .35rem;
}









.pn-notes-list .chips {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem .55rem;
}

/*  .pn-notes-list .chips, .pn-notes-list .chip — chip layout/look for the shortcode list.*/
.pn-notes-list .chip {
	background: var(--hi);
	color: var(--accent);
	border: var(--border);
	border-radius: 999px;
	padding: .32rem .7rem;
	font: .95rem "Istok Web", sans-serif;
	line-height: 1.15;
}

/* Mobile: stack image above text */
@media (max-width:900px) {
	.pn-notes-list>article {
		grid-template-columns: 1fr !important;
	}

	.pn-notes-list>article>a.thumb {
		max-width: none;
	}
}

/* ========================================================================== 
 * 5) PHOTO NOTES — SHARED ROW STRUCTURE (archive + shortcode) 
 * -------------------------------------------------------------------------- 
 * These help both layouts render a consistent “row card” look. The archive keeps square thumbs (scoped above); the shortcode keeps natural. 
 * ========================================================================== */
/*  .notes-list — optional wrapper to stack rows with gap. */ 
.notes-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--g3);
}

/* optional wrapper */
/*  .note-row — base row grid (220px image + text), border/radius/background.  */ 
.note-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	/* archive template may override; shortcode uses 260px */
	gap: var(--g2);
	border: var(--border);
	border-radius: var(--r);
	padding: var(--g2);
	background: rgba(255, 255, 255, .03);
}

/*  .note-row .thumb img — responsive image and rounded corners (aspect comes from context).  */ 
.note-row .thumb img {
	width: 100%;
	display: block;
	border-radius: 8px;
}

/* aspect rules come from context */
/*  .note-row h3 (+ link rules) — shared title styling.  */ 
.note-row h3 {
	font: 600 clamp(1.60rem, 1.0vw + 1rem, 1.6rem) "Playfair Display", serif;
	margin: .15rem 0 .35rem;
}

/* .note-row h3 (+ link rules) — shared title styling.   */ 
.note-row h3 a {
	color: inherit;
	text-decoration: none;
}

/*  .note-row h3 (+ link rules) — shared title styling.  */ 
.note-row h3 a:hover {
	text-decoration: underline;
}

/*  .note-row .labels h4 — shared label styling.  */ 
.note-row .labels h4 {
	font: 600 1.2rem "Istok Web", sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dim);
	margin: 1.5rem 0 .35rem;
}

/* Click layering: ensure chips are clickable even if themes add overlays */
/*  .note-row (position) / .thumb / .text / .chip (z-index) — ensures chips stay clickable even if themes add overlay links.  */ 
.note-row {
	position: relative;
}

/*  .note-row (position) / .thumb / .text / .chip (z-index) — ensures chips stay clickable even if themes add overlay links.  */ 
.note-row .thumb {
	position: relative;
	z-index: 1;
}

/*  .note-row (position) / .thumb / .text / .chip (z-index) — ensures chips stay clickable even if themes add overlay links.  */ 
.note-row .text {
	position: relative;
	z-index: 2;
	pointer-events: auto;
}

/*  .note-row (position) / .thumb / .text / .chip (z-index) — ensures chips stay clickable even if themes add overlay links.  */ 
.note-row .chip {
	position: relative;
	z-index: 3;
}

/* Responsive stack for small screens (both archive + shortcode) */
@media (max-width:800px) {
	.note-row {
		grid-template-columns: 1fr;
	}
}













/* =========================================================
   Single Photo Note — canonical layout
   Desktop: image (600px) | notes ; summary under notes ; content full width
   Mobile:  image → content → notes
   ========================================================= */

/* Title/header & outer wrap widths (match your site) */
.single-photo-note .section-header,
.single-photo-note .wrap{
  max-width: 1038px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Two-column grid */
.single-photo-note .pn-study{
  max-width: 1008px;
  width: 100%;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: 600px 1fr;   /* image | notes */
  column-gap: 24px;
  align-items: start;
}

/* LEFT: media spans image + summary area */
.single-photo-note .pn-study__media{
  grid-column: 1;
  grid-row: 1 / span 2;   /* sits beside notes and summary */
  min-width: 0;           /* prevent overflow on narrow viewports */
}

/* Lead image sizing */
.single-photo-note .pn-lead,
.single-photo-note .pn-lead img{
  display: block;
  width: 100%;
  max-width: 600px;       /* ties to left column width */
  height: auto;
}

/* RIGHT: notes box (row 1) */
.single-photo-note .pn-study__notes{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* RIGHT: summary under notes (row 2) */
.single-photo-note .pn-summary{
  grid-column: 2;
  grid-row: 2;
  max-width: 100%;
  margin: var(--g2) 0 var(--g3);
  color: var(--ink);
}

/* Article content: full-width under both columns (row 3) */
.single-photo-note .entry-content{
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: 1008px;
  width: 100%;
  margin-top: 1.25rem;
  color: var(--ink);
  line-height: 1.7;
}

/* Notes/related list visuals */
.single-photo-note .pn-sidebox{
  background: color-mix(in oklab, var(--bg) 95%, white 5%);
  border: var(--border);
  border-radius: var(--r);
  padding: var(--g2);
}

.single-photo-note .pn-meta-title{
  font: 600 .85rem "Istok Web", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8C8378;
  margin: .5rem 0 .4rem;
}

.single-photo-note .pn-related-list{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  display: grid;
  gap: .6rem;
}

.single-photo-note .pn-rel-link{
  display: flex;
  gap: .6rem;
  align-items: center;
  border: var(--border);
  border-radius: var(--r);
  padding: .5rem;
  background: var(--panel);
}

.single-photo-note .pn-rel-thumb img{
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.single-photo-note .pn-rel-title{
  font: 600 .95rem "Istok Web", sans-serif;
}

.single-photo-note .pn-rel-snippet{
  display: block;
  color: var(--dim);
  font: .85rem "Istok Web", sans-serif;
}

/* =========================
   Mobile stack (≤ 900px)
   ========================= */
@media (max-width: 900px){
  .single-photo-note .pn-study{
    grid-template-columns: 1fr;  /* one column */
    row-gap: 16px;
  }

  /* 1) media first */
  .single-photo-note .pn-study__media{
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
  }

  /* image can expand to container width */
  .single-photo-note .pn-lead,
  .single-photo-note .pn-lead img{
    max-width: 100%;
  }

  /* 2) article content next */
  .single-photo-note .entry-content{
    grid-column: 1;
    grid-row: 2;
  }

  /* 3) notes last */
  .single-photo-note .pn-study__notes{
    grid-column: 1;
    grid-row: 3;
  }

  /* summary stays with media (since it’s inside .pn-study__media) */
}

















/* =====================================================
 * Add ons below here
 * Anything below here is what needs to be organized. 
 * =====================================================*/ 




/* ===== Vision taxonomy: width + NGG containment ===== */
.taxonomy-vision .site-main,
.taxonomy-vision #content-wrap,
.taxonomy-vision #content {
	max-width: var(--wrap, 1200px);
	margin: 0 auto;
	padding: 0 var(--g3, 1.5rem);
}

/* Keep NGG galleries from bleeding full-bleed */
.taxonomy-vision .vision-gallery-wrap,
.taxonomy-vision .vision-gallery-wrap .ngg-galleryoverview,
.taxonomy-vision .vision-gallery-wrap .ngg-pro-masonry,
.taxonomy-vision .vision-gallery-wrap .ngg-albumoverview {
	max-width: 100%;
	margin: 0 auto;
}

/* ===== Vision taxonomy (children grid + header width) ===== */
/* Constrain width like Echo/Pages */
.taxonomy-vision .entry,
.taxonomy-vision .site-content {
	max-width: var(--wrap, 1200px);
	margin: 0 auto;
	padding: 0 var(--g3, 1.5rem);
}

/* Kill any theme sidebar visually if one slips in */
.taxonomy-vision #sidebar,
.taxonomy-vision .sidebar,
.taxonomy-vision .content-right-sidebar #sidebar {
	display: none !important;
}

.taxonomy-vision .content-area,
.taxonomy-vision .site-content {
	float: none !important;
	width: auto !important;
}



.tile-vision {
	position: relative;
	text-decoration: none;
	color: inherit;
}



.tile-vision .title-tag { 
	position: absolute; 
	left: 8px; 
	right: 8px;
	bottom: 8px; 
	text-align: center; /* center the text */

}

.tile-vision .title-tag span {
	  display: block;
    width: 100%;
	background: color-mix(in oklab, var(--hi) 78%, transparent);
	color: var(--ink);
	padding: .55rem .8rem;
	border-radius: 6px;
	border: var(--border, 1px solid rgba(32, 28, 23, .1));
	font: 600 1.5rem "Playfair Display", serif;
	letter-spacing: .02em;
	width: 100%;             /* full width of the tile */
    text-align: center;      /* center the text inside the band */
}








/* fallback: hide the theme page header only on Vision taxonomy */
.taxonomy-vision .page-header {
	display: none !important;
}






.title-tag {
	position: absolute;
	left: 8px;
	bottom: 8px;
}

.title-tag span {
	background: color-mix(in oklab, var(--hi) 92%, transparent);
	color: var(--ink);
	padding: .35rem .6rem;
	border-radius: 6px;
	border: 1px solid var(--line);
	font: 600 1rem "Playfair Display", serif;
	letter-spacing: .02em;
}

/* ===== Vision taxonomy: use the same content width & no sidebar ===== */
.taxonomy-vision #content-wrap,
.taxonomy-vision #primary.content-area,
.taxonomy-vision #content.site-content,
.taxonomy-vision .site-main {
	max-width: var(--wrap);
	/* same variable you use everywhere else */
	margin: 0 auto;
	padding: 0 var(--g3);
	float: none;
	/* belt + suspenders against sidebar layout */
	width: auto;
}

/* If the theme injects a right sidebar on archives, hide it on Vision pages */
.taxonomy-vision #right-sidebar,
.taxonomy-vision .sidebar-container {
	display: none !important;
}

/* Header (title + intro) matches other sections */
.taxonomy-vision .page-header {
	max-width: var(--wrap);
	margin: 0 auto var(--g3);
	padding: 0 var(--g3);
}

.taxonomy-vision .page-title {
	font: 700 clamp(2rem, 1.6vw + 1.6rem, 2.5rem) "Playfair Display", serif;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 .35rem;
}

.taxonomy-vision .archive-description {
	max-width: 65ch;
	color: var(--dim);
}



/* NGG gallery should not exceed the wrap and should center */
.taxonomy-vision .vision-gallery {
	max-width: var(--wrap);
	margin: 0 auto;
}

.taxonomy-vision .vision-gallery .ngg-pro-masonry,
.taxonomy-vision .vision-gallery .ngg-pro-masonry-wrapper {
	width: 100% !important;
	max-width: 100% !important;
}


/* Vision taxonomy pages: match site content width, no sidebar */
.taxonomy-vision #content-wrap,
.taxonomy-vision #primary.content-area,
.taxonomy-vision #content.site-content,
.taxonomy-vision .site-main {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--g3);
	float: none;
	width: auto;
}

.taxonomy-vision #right-sidebar,
.taxonomy-vision .sidebar-container {
	display: none !important;
}

/* Header under H1 (same pattern as other sections) */
.taxonomy-vision .page-header,
.taxonomy-vision .entry-header {
	margin: 0 0 var(--g3);
}

.taxonomy-vision .entry-title {
	font: 700 clamp(1.5rem, 1.6vw + 1.6rem, 2.5rem) "Playfair Display", serif;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 .35rem;
}

.taxonomy-vision .measure {
	max-width: 65ch;
	color: var(--dim);
}



/* NGG Masonry respects container */
.taxonomy-vision .vision-gallery,
.taxonomy-vision .wrap {
	max-width: var(--wrap);
	margin: 0 auto;
}

.taxonomy-vision .vision-gallery .ngg-pro-masonry,
.taxonomy-vision .vision-gallery .ngg-pro-masonry-wrapper {
	width: 100% !important;
	max-width: 100% !important;
}



/* ===== FINAL OVERRIDES FOR VISION PAGES (put at END of style.css) ===== */
/* 1) One centered column, same width as the rest of the site */
body.taxonomy-vision #content-wrap.container,
body.taxonomy-vision #primary.content-area,
body.taxonomy-vision #content.site-content,
body.taxonomy-vision main.site-main,
body.taxonomy-vision .wrap {
	max-width: var(--wrap, 1200px) !important;
	margin: 0 auto !important;
	padding-left: var(--g3, 1.5rem) !important;
	padding-right: var(--g3, 1.5rem) !important;
	width: 100% !important;
	float: none !important;
}

/* 2) Remove any sidebar the theme tries to render on taxonomy pages */
body.taxonomy-vision #right-sidebar,
body.taxonomy-vision .sidebar,
body.taxonomy-vision .sidebar-container,
body.taxonomy-vision .content-right-sidebar #right-sidebar {
	display: none !important;
}

body.taxonomy-vision .content-right-sidebar #content {
	width: 100% !important;
	float: none !important;
}

/* 3) Prevent the theme's extra archive header from duplicating your H1 */
body.taxonomy-vision .page-header {
	display: none !important;
}







/* 5) When the term is a gallery: keep NGG inside the same width */
body.taxonomy-vision .vision-gallery {
	max-width: var(--wrap, 1200px) !important;
	margin: 0 auto !important;
	padding: 0 var(--g3, 1.5rem) !important;
}

body.taxonomy-vision .vision-gallery .ngg-pro-masonry,
body.taxonomy-vision .vision-gallery .ngg-pro-masonry-wrapper {
	width: 100% !important;
	max-width: 100% !important;
}



/* Vision pages: use normal content width and no sidebar */
body.taxonomy-vision #content {
	width: 100% !important;
	float: none !important;
}

body.taxonomy-vision #right-sidebar,
body.taxonomy-vision .sidebar {
	display: none !important;
}

/* Make sure the .wrap on vision pages centers and constrains */
body.taxonomy-vision .wrap {
	max-width: var(--wrap, 1200px) !important;
	margin: 0 auto !important;
	padding: 0 var(--g3, 1.5rem) !important;
}





/* Keep NGG inside the same width when used */
body.taxonomy-vision .vision-gallery {
	max-width: var(--wrap, 1200px) !important;
	margin: 0 auto !important;
	padding: 0 var(--g3, 1.5rem) !important;
}

/* Taxonomy: Vision – kill sidebars & force normal width */
body.taxonomy-vision #right-sidebar,
body.taxonomy-vision .sidebar {
	display: none !important;
}

body.taxonomy-vision .wrap {
	max-width: var(--wrap, 1200px) !important;
	margin: 0 auto !important;
	padding: 0 var(--g3, 1.5rem) !important;
}



/* Keep NGG galleries within same width */
body.taxonomy-vision .vision-gallery {
	max-width: var(--wrap, 1200px) !important;
	margin: 0 auto !important;
	padding: 0 var(--g3, 1.5rem) !important;
}



/* Vision taxonomy = no sidebars, contained width, matching page header styles */
body.taxonomy-vision #right-sidebar,
body.taxonomy-vision .sidebar {
	display: none !important;
}

body.taxonomy-vision .site-main {
	max-width: var(--wrap, 1200px);
	margin: 0 auto;
	padding: 0 var(--g3, 1.5rem);
}

/* Header: use your existing header look (you already target .page-header .page-title) */
body.taxonomy-vision .page-header {
	margin: 0 0 var(--g3, 1.5rem);
}

body.taxonomy-vision .page-header .page-title {
	/* these selectors already exist in your CSS, but this ensures the right scale */
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: clamp(2rem, 1.6vw + 1.6rem, 2.5rem);
	line-height: 1.2;
	color: var(--ink);
}

body.taxonomy-vision .page-header .archive-description {
	max-width: 65ch;
	margin-top: .35rem;
	color: var(--dim);
}



/* Keep NGG gallery within the same content width */
body.taxonomy-vision .vision-gallery {
	max-width: var(--wrap, 1200px);
	margin: 0 auto;
}



/* --- Vision taxonomy: unify width, remove white header panel, fix title size --- */
.tax-vision .wrap {
	max-width: var(--wrap, 1200px);
	margin: 0 auto;
	padding: 0 var(--g3, 1.5rem);
}

/* The white bar is the theme's default .page-header "panel" style */
.tax-vision .page-header {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 1rem !important;
}

/* Match Echo/Essays heading scale & color */
.tax-vision .page-title {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: clamp(2rem, 1.2vw + 1.6rem, 2.5rem);
	line-height: 1.2;
	color: var(--ink, #201C17);
}

/* Intro paragraph under H1 */
.tax-vision .archive-description {
	max-width: 65ch;
	margin: .35rem 0 0;
	color: var(--dim, #5C554C);
}

/* Force the content column to be full width even if the body has "has-sidebar" */
.tax-vision #primary,
.tax-vision .content-area,
.tax-vision #content {
	float: none !important;
	width: 100% !important;
}

/* Hide any sidebar the theme might try to output */
.tax-vision .sidebar,
.tax-vision #sidebar {
	display: none !important;
}





/**** VISION TAXONOMY — FINAL LOCKDOWN ****/
/* 0) Set a tunable content width just for Vision pages 
:root {
	--vision-wrap: 1000px;
	/* adjust: 960–1100 usually looks like the other pages 
}*/

/* 1) Constrain the ENTIRE content column (header + grid) 
.tax-vision main.site-main,
.tax-vision #primary.site-main,
.tax-vision .wrap {
	max-width: var(--vision-wrap) !important;
	margin: 0 auto !important;
	padding-left: var(--g3, 1.5rem) !important;
	padding-right: var(--g3, 1.5rem) !important;
	box-sizing: border-box;
}*/ 




/*Width fix*/

/* Vision pages: container must never exceed the viewport */
.tax-vision main.site-main,
.tax-vision #primary.site-main,
.tax-vision .wrap,
.tax-vision .container.clr {
  max-width: min(100%, var(--wrap, 1200px));
  width: 100%;
  margin: 0 auto;
  padding-left: var(--g3, 1.5rem);
  padding-right: var(--g3, 1.5rem);
  box-sizing: border-box;
}

/* (Optional safety) If anything else wins, force at phone sizes */
@media (max-width: 640px) {
  .tax-vision main.site-main,
  .tax-vision #primary.site-main,
  .tax-vision .wrap,
  .tax-vision .container.clr {
    max-width: 100% !important;
  }
}





















/* 2) Kill the theme's panel look on the page header */
.tax-vision .page-header {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 1rem !important;
}

/* 3) Force the H1 to match your site headings (size + color) */
.tax-vision .page-header .page-title,
.tax-vision .page-title {
	font-family: "Playfair Display", serif !important;
	font-weight: 700 !important;
	font-size: clamp(2.1rem, 1.3vw + 1.6rem, 2.6rem) !important;
	line-height: 1.2 !important;
	color: var(--ink, #201C17) !important;
	margin: 0 0 .5rem !important;
}

/* 4) Intro under the H1 */
.tax-vision .archive-description {
	max-width: 65ch;
	margin: .35rem 0 0;
	color: var(--dim, #5C554C);
}

/* 5) Neutralize any sidebar layout the theme tries to keep */
.tax-vision #primary,
.tax-vision .content-area,
.tax-vision #content {
	float: none !important;
	width: 100% !important;
}

.tax-vision .sidebar,
.tax-vision #sidebar {
	display: none !important;
}






/* Hide Imagely's global page header on Vision taxonomy */
.tax-vision .page-header.centered-minimal-page-header {
	display: none !important;
}

/* ===== Match Vision taxonomy width to Echo essays ===== */
/* Theme sets narrower .container for archives — override it here */
.tax-vision .container.clr {
	max-width: 1080px !important;
	/* matches Echo page width */
	margin: 0 auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box;
}




/* Vision taxonomy: let the intro paragraph span the container */
.tax-vision .entry-summary.measure,
.tax-vision .archive-description.measure {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}











/* ================================
   Collections archive width fixes
   Targets: taxonomy-collections.php
   Goal: header = 1040, cards area = 1008
   ================================ */

/* 1) Constrain the page header (title + intro) */
body.tax-collections .section-header{
  max-width: 1040px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 2) Constrain the main content container on this archive */
body.tax-collections .wrap{
  max-width: 1040px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 3) Constrain the cards/list itself a bit tighter than the wrap */
body.tax-collections .notes-list{
  max-width: 1008px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* (Optional) If your theme adds inner padding that makes it feel wider,
   you can uncomment the next line to keep edges tidy. */
/* body.tax-collections .section-header,
   body.tax-collections .wrap,
   body.tax-collections .notes-list { padding-left: 0; padding-right: 0; } */




























/* ==============================================
   Visual Elements archive width fixes
   Targets: taxonomy-visual_elements.php
   Goal: header = 1040, cards = 1008
   ============================================== */

/* Header (title + intro) */
body.tax-visual_element .section-header,
body.tax-visual_elements .section-header{
  max-width: 1040px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Main wrap */
body.tax-visual_element .wrap,
body.tax-visual_elements .wrap{
  max-width: 1040px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Card list slightly tighter than wrap */
body.tax-visual_element .notes-list,
body.tax-visual_elements .notes-list{
  max-width: 1008px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Optional: if theme-side padding makes it feel wider, you can zero it out */
/*
body.tax-visual_element .section-header,
body.tax-visual_element .wrap,
body.tax-visual_element .notes-list,
body.tax-visual_elements .section-header,
body.tax-visual_elements .wrap,
body.tax-visual_elements .notes-list { padding-left: 0; padding-right: 0; }
*/




/* ============================================================
   GLOBAL: Remove default Imagely #content-wrap padding
   ============================================================ */
#content-wrap {
  padding-top: 12px !important;
  padding-bottom: 0 !important;
}



















/* =========================================================
   Unified label styling — applies to both archive + single
   ========================================================= */

/* “Collections / Visual Elements” labels */
.pn-notes-list .labels h4,
.single-photo-note .pn-meta-title {
	font: 600 1.1rem "Istok Web", sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dim);
	margin: .6rem 0 .35rem;
}










.single-photo-note .pn-main {
  position: relative;
  z-index: 2;            /* sits above the media column */
  min-width: 360px;      /* keep it from shrinking too narrow */
}

.single-photo-note .pn-sidebox{
  width: 100%;           /* ensure the inner box fills the sidebar column */
}

/* Chips and related links: ensure full click area without altering layout */
.single-photo-note .pn-sidebox a.chip{
  display: inline-block;     /* clickable pill */
}

.single-photo-note .pn-related-list .pn-rel-link{
  display: flex;             /* restore card width; prevents the shrink */
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-decoration: none;
}

/* Safety: remove any accidental overlay clicks from the image area */
.single-photo-note .pn-lead::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;      /* image overlay, if any, can’t eat clicks */
}

/* Related lists keep no bullets */
.single-photo-note .pn-related-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}









/* Single Photo Note: make sure sidebar links are on top and clickable */
.single-photo-note .pn-study { position: relative; }
.single-photo-note .pn-study__media { position: relative; z-index: 1; overflow: hidden; }
.single-photo-note .pn-study__notes { position: relative; z-index: 2; }
.single-photo-note .pn-sidebox a.chip { display: inline-block; text-decoration: none; pointer-events: auto; }






/* =========================================================
   Unified chip system — same look on ALL pages
   ========================================================= */

/* Tokens so you can tweak once, site-wide */
:root{
  --chip-fs: .95rem;
  --chip-py: .32rem;
  --chip-px: .70rem;
  --chip-gap-row: .45rem;
  --chip-gap-col: .55rem;
}

/* Containers */
.chips,
.pn-notes-list .chips,
.single-photo-note .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap-row) var(--chip-gap-col);
}

/* Chips (cover both class names you use anywhere) */
.chip,
.term-chip,
.pn-notes-list .chip,
.single-photo-note .chip {
  background: var(--hi);
  color: var(--accent);
  border: var(--border);
  border-radius: 999px;
  padding: var(--chip-py) var(--chip-px);
  font: var(--chip-fs) "Istok Web", sans-serif;
  line-height: 1.15;
  text-decoration: none;
  display: inline-block;
}

/* Hover (same everywhere) */
.chip:hover,
.term-chip:hover,
.pn-notes-list .chip:hover,
.single-photo-note .chip:hover {
  text-decoration: underline;
}





.page-id-15585  .wp-site-blocks,
.page-id-15585  .site-content,
.page-id-15585  .content-area {
    max-width: 100%;
    width: 100%;
}
.page-id-15585 .container {
    max-width: 100%;
    width: 100%;
}