/* ZABIWA v2.2.3 — unified meta row (about me + scroll cue + icons) aligned on one line; bigger hover title retained */

/* Optional custom font:
@font-face{
  font-family: "ZabiwaCustom";
  src: url("fonts/YourFont.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/

:root{
  --bg: #0b0b0b;
  --ink: #ffffff;
  --ink-dim: #cfcfcf;
  --line: #262626;
  --maxw: 1600px;
  --font-family: "ZabiwaCustom", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --brand-size: clamp(30px, 5.2vw, 64px);
  --tagline-size: clamp(14px, 2.3vw, 17px);
  --about-size: 16px;
  --gallery-top-gap: 16px;
  --displate-link-display: inline-flex; /* set to none to hide Displate icon */
  --displate-link-pointer-events: auto; /* set to none when icon should be disabled */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family: var(--font-family);font-size:16px;line-height:1.45}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible{outline:2px solid rgba(255,255,255,0.8);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;background:#111;color:#fff;padding:.5rem .75rem;border-radius:6px;z-index:10000}

/* Header spacing */
.site-header{padding:28px 20px 0px;max-width:var(--maxw);margin:0 auto;text-align:center}
.brand{font-size: var(--brand-size);letter-spacing:.08em;margin:0 0 6px 0;font-weight:700}
.tagline{margin:0 auto 6px auto;max-width:900px;color:var(--ink-dim);font-size: var(--tagline-size)}

.site-header .brand,
.site-header .tagline{
  position:relative;
  top:-10px;
}
@media (max-width:640px){
  .site-header .brand,
  .site-header .tagline{ top:-8px; }
}

/* Unified meta row: grid with three columns (left/center/right) */
.meta-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px 0;
  min-height:34px;
}
.about-link{
  justify-self:start;
  background:none;border:none;color:var(--ink);
  padding:0;font-size:17px;opacity:.9;cursor:pointer;letter-spacing:.02em;
}
.about-link:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.socials.meta{justify-self:end;display:flex;gap:16px;align-items:center}
.icon-img{width:24px;height:24px;display:block}
.icon-img.displate-icon{transform:scale(1.13);transform-origin:center}
.icon-img.mail-icon{transform:scale(1.1);transform-origin:center}
.social-link{opacity:.9}
.social-link:hover{opacity:1}
.displate-link{
  display: var(--displate-link-display);
  pointer-events: var(--displate-link-pointer-events);
}

/* Scroll cue now lives inside the grid center cell */
.scroll-cue{
  justify-self:center;
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  color:#e5e5e5; opacity:.98; font-size:16px; letter-spacing:.06em;
  transition: opacity 220ms ease;
}
.cue-icon{ width:18px; height:18px; animation: cue-bounce 1.4s ease-in-out infinite }
@keyframes cue-bounce{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(3px) } }
.scroll-cue.hide{ opacity:0; pointer-events:none }

/* Divider below the row */
.divider{position:relative;border:0;border-top:2px solid var(--line);max-width:99%;margin:6px auto 0 auto}
.divider::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:36px;
  background: linear-gradient(180deg, rgb(255, 255, 255), rgba(255,255,255,0));
  pointer-events:none;
}

.gallery{max-width:var(--maxw);margin:var(--gallery-top-gap) auto 0;padding:18px 20px;transition:opacity 200ms ease}
.gallery.fade{opacity:0}
.gallery .item:first-child{ margin-top:0 !important; }
.item{margin: 0 0 var(--fresque-gap, 28px) 0;content-visibility:auto;contain-intrinsic-size: 1000px 600px}
.art-figure{margin:0}
.ph{width:100%}

