/* ============================================================
   Alex Guerrero — local reproduction of current site
   Captures the existing design language so it can serve as a
   baseline for mockups. Tweak the tokens below to explore looks.
   ============================================================ */

/* Open Sans — the Wix pro-gallery default used on his live expand pages for
   artwork titles/descriptions (measured there: 15px/700 + 13px/400). Loaded
   from Google Fonts like Wix loads it; falls back to close system faces. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* The site's actual Wix typeface (ships in assets/fonts). Loading it so the
   whole site — including the prints page — renders in his real font, not a
   system fallback. */
@font-face{
  font-family:"Futura LT W01 Book";
  src:url("fonts/futura-lt-w01-book.woff2") format("woff2");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
/* His body-paragraph weight. On the live Wix site titles/nav are Futura LT
   Book while descriptive paragraphs are the lighter Futura LT Light. Both
   files are byte-identical to what Wix serves (full Latin + Spanish accents). */
@font-face{
  font-family:"Futura LT W01 Light";
  src:url("fonts/futura-lt-w01-light.woff2") format("woff2");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --nav-bg:        #6f6f6f;   /* gray header bar            */
  --nav-tab:       #9a9a9a;   /* inactive tab fill          */
  --nav-tab-active:#3c3c3c;   /* active/selected tab        */
  --page-light:    #cfcfcf;   /* one light gray for every page (Alex's request) */
  --page-gray:     var(--page-light);   /* all pages now use the light gray */
  --ink:           #1d1d1d;   /* dark text                  */
  --ink-soft:      #4a4a4a;
  --paper:         #ffffff;
  --maxw:          1100px;
  /* The real Wix font first, then graceful geometric fallbacks. */
  --font: "Futura LT W01 Book", "Century Gothic", "Futura", "Avenir Next",
          "Questrial", "Helvetica Neue", Arial, sans-serif;
  /* Body-paragraph font (his descriptive text). Same fallbacks. */
  --font-light: "Futura LT W01 Light", "Futura LT W01 Book", "Century Gothic",
          "Futura", "Avenir Next", "Questrial", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  font-weight:300;
  color:var(--ink);
  background:var(--page-gray);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ---------- top navigation (tab bar) ---------- */
.nav{
  background:transparent;   /* nav sits on the page color, like the live site (no separate bar) */
  padding:14px 16px;
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  gap:14px;
  justify-content:center;   /* his buttons are a centered cluster, not full-width */
}
/* Match his live nav: fixed 160x34 buttons, dark #333 Futura Book text on the
   #999 gray, square corners — slimmer than the old stretched tabs. */
.nav a, .nav .tab{
  position:relative;
  flex:0 0 160px;
  height:34px;               /* his buttons are 34px tall — keep them slim */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--nav-tab);
  color:#333;
  font-size:20px;
  letter-spacing:normal;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease;
}
.nav-inner{align-items:flex-start;}   /* don't stretch buttons to the tallest */
.nav a:hover{background:#868686;}
.nav a.active, .nav .tab.active{background:rgba(24,23,23,.52);color:#fff;}

/* work item has a dropdown */
.has-menu{position:relative;}
.has-menu .menu{
  display:none;
  position:absolute;
  left:0;right:auto;top:100%;
  min-width:100%;width:max-content;max-width:90vw;
  background:var(--nav-tab-active);
  z-index:30;
}
.has-menu:hover .menu,.has-menu.open .menu{display:block;}   /* .open = tap toggle (touch has no hover) */
.has-menu .menu a{
  display:block;flex:none;text-align:left;white-space:nowrap;
  height:auto;                    /* not the slim 34px nav-button height */
  background:transparent;color:#efefef;font-size:1.05rem;
  padding:12px 18px;border-top:1px solid #555;
  justify-content:flex-start;     /* left-align dropdown labels */
}
.has-menu .menu a:hover{background:#555;color:#fff;}

/* ---------- page shells ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:48px 24px 80px;}
.page-light{background:var(--page-light);min-height:100vh;}
.page-gray{background:var(--page-gray);min-height:100vh;}

h1.title{
  font-weight:300;
  font-size:3.4rem;
  letter-spacing:.01em;
  margin:0 0 6px;
}
h1.title.center{text-align:center;}
.subtitle{font-size:1.5rem;color:#e9e9e9;margin:0 0 28px;}
.eyebrow{letter-spacing:.35em;font-size:.8rem;color:#bdbdbd;text-transform:uppercase;margin:0 0 4px;}
.muted{color:#e9e9e9;}

/* dot separator used in original headings: posters • afiches */
.dot{opacity:.6;padding:0 .35em;}

/* ---------- home hero ---------- */
/* the title block shares the photo's centered 790px column so "alex guerrero /
   visual artist" is left-aligned to the left edge of the cover photo below it */
.hero-head{padding:28px 0 22px;max-width:790px;margin:0 auto;}
.hero-head h1{font-size:3rem;font-weight:300;margin:0;color:#fff;}
.hero-head .subtitle{margin:2px 0 0;}
.hero-img{width:100%;display:block;}
.hero-img img{width:100%;height:auto;object-fit:cover;}

/* ---------- work grid (categories) ---------- */
/* the tile band sits a tad darker than the page — a subtle separator, like the
   band on his original site */
.cat-section{background:#c3c3c3;}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:34px;
  margin-top:36px;
}
.cat{display:block;}
.cat .thumb{aspect-ratio:1/1;overflow:hidden;background:#5d5d5d;}
.cat .thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease,filter .35s ease;filter:grayscale(.1);}
.cat:hover .thumb img{transform:scale(1.04);}
/* tile labels match the live site exactly: 15px Futura Book, weight 400
   (both the English name and the Spanish name below it) */
.cat h3{font-weight:400;font-size:15px;color:#f2f2f2;margin:14px 0 0;}
.cat .es{color:#c7c7c7;font-size:15px;font-weight:400;}
.cat.soon .thumb{position:relative;}
.cat.soon .thumb::after{
  content:"COMING SOON";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;letter-spacing:.12em;font-size:1.1rem;background:rgba(0,0,0,.35);
}

/* ---------- statement / text page ---------- */
/* Body/descriptive text renders in Futura LT Light to match his live pages
   (titles/nav stay Book). */
/* Centered like his live statement page (his content panel is centered, not
   left-aligned), ~720px measure. */
.statement{max-width:720px;margin:0 auto;font-family:var(--font);}
/* Match his live statement page exactly: 18px Futura LT Book (his body is the
   thicker Book weight, not Light), line-height normal (tight leading, NOT the
   old 1.7), near-black #181717. */
.statement p{font-size:18px;line-height:normal;color:#181717;}
.statement .lead{font-weight:600;}
.statement .divider{color:#888;margin:30px 0;letter-spacing:.3em;}

/* ---------- masonry gallery ---------- */
/* the heading centers to the full page width */
.gallery-head{position:relative;display:flex;justify-content:center;align-items:flex-start;}
/* left-aligned gallery title (Prague), lined up with the gallery column's left
   edge — matches his live poster sub-galleries */
.gallery-head.gh-left{justify-content:flex-start;max-width:892px;margin:0 auto;}
.gallery-head.gh-left .prints-title{text-align:left;}
/* gallery pages (printmaking, pinhole, poster sub-galleries): two larger
   columns with natural proportions, to match the live site's big-image
   masonry rather than three narrow columns */
.masonry{
  columns:2 420px;
  column-gap:18px;
  margin-top:30px;
}
.masonry figure{margin:0 0 18px;break-inside:avoid;background:#c2c2c2;}
.masonry img{width:100%;height:auto;cursor:zoom-in;transition:opacity .2s;}
.masonry img:hover{opacity:.92;}

/* justified-rows gallery — replicates Alex's live Wix collage pixel-for-pixel
   at its 892px frame, then scales down proportionally. renderGalleryRows()
   sets each figure's flex + aspect-ratio from the measured px in GALLERY_ROWS.
   892px frame, 10px gutter. object-fit:cover matches Wix's fill-crop and keeps
   both images in a two-up row exactly the same height. */
.jgal{display:flex;flex-direction:column;gap:10px;margin:30px auto 0;max-width:892px;}
.jrow{display:flex;gap:10px;align-items:flex-start;justify-content:flex-start;}
.jrow figure{min-width:0;margin:0;background:#c2c2c2;overflow:hidden;}
.jrow figure img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:opacity .2s;}
.jrow figure img:hover{opacity:.92;}

/* full-width lead photo on the "other projects" page */
.varios-feature{margin:30px 0 0;}
.varios-feature img{width:100%;height:auto;display:block;}

/* "other projects" tiles — Alex's 3-across layout, each image at its own
   natural size. A multi-column flow so every image sits a uniform gap below
   the one above it in its column (staggered), with the same gap left/right. */
.varios-grid{
  columns:3;
  column-gap:18px;
  margin-top:18px;
}
.varios-grid figure{margin:0 0 18px;break-inside:avoid;background:#c2c2c2;}
.varios-grid img{
  width:100%;height:auto;
  display:block;cursor:zoom-in;transition:opacity .2s;
}
.varios-grid img:hover{opacity:.92;}
@media(max-width:780px){.varios-grid{columns:2;}}
@media(max-width:480px){.varios-grid{columns:1;}}

/* sub-gallery launcher cards (posters -> SD/Prague/NYC) */
.subgal{
  /* line the poster row up with the 900px statement paragraph above: first
     poster flush-left, last flush-right, middle distributed between — like his
     live site. Columns size to each poster's natural width. */
  display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;
  gap:30px;margin:40px auto 0;max-width:900px;
}
/* Match his live posters landing page: small portrait posters shown at a
   fixed 245px height with natural width (NOT a big 2:3 box), no backing box —
   just the poster on the page color, like his. */
.subgal .card .thumb{height:245px;overflow:visible;background:transparent;display:flex;align-items:center;justify-content:flex-start;}
.subgal .card .thumb img{width:auto;height:100%;max-width:100%;object-fit:contain;}
.subgal .card h3{font-family:var(--font-light);font-weight:400;font-size:16px;color:#f2f2f2;margin:14px 0 10px;}
.subgal .card .gobtn{
  display:inline-flex;width:72px;height:72px;border-radius:50%;
  background:#5b5b5b;color:#fff;align-items:center;justify-content:center;font-size:1rem;
}
.subgal .card .gobtn:hover{background:#4a4a4a;}

/* ---------- contact ---------- */
.contact-info p{font-size:1.2rem;line-height:1.6;margin:6px 0;}
.socials{display:flex;gap:14px;margin:18px 0 30px;}
.socials a{width:40px;height:40px;border-radius:50%;background:#222;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1rem;}
.form-box{background:#bdbdbd;padding:28px;max-width:920px;}
.form-box h3{font-weight:300;color:#444;margin:0 0 18px;font-size:1.3rem;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid input,.form-grid textarea{
  width:100%;padding:14px;border:1px solid #8a8a8a;background:#f4f4f4;
  font-family:var(--font);font-size:1rem;}
.form-grid .left{display:flex;flex-direction:column;gap:14px;}
.form-grid textarea{min-height:180px;resize:vertical;}
.submit{margin-top:18px;background:#111;color:#fff;border:0;padding:12px 28px;
  font-family:var(--font);font-size:1rem;cursor:pointer;}

/* cv */
.cv-wrap{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
.pdf-link{display:flex;flex-direction:column;align-items:center;gap:12px;color:#eee;}
.pdf-badge{width:120px;height:140px;background:#e8453c;border-radius:8px;color:#fff;
  display:flex;align-items:flex-start;justify-content:center;padding-top:16px;font-weight:700;letter-spacing:.1em;}

/* ---- CV — two panels (Alex Guerrero + Dominican York Proyecto Gráfica) ---- */
/* each panel links straight to its PDF */
.cv-choose{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;}
.cv-panel{position:relative;min-height:62vh;display:flex;flex-direction:column;
  justify-content:flex-end;background-size:cover;background-position:center;overflow:hidden;}

/* photo panel (Alex): image shows in normal coloring by default (only a light
   gradient at the bottom so the name + link stay legible), and darkens very
   slightly on hover */
.cv-panel:not(.logo)::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,20,0),rgba(20,20,20,.5));
  transition:background .25s ease;}
.cv-panel:not(.logo):hover::before{background:linear-gradient(180deg,rgba(20,20,20,.12),rgba(20,20,20,.62));}

.cv-panel-inner{position:relative;z-index:1;padding:30px;color:#fff;width:100%;}
.cv-panel-kicker{letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;color:#d6d6d6;margin:0 0 8px;}
.cv-panel h2{font-weight:300;font-size:2rem;line-height:1.1;margin:0 0 6px;color:#fff;}
.cv-panel-sub{color:#d6d6d6;font-size:1rem;margin:0 0 16px;}
.cv-panel-sub .es{color:#aeaeae;font-style:italic;}
.cv-panel-go{display:inline-block;font-size:.95rem;letter-spacing:.05em;
  border-bottom:1px solid currentColor;padding-bottom:2px;}

/* logo panel (DYPG): light ground showing their mark + name lettering */
.cv-panel.logo{background:#ededed;text-align:center;}
.cv-logo-stack{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:48px 30px 8px;}
.cv-logo-mark{width:130px;height:auto;}
.cv-logo-letter{width:min(80%,340px);height:auto;}
.cv-panel.logo .cv-panel-inner{color:#1d1d1d;}
.cv-panel.logo .cv-panel-kicker{color:#888;}
.cv-panel.logo .cv-panel-sub{color:#555;}
.cv-panel.logo .cv-panel-sub .es{color:#888;}
.cv-panel.logo .cv-panel-go{color:#1d1d1d;}
.cv-panel.logo{transition:background .2s ease;}
.cv-panel.logo:hover{background:#e3e3e3;}

@media(max-width:680px){
  .cv-choose{grid-template-columns:1fr;}
  .cv-panel{min-height:46vh;}
}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100;}
.lb.open{display:flex;}
.lb img{max-width:92vw;max-height:92vh;cursor:zoom-out;}

/* footer shares the tile band's slightly darker gray so the band runs to the
   bottom edge without a lighter sliver under it */
footer.site{background:#c3c3c3;color:#6a6a6a;text-align:center;padding:26px;font-size:.85rem;}

@media(max-width:680px){
  /* content-sized buttons land the 6 labels on two tidy rows (the old
     flex:1 1 40% basis forced 2-per-row × 3 rows of nav before any content) */
  .nav{padding:12px 10px;}
  .nav-inner{flex-wrap:wrap;gap:6px;}
  /* reversed tabs on phones (James: grey-on-grey was unreadable even after
     an ink-label pass): dark buttons with white labels (11:1) at rest,
     flipping to white with ink labels (~17:1) when pressed (:active), while
     the work menu is open (.open), and on the current page (.active — the
     light tab marks "you are here"). The dropdown items (.menu a, #efefef
     on dark) outrank the base rule and keep their colors. */
  .nav a,.nav .tab{flex:0 1 auto;height:30px;padding:0 11px;font-size:1rem;background:var(--nav-tab-active);color:#fff;}
  .nav a:active,.nav .tab:active,.nav .tab.open,
  .nav a.active,.nav .tab.active{background:#fff;color:var(--ink);}
  h1.title{font-size:2.3rem;}
  .masonry{columns:1;}
}

/* ============================================================
   Prints for sale (new addition — reuses existing tokens only)
   ============================================================ */

/* centered page title (prints / cv), matching the live gallery exactly:
   40px Futura, weight 400, with a smaller 25px dot at full opacity (no padding) */
.title.prints-title{font-size:2.7rem;font-weight:400;text-align:center;flex:1;margin-bottom:18px;}
.prints-title .dot{font-size:.625em;opacity:1;padding:0;}

/* home grid: the "prints for sale" tile label matches the other tiles
   (Alex asked not to capitalize it) */
/* match the live site: cover photo sits inside the centered column
   (not full-bleed across the window) */
/* the revised cover is taller (shows the full poster on the table), so it is
   shown at a narrower centered width to keep the same on-page height as before.
   The 18px bottom margin leaves a sliver of page color between the photo and
   the darker tile band, like his live home page (photo bottom 861, band 878). */
.hero-img{max-width:790px;margin:0 auto 18px;padding:0;}
/* five landscape category thumbnails filling the column in one row */
.cat-grid{grid-template-columns:repeat(5,1fr);}
.cat .thumb{aspect-ratio:3/2;}
/* prints-for-sale tile rotates through prints — fill the whole frame, cropping
   if needed (Alex's request: no letterbox borders even if the print is cropped) */
.cat-buy .thumb{background:#5d5d5d;}
/* favor the lower-middle of each rotating print so portrait pieces (e.g. the
   "Tu afro" face) keep their subject in frame instead of cropping the chin */
.cat-buy .thumb img{object-fit:cover;object-position:center 60%;transition:filter .35s ease,opacity .6s ease;}
.cat-buy:hover .thumb img{transform:none;}
/* trim the empty space between the category tiles and the footer, and let the
   tile row run a little wider than the content column so the images read larger.
   The darker band starts just 14px above the tile images — measured on his live
   home page (band top 878, images 892) — not the .wrap's default 48px. */
.cat-section .wrap{max-width:1240px;padding-top:14px;padding-bottom:28px;}
.cat-section .cat-grid{margin-top:0;}

/* ---- featured portfolio (centerpiece at top of the page) ---- */
.prints-feature{margin:26px 0 8px;}
.feature-card{margin:0;display:block;}
/* Alex: reduce the portfolio centerpiece to the same width as one of the
   individual prints of the same set in the row below it (a .prints-grid.centered
   card = calc((100% - 68px)/3)) — centered. Caption also constrained to match. */
.feature-img{display:block;margin:0 auto 22px;width:calc((100% - 68px) / 3);}
.feature-img img{width:100%;height:auto;cursor:zoom-in;display:block;}
.feature-info{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto;}
.feature-info .inquiry-add{align-self:center;}
/* caption above the featured portfolio — same typeface/size as the other
   captions, not the old letter-spaced all-caps eyebrow (Alex's request) */
.feature-eyebrow{
  font-size:1.1rem;color:#c7c7c7;margin:0 0 10px;
}
.feature-title{
  font-weight:300;font-size:2.6rem;color:#f2f2f2;margin:0 0 10px;letter-spacing:.01em;
}
.feature-info .print-meta{font-size:1.1rem;margin:0 0 6px;}
.feature-info .print-price{font-size:1.3rem;margin:0 0 10px;}
.feature-info .series-note{margin:0 0 16px;}

/* per-series section + heading */
.prints-section{margin-top:48px;}
.prints-section h2{
  font-weight:300;font-size:2rem;color:#f2f2f2;
  margin:0 0 4px;letter-spacing:.01em;
}
.prints-section .series-note{color:#c7c7c7;font-size:1rem;margin:0 0 14px;}

/* grid of print cards (mirrors .cat-grid sizing) */
.prints-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:34px;
  margin-top:18px;
}
.print-card{margin:0;display:flex;flex-direction:column;}
/* just the image — natural size, no background bars or margins */
.print-card img{
  width:100%;height:auto;display:block;cursor:zoom-in;
  transition:opacity .2s;
}
.print-card img:hover{opacity:.92;}
.print-body{margin-top:12px;display:flex;flex-direction:column;flex:1;}
/* push the button to the bottom so buttons align across a row */
.print-card .inquiry-add{margin-top:auto;}
/* always keep a gap between the price/availability line and the button */
.print-card .print-price{margin-bottom:14px;}

/* series that scale by physical size: smaller prints shrink + center in their cell */
.prints-grid.scaled .print-card{align-items:center;text-align:center;}
.prints-grid.scaled .print-card img{margin-left:auto;margin-right:auto;}
.prints-grid.scaled .print-card .inquiry-add{align-self:center;}
/* on scaled rows let the button hug the content instead of dropping to the bottom */
.prints-grid.scaled .print-card .inquiry-add{margin-top:0;}
.prints-grid.scaled .print-card .print-body{flex:0 0 auto;}

/* center an incomplete last row instead of left-justifying the orphans */
.prints-grid.centered{display:flex;flex-wrap:wrap;justify-content:center;}
.prints-grid.centered .print-card{flex:0 1 calc((100% - 68px) / 3);}

/* series with a fixed column count (manifest `cols`, set as data-cols by
   renderPrints). NOTE: the phone override lives in the @media block at the
   very END of this file and beats this rule by SOURCE ORDER only (equal
   specificity) — don't add [data-cols] rules below that block. Only cols:2
   exists today; a future cols:3 needs its own rule here. */
.prints-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr);}

/* same-size pieces (all 12x18, identical scan dimensions) shown at their natural
   size — no cropping — so Alex's even paper margins are preserved exactly */
.prints-grid.uniform .print-card img{width:100%;height:auto;}

/* bold title in Alex's own capitalization (not forced uppercase), same site font */
/* print titles match the other captions (same typeface/weight/size) per
   Alex's request — no longer the bold, larger treatment */
.print-title{
  font-family:var(--font);
  font-weight:400;letter-spacing:.01em;
  font-size:1rem;color:#f2f2f2;margin:0 0 4px;
}
.print-meta{color:#d6d6d6;font-size:1rem;margin:0 0 4px;line-height:1.4;}
/* Spanish translation lines (muted + italic) */
.print-meta.es,.series-note.es{color:#bdbdbd;font-style:italic;}
.feature-info .print-meta.es{margin-top:-2px;}
.series-note.es{margin-top:2px;}
.print-price{color:#fff;font-size:1.1rem;font-weight:600;margin:0;}
.print-note{
  display:inline-block;color:#1d1d1d;background:#cfcfcf;
  font-weight:600;font-size:.78rem;letter-spacing:.04em;
  padding:1px 8px;margin-left:6px;border-radius:2px;vertical-align:middle;
}

/* add-to-inquiry button */
.inquiry-add{
  margin-top:12px;align-self:flex-start;
  font-family:var(--font);font-size:.95rem;
  background:#111;color:#fff;border:0;padding:9px 18px;cursor:pointer;
  transition:background .15s ease;
}
.inquiry-add:hover{background:#333;}
.inquiry-add.added{background:#5b5b5b;}

/* ---- print popup viewer (image on white + bilingual description) ---- */
.print-lb{
  position:fixed;inset:0;z-index:120;display:none;
  background:var(--page-light);   /* Alex's light gray, not white */
  align-items:center;justify-content:center;
  padding:0 70px;
}
.print-lb.open{display:flex;}
.print-lb .plb-stage{
  flex:1;height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 24px;min-width:0;
}
.print-lb .plb-img{
  max-width:100%;max-height:88vh;width:auto;height:auto;
  cursor:zoom-out;transition:opacity .3s ease;
}
.print-lb .plb-info{
  flex:none;width:330px;max-width:38vw;color:#1d1d1d;
  display:flex;flex-direction:column;align-items:flex-start;padding:24px 10px;
}
.print-lb .plb-count{letter-spacing:.14em;font-size:.8rem;color:#888;margin:0 0 14px;}
.print-lb .plb-title{color:#1d1d1d;margin:0 0 10px;font-size:1.3rem;}
.print-lb .plb-meta-en{font-size:1.05rem;line-height:1.5;color:#1d1d1d;margin:0 0 4px;}
.print-lb .plb-price{color:#1d1d1d;font-size:1.2rem;margin:0 0 14px;}
.print-lb .plb-price .print-note{background:#1d1d1d;color:#fff;}
.print-lb .plb-divider{color:#bbb;margin:18px 0;letter-spacing:.3em;}
.print-lb .plb-meta-es{font-size:1.05rem;line-height:1.5;color:#555;margin:0;}
.print-lb .plb-add{margin-top:0;margin-bottom:6px;}
.print-lb .plb-close{
  position:fixed;top:18px;right:22px;z-index:2;
  width:46px;height:46px;border:0;background:transparent;color:#1d1d1d;
  font-size:2.2rem;line-height:1;cursor:pointer;
}
.print-lb .plb-close:hover{color:#888;}
.print-lb .plb-nav{
  position:fixed;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;border:1px solid #ccc;
  background:#fff;color:#1d1d1d;font-size:1.7rem;line-height:1;cursor:pointer;
}
.print-lb .plb-nav.prev{left:14px;}
.print-lb .plb-nav.next{right:14px;}
.print-lb .plb-nav:hover{background:#f0f0f0;}

/* ---- gallery expand view (reuses .print-lb; bilingual description) ---- */
/* Typography matches his live expand pages exactly (measured there): white
   page, Open Sans info column ~290px wide, title 15px/700/21px, description
   13px/400/1.4, both near-black #181717. The em-dash line inside the pre-line
   description separates the English block from the Spanish one. */
.gallery-lb{background:#fff;}
.gallery-lb .plb-info{
  width:290px;max-width:34vw;
  font-family:"Open Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-weight:400;   /* Open Sans regular, not the body's 300 */
}
.gallery-lb .plb-title{
  font-family:inherit;font-size:15px;font-weight:700;line-height:21px;
  color:#181717;margin:0 0 18px;
}
.gallery-lb .gx-desc{
  white-space:pre-line;                /* keep Alex's line breaks + em-dash line */
  font-size:13px;line-height:1.4;color:#181717;margin:0;
}
/* full-page toggle — diagonal arrows top-left, like his live expand pages */
.gallery-lb .gx-full{
  position:fixed;top:20px;left:22px;z-index:2;
  width:42px;height:42px;padding:9px;border:0;background:transparent;
  color:#1d1d1d;cursor:pointer;
}
.gallery-lb .gx-full svg{width:100%;height:100%;}
.gallery-lb .gx-full:hover{color:#888;}
.gallery-lb .plb-img{cursor:zoom-in;}
/* full-page mode: the image alone on the white page */
.gallery-lb.full .plb-info,
.gallery-lb.full .plb-nav{display:none;}
.gallery-lb.full .plb-stage{padding:0;}
.gallery-lb.full .plb-img{max-height:100vh;cursor:zoom-out;}

/* floating inquiry bar */
.inquiry-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--nav-tab-active);color:#fff;
  transform:translateY(110%);transition:transform .25s ease;
  box-shadow:0 -2px 12px rgba(0,0,0,.25);
}
.inquiry-bar.show{transform:translateY(0);}
.inquiry-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;
}
.inquiry-count{font-size:1.05rem;}
.inquiry-actions{display:flex;gap:12px;align-items:center;}
.inquiry-view{
  font-family:var(--font);font-size:.95rem;
  background:transparent;color:#fff;border:1px solid #888;padding:9px 16px;cursor:pointer;
}
.inquiry-view:hover{background:#555;}
.inquiry-send{
  font-size:.95rem;background:#fff;color:#1d1d1d;padding:10px 20px;font-weight:600;
}
.inquiry-send:hover{background:#e6e6e6;}
.inquiry-list{
  list-style:none;padding:12px 24px 8px;
  max-width:var(--maxw);margin:0 auto;
  max-height:42vh;overflow:auto;
}
.inquiry-list li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 0;border-top:1px solid #555;font-size:.95rem;color:#e9e9e9;
}
.inquiry-remove{
  flex:none;font-family:var(--font);font-size:.85rem;
  background:transparent;color:#cfcfcf;border:1px solid #777;padding:5px 12px;cursor:pointer;
}
.inquiry-remove:hover{background:#555;color:#fff;}

@media(max-width:680px){
  .prints-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .inquiry-inner{flex-direction:column;align-items:stretch;text-align:center;}
  .inquiry-actions{justify-content:center;}
  .subgal{grid-template-columns:1fr;justify-items:center;}
  .feature-img img{max-height:50vh;}
  .print-lb{flex-direction:column;padding:54px 14px 24px;overflow:auto;}
  .print-lb .plb-stage{height:auto;padding:10px 0;}
  .print-lb .plb-img{max-height:54vh;}
  .print-lb .plb-info{width:100%;max-width:none;padding:14px 6px 30px;}
  .print-lb .plb-nav{top:auto;bottom:14px;transform:none;}
}

/* ============================================================
   Floating contact button — drawn in Alex's black-and-white
   relief / linocut style instead of a generic chat bubble.
   ============================================================ */
.chat-fab{
  position:fixed;right:24px;bottom:24px;z-index:95;
  width:62px;height:62px;border-radius:50%;
  background:#111;border:2px solid #f2f2f2;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease, background .18s ease, bottom .25s ease;
}
.chat-fab:hover{transform:translateY(-3px) rotate(-3deg);background:#000;}
.chat-fab svg{width:34px;height:34px;display:block;}
body.inquiry-open .chat-fab{bottom:92px;}

.chat-pop{
  position:fixed;right:24px;bottom:98px;z-index:95;
  width:300px;max-width:calc(100vw - 48px);
  background:#1d1d1d;color:#f2f2f2;
  border:2px solid #f2f2f2;
  padding:16px 18px 16px;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  font-family:var(--font);
}
body.inquiry-open .chat-pop{bottom:166px;}
/* chat-style header (mirrors his live chat: name + status) */
.chat-pop-head{display:flex;gap:10px;align-items:flex-start;
  border-bottom:1px solid #444;padding-bottom:12px;margin-bottom:12px;}
.chat-status{width:9px;height:9px;border-radius:50%;background:#5ac85a;margin-top:6px;flex:none;}
.chat-pop-name{font-weight:700;margin:0;font-size:1rem;}
.chat-pop-status{margin:2px 0 0;font-size:.8rem;color:#9a9a9a;}
.chat-pop-msg{margin-bottom:12px;}
.chat-pop-text{font-size:.92rem;line-height:1.5;color:#cfcfcf;margin:0 0 8px;}
.chat-pop-text.es{color:#9a9a9a;font-style:italic;margin:0;}
.chat-pop-form{display:flex;gap:8px;border-top:1px solid #444;padding-top:12px;}
.chat-pop-form input{
  flex:1;min-width:0;background:#2b2b2b;border:1px solid #555;color:#f2f2f2;
  padding:9px 10px;font-family:var(--font);font-size:.9rem;
}
.chat-pop-form input::placeholder{color:#9a9a9a;}
.chat-pop-form button{
  flex:none;background:#f2f2f2;color:#111;border:0;padding:9px 14px;
  font-family:var(--font);font-weight:600;cursor:pointer;
}
.chat-pop-form button:hover{background:#fff;}

/* ============================================================
   Light-gray background rollout (Alex's request: one lighter
   gray on every page). The pages that used to sit on dark gray
   had white/near-white text — recolor that text to dark ink so
   it stays legible on the light ground. Text that lives on a
   genuinely dark element (nav tabs, the home tile band, the
   inquiry bar, the CV photo panel, the footer, dark buttons,
   circles) is left untouched.
   ============================================================ */

/* home hero wordmark + generic page titles/paragraphs */
.hero-head h1{color:var(--ink);}
.subtitle{color:#4a4a4a;}
.muted{color:var(--ink);}
.eyebrow{color:#6a6a6a;}

/* home category tiles — labels now sit on the light band */
.cat h3{color:var(--ink);}
.cat .es{color:#4a4a4a;}
/* lighten the thumbnail placeholder so no dark edge peeks past the photo */
.cat .thumb,.cat-buy .thumb{background:#c2c2c2;}
/* posters landing tiles sit directly on the page (no backing box), like his */
.subgal .card .thumb{background:transparent;}

/* posters sub-gallery launcher cards — small caption like his (~16px Futura Light) */
.subgal .card h3{color:var(--ink);}

/* prints for sale — feature + per-series cards */
.feature-eyebrow{color:#4a4a4a;}
.feature-title{color:var(--ink);}
.prints-section h2{color:var(--ink);}
.prints-section .series-note{color:#4a4a4a;}
.print-title{color:var(--ink);}
.print-meta{color:#4a4a4a;}
.print-meta.es,.series-note.es{color:#6a6a6a;}
.print-price{color:var(--ink);}
/* keep the availability pill readable: dark pill, light text, on the light page */
.print-note{background:#1d1d1d;color:#f2f2f2;}

/* ============================================================
   Community outreach page
   ============================================================ */

.community-statement{max-width:none;margin:8px 0 32px;}

.community-list{
  list-style:none;
  margin:10px 0 28px;
  padding:0;
  font-size:1.15rem;
  line-height:1.7;
  color:var(--ink);
}
.community-list-heading{
  font-weight:600;
  margin-bottom:2px;
}

/* 2×2 event photo grid */
.community-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.community-photos figure{
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
}
.community-photos figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* portrait row: flyer · video · shirt */
.community-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
}
.community-row figure{
  margin:0;
  aspect-ratio:7/10;
  overflow:hidden;
}
.community-row figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.community-row video{
  aspect-ratio:7/10;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* responsive: single column below 780px */
@media(max-width:780px){
  .community-photos,
  .community-row{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   Phones (≤680px) — KEEP THIS BLOCK AT THE END OF THE FILE.
   Several rules here beat equal-specificity desktop rules by
   source order alone ([data-cols], .feature-title, .prints-grid):
   any desktop rule appended below this block can silently break
   phones. Add new desktop rules ABOVE it.

   Background: the prints/gallery layouts are built from measured
   desktop widths — calc((100% - 68px)/3) cells, cols:2 grids,
   892px justified Wix rows. Scaled straight down to a ~342px
   phone column those render artwork at 91–160px. On phones every
   piece goes one per row at full column width instead. Prints
   keep their proportional sizing (a 12×18 still reads smaller
   than a 22×30 — the inline max-width from site.js still applies
   inside the full-width cell).
   ============================================================ */
@media(max-width:680px){
  /* prints for sale: one print per row, full column width */
  .feature-img{width:100%;}                            /* was (100%-68px)/3 ≈ 91px  */
  .prints-grid{grid-template-columns:1fr;}             /* minmax(150px,1fr) fit TWO */
  .prints-grid.centered .print-card{flex:0 1 100%;}    /* flex row — grid rule inert */
  .prints-grid[data-cols]{grid-template-columns:1fr;}  /* cols:2 series unstack     */

  /* home hero: below the photo's 790px column the image ran edge-to-edge and
     the wordmark sat flush against the screen edge. Give both the site's 14px
     content margins so the name stays aligned to the photo's left edge (the
     desktop relationship), and scale the wordmark to the phone column. */
  .hero-head{padding:20px 14px 14px;}
  .hero-head h1{font-size:2rem;}
  .hero-head .subtitle{font-size:1.1rem;}
  .hero-img{padding:0 14px;margin-bottom:14px;}

  /* tighter header stack, wider content column */
  .wrap{padding:28px 14px 56px;}
  .title.prints-title{font-size:1.7rem;margin-bottom:12px;}
  .prints-section{margin-top:34px;}
  .prints-section h2{font-size:1.5rem;}
  .feature-title{font-size:1.6rem;}
  .statement p{font-size:16px;}
  .prints-feature{margin:16px 0 8px;}

  /* galleries: measured Wix rows collapse to one image per row. !important
     is needed to beat the per-figure inline flex from renderGalleryRows();
     aspect-ratio stays inline so each image keeps its measured crop
     (object-fit:cover) — it just widens to the column. */
  .jgal{gap:14px;}
  .jrow{flex-wrap:wrap;gap:14px;}
  .jrow figure{flex:1 1 100% !important;}
}