/* ============================================================
   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{display:block;}
.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){
  .nav-inner{flex-wrap:wrap;}
  .nav a,.nav .tab{flex:1 1 40%;font-size:1.1rem;}
  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);}

/* 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-card{grid-template-columns:1fr;gap:16px;}
  .feature-img img{max-height:50vh;}
  .feature-title{font-size:2rem;}
  .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;
  }
}