/* Hover: subtle enlarge + soft gradient highlight */
.img-wrap{
  display:block; position:relative; border-radius:8px; outline:1px solid transparent;
  transform: translateZ(0); will-change: transform;
  transition: transform 220ms cubic-bezier(.22, 1.1, .36, 1), filter 220ms ease;
}
.img-wrap picture{ display:block; width:100%; height:100%; }
.img-wrap picture img{ width:100%; height:100%; display:block; border-radius:inherit; }
.img-wrap::before{
  content:""; position:absolute; inset:0; border-radius:8px;
  background: radial-gradient(46% 46% at 50% 50%, rgba(255,255,255,.2), rgba(255,255,255,0) 72%);
  opacity:0; transition: opacity 200ms ease;
}
.img-wrap::after{
  content:""; position:absolute; inset:0; border-radius:8px;
  background: radial-gradient(76% 76% at 50% 50%, rgba(0,0,0,0) 44%, rgba(0,0,0,.4) 100%);
  opacity:0; transition: opacity 200ms ease;
  pointer-events:none;
}
.img-wrap:hover{ transform: scale(1.015) }
.img-wrap:hover::before,
.img-wrap:hover::after{ opacity:1 }

/* Title: underline + halo; larger size */
.hover-title{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  background: none; color:#fff; padding:0; border:0;
  font-size: 30px;
  letter-spacing:.02em; line-height:1; white-space:nowrap;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 6px rgba(0,0,0,.55);
  opacity:0; transition: opacity 140ms ease; pointer-events:none;
}
.img-wrap:hover .hover-title{ opacity:1 }

