/* ProPhotoSTL preview v1 — museum dark mode matching peterwochniak.com. System fonts only, no external requests. */
:root{
  --bg:#121214; --bg2:#1a1a1d; --surface:#222226; --line:#2d2d32; --line2:#4b4b52;
  --text:#f1f5f9; --text2:#cbd5e1; --muted:#8b98ad; --accent:#cbd5e1;
  --mono:'Courier New','Nimbus Mono PS',Courier,monospace;   /* Peter 12:14: brand, nav and site share this system monospace stack */
  --silver:linear-gradient(180deg,#fff 0%,#e2e8f0 25%,#b4bcc8 60%,#cbd5e1 90%,#94a3b8 100%); --store:#8fc9e6;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --gap:16px; --cap-h:48px; --hdr-h:64px; --pad:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;scroll-padding-top:calc(var(--hdr-h) + 8px)}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.muted{color:var(--muted)} .small{font-size:14px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-60px;z-index:3000;background:var(--accent);color:#000;padding:12px 16px}
.skip-link:focus{top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- header: sticky, one row: PW | PROPHOTO STL · PHOTO(menu) · VIDEO · CONTACT · FINE ART STOREFRONT ---------- */
.site-header{position:sticky;top:0;z-index:1000;height:var(--hdr-h);display:flex;align-items:center;gap:16px;
  padding:0 var(--pad);background:rgba(18,18,20,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;flex:0 0 auto;font-family:var(--mono);font-weight:400;font-size:17px;letter-spacing:.14em;white-space:nowrap;
  color:#e2e8f0;background:var(--silver);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-bar{color:var(--line2);-webkit-text-fill-color:var(--line2)}
.main-nav{display:flex;align-items:center;gap:4px;min-width:0;margin-left:auto}
.nav-link{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent}
.nav-link:hover{color:var(--text)}
.nav-link[aria-current=page]{color:var(--text);border-bottom-color:var(--accent)}
.dot{color:var(--line2)}
.storefront{display:inline-flex;align-items:center;min-height:48px;padding:0 4px 0 12px;margin-left:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--store);white-space:nowrap}
.storefront:hover{color:#fff}
.sf-short{display:none}
/* PHOTO dropdown (desktop, hover or keyboard focus). Same links as the in-page tab row; on the Photo page JS reshuffles in place. */
.nav-item{position:relative;display:flex;align-items:center}
.submenu{position:absolute;left:-12px;top:100%;padding-top:8px;visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:1100}
.submenu-inner{width:400px;background:#16161a;border:1px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.55);padding:10px 0}
.submenu-title{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--store);padding:6px 16px 8px}
.sub-link{display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:8px 16px;min-height:48px;color:var(--text2)}
.sub-link:hover,.sub-link:focus-visible{background:var(--surface);color:var(--text)}
.sub-name{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.sub-count{font-size:13px;color:var(--muted);text-align:right}
.sub-desc{grid-column:1/-1;font-size:13px;color:var(--muted);line-height:1.4}
.sub-link[aria-current=page] .sub-name{text-decoration:underline;text-underline-offset:4px}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  .has-menu:hover .submenu,.has-menu:focus-within .submenu,.has-menu.open .submenu{visibility:visible;opacity:1;transform:none}
}
@media (max-width:1024px),(pointer:coarse){.submenu{display:none}}
.has-menu.closing .submenu{visibility:hidden!important;opacity:0!important}

main{display:block;min-height:calc(100vh - var(--hdr-h))}
.page-head{max-width:1440px;margin:0 auto;padding:32px var(--pad) 12px}
.page-title{font-size:22px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.page-sub{color:var(--text2);font-size:15px;margin-top:6px}

/* ---------- buttons / pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid var(--accent);background:var(--accent);color:#000;
  font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;cursor:pointer}
.btn:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line2)}
.btn-ghost:hover{background:transparent;border-color:var(--accent)}

/* ---------- category tabs: one row, sideways scroll, right-edge fade ---------- */
.tabs-wrap{position:sticky;top:var(--hdr-h);z-index:900;background:rgba(18,18,20,.96);border-bottom:1px solid var(--line);max-width:100%}
.tabs-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:48px;pointer-events:none;background:linear-gradient(90deg,rgba(18,18,20,0),#121214 85%);opacity:0;transition:opacity .2s}
.tabs-wrap.fade::after{opacity:1}
.tabs{display:flex;justify-content:flex-start;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  max-width:1440px;margin:0 auto;padding:8px var(--pad)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:2px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;scroll-snap-align:start;scroll-margin-left:var(--pad)}
.tab:hover{color:var(--text);border-color:var(--line2)}
.tab[aria-current=page]{background:var(--accent);border-color:var(--accent);color:#000}

/* ---------- photo grid = peterwochniak.com's uniform grid: 3 / 2 / 1 columns, 28 px gaps (20 px from 600 to 1024 px),
   32 px side padding (16 px up to 768 px), every photo shown whole in a 4:3 box, so verticals balance with horizontals ---------- */
.photo-page{--pad:32px}
.masonry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch;max-width:1440px;margin:0 auto;padding:var(--gap) var(--pad) 48px}
.masonry:empty{min-height:200vh}
/* grid v3 (Peter 4:07 PM): fixed grid. Every cell has the same size (--cell ratio, fixed columns); only the photo size varies.
   The photo is whole (contain) and centred in its cell at its natural ratio. No card or box background, so the space
   around a photo is plain page background (no bands). The caption row sits under the cell, the same height on every card. */
.photo-page{--cell:4/3}
/* ---------- the card is a 1:1 copy of peterwochniak.com's live card (styles.css as deployed Sep 30 20:47: .artwork-card,
   .artwork-overlay … .btn-details, .artwork-caption, the grid v3 block, the touch/tablet/phone rules), Peter 9:30–9:34 PM.
   pw values are written out literally (pw's --text-secondary #94a3b8, --text-muted #8b98ad, --accent-silver #cbd5e1,
   --text-primary #f1f5f9, --border-subtle #2d2d32, --font-mono) so our own theme variables don't change them. ---------- */
.masonry,.static-grid{align-items:start;--cap-h:34px}   /* --cap-h: caption height used only for the eager-load estimate */
.card{--pw-mono:ui-monospace,'SFMono-Regular','Nimbus Mono PS',Consolas,'Liberation Mono',Menlo,'Roboto Mono',Courier,monospace;
  position:relative;min-width:0;background:transparent;border:0;border-radius:0;overflow:visible;cursor:pointer;font-family:var(--pw-mono);font-size:14px;line-height:1.6}
.card-media{position:relative;display:block;width:100%;aspect-ratio:var(--cell);background:transparent;overflow:visible}
.card-link{position:absolute;inset:0;display:block}
.card-media picture{position:absolute;inset:0;display:block}
.card-media img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.card:hover .card-media img{transform:scale(1.03)}
.artwork-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(18,18,20,.1) 0%,rgba(18,18,20,.85) 60%,rgba(18,18,20,.98) 100%);
  opacity:0;transition:opacity .3s ease;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.card:hover .artwork-overlay,.card:focus-within .artwork-overlay{opacity:1;pointer-events:auto}
.artwork-category-badge{display:inline-block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#38bdf8;margin-bottom:6px}
.artwork-title{font-size:15px;font-weight:500;color:#fff;margin:0 0 4px;line-height:1.3}
.artwork-location{font-size:11px;color:#94a3b8;margin-bottom:12px}
.artwork-finishes{font-size:10px;color:#8b98ad;margin-bottom:16px;line-height:1.4}
.artwork-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}   /* DETAILS alone sits bottom-right, where it is on pw */
.btn-acquire{flex:1 1 0;min-width:0;background-color:#cbd5e1;color:#000;font-family:var(--pw-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 6px;white-space:nowrap;text-align:center;border-radius:2px;transition:all .3s cubic-bezier(.16,1,.3,1)}
.btn-acquire:hover{background-color:#fff}
.btn-details{flex:0 0 auto;background:transparent;color:#f1f5f9;border:1px solid #2d2d32;font-family:var(--pw-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 12px;text-align:center;border-radius:2px;transition:all .3s cubic-bezier(.16,1,.3,1);cursor:pointer;line-height:normal}
.btn-details:hover{border-color:#f1f5f9}
.artwork-caption{padding:12px 0 0;background:transparent;border-top:0;display:flex;justify-content:space-between;align-items:center}
.caption-title{margin:0;font-weight:400;font-family:inherit;line-height:1.35;font-size:12px;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.caption-cat{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8b98ad}
@media (pointer:coarse),(max-width:1024px){.btn-acquire,.btn-details{min-height:48px}}
@media (max-width:1024px){
  .artwork-category-badge,.artwork-location,.artwork-finishes,.caption-cat{font-size:14px}
  .caption-cat{letter-spacing:.04em}
  .caption-title{font-size:16px}
  .artwork-caption{flex-wrap:wrap;gap:4px 8px}
  .btn-acquire,.btn-details{font-size:13px}
}
@media (max-width:768px){
  .artwork-caption{align-items:flex-start;gap:8px}
  .caption-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:72%}
}
/* crawler / no-JS cards: CSS columns (masonry-like), hidden when JS runs so their images are never fetched */
.static-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1440px;margin:0 auto;padding:var(--gap) var(--pad) 48px}
.js .static-grid{display:none}
@media (max-width:1024px){.masonry,.static-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:768px){.photo-page{--pad:16px}}
@media (max-width:599px){.masonry,.static-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- DETAILS lightbox = a copy of peterwochniak.com's details modal (index.html #lightbox-modal + styles.css
   .modal-backdrop … .modal-btn-cart, the phone/tablet rules, .lb-nav), Peter 9:37 PM. One change on purpose: the backdrop
   dim is a third lighter (pw rgba(10,10,12,.95) -> .63) so the page stays more visible; the 20 px blur is kept.
   The same lighter dim is staged for pw in /workspace/pw-staging-grid-v2 (not deployed). ---------- */
body.modal-open{overflow:hidden}
.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(10,10,12,.63);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;overscroll-behavior:contain;font-family:ui-monospace,'SFMono-Regular','Nimbus Mono PS',Consolas,'Liberation Mono',Menlo,'Roboto Mono',Courier,monospace;font-size:14px;line-height:1.6;color:#f1f5f9}
.modal-backdrop[hidden]{display:none}
.modal-content{background-color:#1a1a1d;border:1px solid #2d2d32;max-width:1040px;width:100%;max-height:90vh;overflow-y:auto;border-radius:2px;position:relative;display:flex;flex-direction:column}
.modal-close-btn{position:absolute;z-index:10;transition:all .3s cubic-bezier(.16,1,.3,1);font-family:ui-monospace,'SFMono-Regular','Nimbus Mono PS',Consolas,'Liberation Mono',Menlo,'Roboto Mono',Courier,monospace;cursor:pointer;border:none;
  width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;top:8px;right:8px;font-size:28px;line-height:1;color:#fff;background:rgba(18,18,20,.7);border-radius:50%}
.modal-close-btn:hover{color:#fff}
.modal-body{display:grid;grid-template-columns:3fr 2fr;gap:32px;padding:32px}
.modal-image-wrap{position:relative;display:flex;align-items:center;justify-content:center;background-color:#0d0d0f;border:1px solid #2d2d32;touch-action:pan-y}
.modal-image-wrap picture{display:flex;align-items:center;justify-content:center;max-width:100%}
.modal-img{max-width:100%;max-height:70vh;display:block;object-fit:contain;width:auto;height:auto;user-select:none;-webkit-user-drag:none}
.modal-details{display:flex;flex-direction:column;justify-content:space-between}
.modal-meta-header{margin-bottom:24px}
.modal-meta-cat{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#38bdf8;margin-bottom:6px;display:inline-block}
.modal-meta-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:6px;line-height:1.3;font-family:inherit}
.modal-meta-location{font-size:13px;color:#94a3b8;margin-bottom:16px}
.modal-meta-caption{font-size:13px;color:#94a3b8;margin:-8px 0 16px;line-height:1.6}
.modal-meta-caption[hidden],.modal-meta-location:empty{display:none}
.modal-ps-id{font-size:11px;color:#8b98ad;background:#222226;display:inline-block;padding:3px 8px;border-radius:2px;margin-bottom:20px}
.modal-specs-list{font-size:12px;color:#94a3b8;margin-bottom:24px;line-height:1.7}
.modal-specs-list li{margin-bottom:8px;list-style:none;position:relative;padding-left:16px}
.modal-specs-list li::before{content:"\2014";position:absolute;left:0;color:#8b98ad}
.modal-cta-wrap{display:flex;flex-direction:column;gap:12px}
.modal-cta-wrap[hidden]{display:none}
.modal-buy-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-btn-buy{background-color:#cbd5e1;color:#000;font-family:ui-monospace,'SFMono-Regular','Nimbus Mono PS',Consolas,'Liberation Mono',Menlo,'Roboto Mono',Courier,monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:14px 20px;text-align:center;border-radius:2px;transition:all .3s cubic-bezier(.16,1,.3,1)}
.modal-buy-pair .modal-btn-buy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:12px 10px}
.modal-btn-buy:hover{background-color:#fff}
.btn-sub{font-size:10px;font-weight:400;letter-spacing:.02em;text-transform:none;color:#333;line-height:1.3}
.modal-btn-cart{background:transparent;color:#f1f5f9;border:1px solid #2d2d32;font-family:ui-monospace,'SFMono-Regular','Nimbus Mono PS',Consolas,'Liberation Mono',Menlo,'Roboto Mono',Courier,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;text-align:center;border-radius:2px;transition:all .3s cubic-bezier(.16,1,.3,1)}
.modal-btn-cart:hover{border-color:#cbd5e1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(18,18,20,.6);color:#fff;font-size:22px;cursor:pointer;z-index:5}
.lb-nav[hidden]{display:none}
.lb-prev{left:8px}.lb-next{right:8px}
@media (max-width:380px){.modal-buy-pair{grid-template-columns:1fr}}
@media (pointer:coarse),(max-width:1024px){.modal-close-btn,.lb-nav{min-width:48px;min-height:48px}.modal-buy-pair{gap:8px}.modal-btn-buy,.modal-btn-cart{min-height:48px}}
@media (max-width:1024px){.modal-body{grid-template-columns:1fr}.modal-specs-list,.modal-meta-location{font-size:16px}.btn-sub,.modal-ps-id,.modal-meta-cat{font-size:14px}}
@media (min-width:769px) and (max-width:1024px){
  .modal-img{max-height:55dvh;width:auto;max-width:100%;margin:0 auto}
  .modal-cta-wrap{position:sticky;bottom:0;z-index:2;padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));background:#1a1a1d}
}
@media (max-width:768px){
  .modal-backdrop{padding:0}
  .modal-content{max-height:100vh;max-height:100dvh;height:100%;border:0;border-radius:0}
  .modal-body{padding:0;gap:16px}
  .modal-image-wrap{border:0;background:#000;min-height:40vh}
  .modal-img{width:100%;max-height:62vh;max-height:62dvh}
  .modal-details{padding:0 16px}
  .modal-cta-wrap{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:#1a1a1d;gap:8px}
  #lb-close{position:fixed}
  .modal-buy-pair{grid-template-columns:1fr 1fr;gap:8px}
  .modal-cta-wrap .modal-btn-cart{padding:10px 16px}
}
/* Peter 11:45 AM (Oct 1): FIXED photo area in the photo popup. Before, the area took the photo's own height (max 70vh), so a vertical
   (e.g. Havana, Cuba reached with the arrows) filled the popup and the popup grew/shrank on every step. Now the area has one size,
   derived only from the viewport (desktop: the 3fr column's width, square, capped at 62vh but never under 600px so the text column fits; tablet: 4:3 of the width, capped at 55vh;
   phone: 50vh), and every photo is CONTAINED in it (object-fit: contain): same size opened directly or via the arrows, popup never resizes. */
#lightbox .modal-body{--lb-area:max(min(calc((min(1040px, 100vw - 48px) - 98px) * .6), 62vh), 600px);grid-template-rows:var(--lb-area)}
#lightbox .modal-image-wrap{height:var(--lb-area);min-height:0;overflow:hidden}
#lightbox .modal-image-wrap picture{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
#lightbox .modal-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:contain;object-position:center}
#lightbox .modal-details{min-height:0;overflow-y:auto}
@media (min-width:1025px){#lightbox .modal-cta-wrap{position:sticky;bottom:0;z-index:2;background:#1a1a1d;padding-top:12px}}   /* a rare long caption scrolls inside the text column; the buy buttons stay visible */
@media (max-width:1024px){
  #lightbox .modal-body{--lb-area:min(calc((min(1040px, 100vw - 48px) - 66px) * .75), 55vh);grid-template-rows:none}
  #lightbox .modal-details{overflow:visible}
}
@media (min-width:769px) and (max-width:1024px){#lightbox .modal-content{height:90vh}}
@media (max-width:768px){#lightbox .modal-body{--lb-area:min(50vh, 120vw)}#lightbox .modal-image-wrap{min-height:0}}

/* ---------- home ---------- */
.home{max-width:1200px;margin:0 auto;padding:32px var(--pad) 48px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.home-logo{display:block;width:min(100%,440px);height:auto;margin:0 0 28px}
.home-title{font-size:26px;font-weight:400;letter-spacing:.04em;line-height:1.3}
.about{margin-top:28px}
.about-title{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.bio cite{font-style:italic}
.bio{margin-top:16px;color:var(--text2);font-size:16px;line-height:1.7}
.bio.muted{font-size:14px;color:var(--muted);font-family:var(--mono)}
.home-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.featured{background:var(--bg2);border:1px solid var(--line)}
.featured-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
.featured-media{position:relative;display:block;aspect-ratio:3/2;background:#0c0c0e;cursor:pointer}
.featured{position:relative}.featured:hover .featured-media img{transform:scale(1.03)}.featured-media img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.featured:hover .artwork-overlay,.featured:focus-within .artwork-overlay{opacity:1;pointer-events:auto}
.featured .artwork-overlay{font-family:ui-monospace,'SFMono-Regular','Nimbus Mono PS',Consolas,'Liberation Mono',Menlo,'Roboto Mono',Courier,monospace;font-size:14px;line-height:1.6}
.featured-media picture,.featured-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.featured .artwork-caption{padding:12px 12px 14px;font-family:ui-monospace,'SFMono-Regular','Nimbus Mono PS',Consolas,'Liberation Mono',Menlo,'Roboto Mono',Courier,monospace;font-size:14px;line-height:1.6}
.home-cats{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.cat-link{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid var(--line);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2)}
.cat-link:hover{border-color:var(--accent);color:var(--text)}

/* ---------- video ---------- */
.vgrid{max-width:1440px;margin:0 auto;padding:var(--gap) var(--pad) 48px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.vcard{grid-column:span 4}.vcard.d3{grid-column:span 3}.vcard.d6{grid-column:span 6}
.vcard{display:block;text-align:left;background:var(--bg2);border:1px solid var(--line);cursor:pointer;padding:0}
.vcard.is-placeholder{border-style:dashed;border-color:var(--line2)}
.vposter{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:linear-gradient(135deg,#1d1f22,#141517);overflow:hidden}
.vposter picture,.vposter img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.vprev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.vprev.on{opacity:1}
.vlist{max-width:1440px;margin:0 auto;padding:0 var(--pad) 32px}
.vtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.vph-text{position:absolute;top:12px;left:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vplay{position:absolute;z-index:1;width:72px;height:72px;border-radius:50%;background:rgba(18,18,20,.72);border:2px solid rgba(241,245,249,.85)}
.vplay::after{content:"";position:absolute;left:28px;top:20px;border-style:solid;border-width:16px 0 16px 24px;border-color:transparent transparent transparent #f1f5f9}
.vcard:hover .vplay{background:rgba(203,213,225,.25)}
.vdur{position:absolute;z-index:1;right:8px;bottom:8px;background:rgba(0,0,0,.75);padding:2px 8px;font-size:13px;color:#fff}
.vmeta{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:var(--cap-h);padding:0 12px;font-size:14px;color:var(--text2)}
.vcat{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.vm-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px 24px}
.vm-stage video{width:100%;max-width:min(960px,calc((100vh - 110px)*16/9));aspect-ratio:16/9;background:#000}   /* Peter 5:12 PM: cap at 960 px so the burned-in logo stays typical size; phones: full column */
.vm-note{max-width:48ch;text-align:center;color:var(--text2);font-size:16px}
@media (max-width:1024px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.vcard,.vcard.d3,.vcard.d6{grid-column:auto}.vcard.tfull{grid-column:1/-1}}
@media (max-width:599px){.vgrid{grid-template-columns:1fr}.vcard.tfull{grid-column:auto}.vgrid>.vcard:first-child{margin:0 calc(-1 * var(--pad));border-left:0;border-right:0}}

/* ---------- contact ---------- */
.contact-grid{max-width:1100px;margin:0 auto;padding:12px var(--pad) 48px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:6px}
.field input,.field textarea{width:100%;min-height:48px;padding:12px;background:var(--bg2);border:1px solid var(--line2);border-radius:2px;color:var(--text);font-family:var(--sans);font-size:16px}
.field textarea{resize:vertical;min-height:180px;line-height:1.5}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field [aria-invalid=true]{border-color:#f87171}
.field-foot{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:13px}
.count{white-space:nowrap}.count.over{color:#f87171}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:16px;min-height:24px;font-size:15px}
.form-status.ok{color:#86efac}.form-status.err{color:#fca5a5}
.contact-side{grid-column:2;grid-row:1;border-left:1px solid var(--line);padding-left:32px}
.contact-form{grid-column:1;grid-row:1}
.side-title{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:8px}
.side-link{display:inline-flex;align-items:center;min-height:48px;color:var(--text);border-bottom:1px solid var(--line2);font-size:15px;word-break:break-all}
.side-link:hover{border-color:var(--accent)}

/* ---------- footer / 404 ---------- */
.site-footer{border-top:1px solid var(--line);padding:24px var(--pad);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px;max-width:none}
.footer-links{display:flex;flex-wrap:wrap;gap:8px}
.footer-links a{display:inline-flex;align-items:center;min-height:48px;padding:0 8px}
.footer-links a:hover{color:var(--text)}
.nf{max-width:760px;margin:0 auto;padding:80px var(--pad)}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  :root{--pad:20px}
  .home{grid-template-columns:1fr;gap:28px}
  .home-cats{grid-column:auto}
}
/* ---------- phones: one-row header <= 64px ---------- */
@media (max-width:767px){
  :root{--pad:16px;--hdr-h:56px;--gap:12px}
  .site-header{padding:0 6px 0 12px;gap:2px}
  .brand{font-size:12px;letter-spacing:.02em;gap:5px}
  .main-nav{gap:0}
  .dot{display:none}
  .nav-link{padding:0 6px;font-size:12px;letter-spacing:.02em}
  .storefront{margin-left:0;padding:0 4px;font-size:12px;letter-spacing:.02em}
  .sf-long{display:none}.sf-short{display:inline}
  .page-head{padding-top:20px}
  .page-title{font-size:18px}
  .tabs{padding:4px 16px;gap:6px}
  .tab{padding:0 14px;font-size:12px}
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .contact-side,.contact-form{grid-column:auto;grid-row:auto}
  .contact-side{border-left:0;border-bottom:1px solid var(--line);padding:0 0 12px}
  .home-title{font-size:21px}
  .card-title{font-size:14px}
}
@media (max-width:389px){.brand{font-size:10.5px;letter-spacing:0;gap:4px}.nav-link{padding:0 6px;letter-spacing:0}.storefront{padding:0 3px}.site-header{padding:0 4px 0 8px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- video player overlay (#vmodal). Restored 2026-10-01: its old .lightbox / .lb-* rules went away with the photo lightbox
   when that became the peterwochniak.com details modal, so the player showed unstyled at the page bottom. ---------- */
.vmodal{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;background:rgba(10,10,12,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vmodal[hidden]{display:none}
.vmodal .lb-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;min-height:60px}
.vmodal .lb-count{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.vmodal .lb-actions{display:flex;gap:8px}
.vmodal .lb-close{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;background:rgba(18,18,20,.6);color:var(--text);font-size:26px;line-height:1;cursor:pointer}
.vmodal .lb-close:hover,.vmodal .lb-close:focus-visible{border-color:var(--text2);outline:none}
.vm-note{max-width:520px;color:var(--text2);text-align:center;line-height:1.6}

/* ---------- category grid = peterwochniak.com's fine-art gallery grid (Peter, Oct 1 9:16/9:17): every cell outlined by the SAME
   hairline as the line under the top menu (.site-header border-bottom: 1px solid var(--line) = #2d2d32); open "wall" cells, the
   photo centred in a fixed 4:3 frame with air around it, caption centred under it. NO CROP: <picture> fills the frame and the
   image is CONTAINED (letterboxed) - verticals and panoramas always show whole; no hover zoom. ---------- */
.masonry,.static-grid{align-items:start}
.masonry .card,.static-grid .card{border:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;padding:28px 28px 0}
.card .card-media{aspect-ratio:4/3;overflow:hidden}
.card .card-media picture{position:absolute;inset:0;display:block}
.card .card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.card:hover .card-media img{transform:none}
.card .artwork-caption{padding:14px 0 18px;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;gap:4px;text-align:center}
.card .caption-title{max-width:100%;color:var(--text2)}
.card:hover .caption-title{color:var(--text)}
@media (max-width:768px){
  .masonry .card,.static-grid .card{padding:18px 18px 0}
  .card .artwork-caption{padding:12px 0 14px}
}