.art{width:100%;height:100%;object-fit:contain;background:#0a0a0a;border-radius:8px}

@media (prefers-reduced-motion: reduce){
  .img-wrap{transition:none}
  .img-wrap:hover{transform:none}
  .img-wrap::before{transition:none}
  .hover-title{transition:none}
}

.lb-caption{position:absolute;left:16px;bottom:16px;color:#ddd;font-size:14px;background:rgba(0,0,0,0.3);padding:6px 8px;border-radius:6px;backdrop-filter: blur(3px)}
.lb-img{max-width:92vw;max-height:86vh;touch-action:none;cursor:grab;user-select:none}
.lb-img:active{cursor:grabbing}

.lightbox.hidden{display:none}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.94);display:grid;place-items:center;z-index:9999}
.lb-figure{position:relative;margin:0}
.lb-close{position:fixed;top:18px;right:18px;height:40px;width:40px;border-radius:50%;background:rgba(255,255,255,0.06);color:#fff;border:1px solid #444;cursor:pointer;font-size:24px;line-height:1}
.lb-close:hover{background:rgba(255,255,255,0.12)}
.lb-watermark{position:absolute;right:14px;bottom:14px;font-size:12px;color:rgba(255,255,255,0.35);letter-spacing:.12em;pointer-events:none;user-select:none}

.modal.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.88);display:grid;place-items:center;z-index:9998;padding:20px}
.modal-body{display:grid;grid-template-columns: 120px 1fr;gap:18px;max-width:780px;width:96%;background:#0f0f0f;border:1px solid #222;border-radius:12px;padding:18px}
.about-photo{width:120px;height:120px;object-fit:cover;border-radius:8px;background:#121212;border:1px solid #222}
.about-text h2{margin:0 0 8px 0;font-size: clamp(18px, 2.4vw, 24px)}
.about-text p{margin:0;font-size: var(--about-size);color:#ddd;line-height:1.6}
.modal-close{position:absolute;top:18px;right:18px;height:40px;width:40px;border-radius:50%;background:rgba(255,255,255,0.06);color:#fff;border:1px solid #444;cursor:pointer;font-size:24px;line-height:1}

.noscript{max-width:var(--maxw);margin:2rem auto;padding:1rem;border:1px solid var(--line);border-radius:8px;background:#101010;color:#ddd}

.site-footer{max-width:var(--maxw);margin:34px auto 20px auto;padding:0 20px;color:#aaa;text-align:center}

.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.tagline {
  margin: 0 auto;
  max-width: 900px;
  color: var(--ink-dim);
  line-height: 1.3;  /* tighter line spacing overall */
}

.tagline-main {
  display: block;
  font-size: 1.2em;   /* slightly larger than normal */
  margin-bottom: 2px; /* very small gap before sub line */
}

.tagline-sub {
  display: block;
  font-size: 0.9em;   /* smaller than main */
  color: var(--ink-dim);
}
#about-copy p {
  margin: 0 0 14px 0;   /* adds 14px space after each paragraph */
  line-height: 1.55;    /* slightly more breathing room */
}
#about-copy p:last-child {
  margin-bottom: 0;     /* remove the extra space after the last line */
}

/* === Hotfix v2.3.3 ===================================================== */

/* Keep 3-col header; hide middle 'scroll' without collapsing */
.meta-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.about-link{ grid-column:1; justify-self:start; }
.scroll-cue{ grid-column:2; display:none !important; }
.socials.meta{ grid-column:3; justify-self:end; display:flex; gap:16px; align-items:center; }

/* Subtle divider continuation */
.divider::after{ height:48px; }

/* Lightbox: stop page pinch-zoom; caption bottom-left; hide caption on mobile */
.lightbox, .lb-figure, .lb-img{ touch-action:none; }
.lb-caption{ left:12px; bottom:12px; font-size:12px; background:rgba(0,0,0,.28); padding:6px 8px; border-radius:6px; backdrop-filter:blur(3px); }
@media (max-width:640px){ .lb-caption{ display:none; } }

/* About modal desktop: photo left, title+bio right; mobile: bio full width below */
.about-text{ display: contents; }
#about-copy{ grid-column:2; }            /* desktop: keep bio in right column */
.modal{ overflow:auto; -webkit-overflow-scrolling:touch; }
.modal-body{ max-height:min(88vh,820px); overflow:auto; }
#about-copy p{ margin:0 0 14px 0; line-height:1.55; }
#about-copy p:last-child{ margin-bottom:0; }
@media (max-width:640px){
  .modal-body{ grid-template-columns:96px 1fr; grid-auto-rows:auto; }
  .about-photo{ width:96px; height:96px; }
  #about-title{ grid-column:2; align-self:start; margin:0 0 6px 0; }
  #about-copy{ grid-column:1 / -1; margin-top:8px; } /* full width */
}

/* === Gallery tabs + masonry layout ===================================== */
.gallery-tabs{
  grid-column:2;
  justify-self:center;
  display:flex;
  gap:10px;
  align-items:center;
}
.tab{
  background:none;
  border:0;
  color:#fff;
  font:inherit;
  cursor:pointer;
  opacity:.6;
  padding:0;
  transition:opacity 160ms ease;
}
.tab:hover,
.tab:focus{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}
.tab.active{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}
.tab-sep{
  color:#fff;
  opacity:.4;
  font-size:18px;
  line-height:1;
}

@media (max-width:640px){
  #tabs-mobile-anchor{
    display:flex;
    justify-content:center;
    margin:10px auto 0;
    padding:0 20px;
  }
  #tabs-mobile-anchor .gallery-tabs{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:0;
  }
  #tabs-mobile-anchor .gallery-tabs .tab{ font-size:.95rem; }
}

/* Mosaic only when Other works is active */
body.mode-other .gallery{
  max-width:var(--maxw);
  margin:var(--gallery-top-gap) auto 0;
  padding:0 20px;
  display:grid;
  grid-template-columns: repeat(var(--other-cols, 3), minmax(0, 1fr));
  gap: var(--other-gap, 8px);
}
body.mode-other .item{
  margin:0;
  display:flex;
  flex-direction:column;
  height: var(--other-height, 320px);
  border-radius:var(--rad, 10px);
  overflow:hidden;
  content-visibility:visible;
  contain-intrinsic-size:auto;
}
body.mode-other .item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.mode-other .art-figure,
body.mode-other .ph,
body.mode-other .img-wrap{
  height:100%;
  display:flex;
  width:100%;
}
body.mode-other .art-figure{ flex:1; }
body.mode-other .ph{ flex:1; }
body.mode-other .img-wrap{
  border-radius:inherit;
  overflow:hidden;
}
body.mode-other .img-wrap::before{ border-radius:inherit; }

/* Footer: signature + icons aligned in a row; responsive */
.site-footer{ max-width:var(--maxw); margin:32px auto 24px; padding:0 20px; color:#aaa; }
.footer-inner{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.footer-signature{ letter-spacing:0.08em; }
.f-socials{ display:flex; gap:14px; align-items:center; }
.f-socials .icon-img{ width:24px; height:24px; }
/* ====================================================================== */