/*
Theme Name: VOS Photography
Theme URI: https://example.com
Author: Your Studio
Description: A minimal, editorial photography portfolio theme with a hairline nav, an asymmetric photo grid, and film-frame numbering. Manage photos natively from wp-admin under "Photos".
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vos-photography
*/

:root{
  --bg: #FAF8F4;
  --bg-alt: #EFECE4;
  --fg: #17160F;
  --fg-dim: #6E6A5F;
  --fg-faint: #A7A296;
  --line: #DEDACE;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Archivo', Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{background:var(--bg); scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  min-height:100vh; -webkit-font-smoothing:antialiased; margin:0;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; background:none; border:none; color:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
::selection{background:var(--fg); color:var(--bg);}

/* ---- Admin bar spacing ---- */
.admin-bar header.site-header{top:32px;}
@media screen and (max-width:782px){
  .admin-bar header.site-header{top:46px;}
}

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(250,248,244,.88);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1400px; margin:0 auto; padding:22px clamp(20px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.wordmark{
  font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.04em;
}
.site-nav{display:flex; gap:clamp(14px,2.4vw,34px); flex-wrap:wrap;}
.site-nav a{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; font-weight:600;
  text-transform:uppercase; color:var(--fg-dim); padding:4px 0; position:relative;
  transition:color .25s ease;
}
.site-nav a:hover{color:var(--fg);}
.site-nav a.active{color:var(--fg);}
.site-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--fg);
}
.site-nav a:focus-visible{outline:1px solid var(--fg); outline-offset:4px;}

/* ---- Gallery grid ---- */
.site-main{max-width:1400px; margin:0 auto; padding:clamp(20px,4vw,48px);}
.category-label{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; color:var(--fg-faint);
  text-transform:uppercase; margin:6px 0 28px; display:flex; align-items:center; gap:14px;
}
.category-label::after{content:''; flex:1; height:1px; background:var(--line);}

/* ---- Full-bleed vertical photo wall (3 columns, alternating scroll) ---- */
body.vos-wall-page .site-main{max-width:none; padding:0; margin:0;}
.category-label{
  padding:20px clamp(20px,4vw,48px) 14px;
}

.vos-wall{
  display:flex; width:100%; min-height:100vh;
  gap:clamp(2px,0.6vw,8px);
}
.vos-wall-col{
  flex:1 1 0; min-width:0; overflow:hidden; position:relative; height:100vh;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.vos-wall-track{
  display:flex; flex-direction:column; width:100%; gap:clamp(2px,0.6vw,8px);
  list-style:none; margin:0; padding:0;
  animation:vos-scroll-up var(--vos-duration, 50s) linear infinite;
}
.vos-wall-col.dir-down .vos-wall-track{animation-name:vos-scroll-down;}
.vos-wall-col:hover .vos-wall-track,
.vos-wall-track:focus-within{animation-play-state:paused;}
@keyframes vos-scroll-up{
  from{transform:translateY(0);}
  to{transform:translateY(-50%);}
}
@keyframes vos-scroll-down{
  from{transform:translateY(-50%);}
  to{transform:translateY(0);}
}
@media (max-width:900px){
  .vos-wall{flex-direction:row;}
  .vos-wall-col{height:100vh;}
}

.vos-cell{
  position:relative; overflow:hidden; background:var(--bg-alt);
  cursor:pointer; border:1px solid transparent; width:100%; flex:0 0 auto;
  aspect-ratio:4/5;
}
.vos-cell.wide{aspect-ratio:16/10;}
.vos-cell.narrow{aspect-ratio:3/4;}
.vos-cell.tall{aspect-ratio:2/3;}
.vos-cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.05) contrast(1.02);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.vos-cell:hover img{transform:scale(1.035);}
.vos-placeholder{
  width:100%; height:100%;
  background:
    radial-gradient(120% 90% at 15% 10%, #E7E3D8 0%, transparent 55%),
    radial-gradient(100% 80% at 85% 90%, #DFDBCE 0%, transparent 60%),
    repeating-linear-gradient(135deg, #F1EEE6 0 2px, #E9E5DA 2px 4px);
  display:flex; align-items:center; justify-content:center;
}
.vos-placeholder span{
  font-family:var(--serif); font-style:italic; font-size:13px; color:var(--fg-faint);
}
.frame-no{
  position:absolute; top:10px; left:12px; font-family:var(--sans); font-size:10px;
  letter-spacing:.12em; color:rgba(237,234,227,.55); mix-blend-mode:difference;
  pointer-events:none;
}
.vos-caption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 16px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  transform:translateY(100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.vos-cell:hover .vos-caption, .vos-cell:focus-visible .vos-caption{transform:translateY(0);}
.vos-caption .rule{height:1px; background:var(--fg); width:0; transition:width .5s ease .05s;}
.vos-cell:hover .vos-caption .rule{width:32px;}
.vos-caption .t{font-family:var(--serif); font-style:italic; font-size:15px; margin-top:8px;}
.vos-caption .c{font-size:10px; letter-spacing:.1em; color:var(--fg-dim); text-transform:uppercase; margin-top:3px;}
.vos-cell:focus-visible{outline:1px solid var(--fg); outline-offset:-1px;}

.vos-empty{
  padding:80px 10px; text-align:center; color:var(--fg-dim);
  font-family:var(--serif); font-style:italic; font-size:18px;
}

/* ---- Contact page ---- */
.contact-wrap{
  min-height:60vh; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; padding:40px 0;
}
.contact-wrap h1{
  font-family:var(--serif); font-weight:500; font-style:italic; font-size:clamp(32px,6vw,64px);
  line-height:1.05; max-width:16ch;
}
.contact-list{margin-top:40px; display:flex; flex-direction:column; gap:14px;}
.contact-list a{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim);
  border-bottom:1px solid var(--line); padding-bottom:14px; width:fit-content;
  transition:color .25s ease, border-color .25s ease;
}
.contact-list a:hover{color:var(--fg); border-color:var(--fg);}

/* ---- Lightbox ---- */
.vos-lightbox{
  position:fixed; inset:0; background:rgba(6,6,5,.96); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.vos-lightbox.open{opacity:1; pointer-events:auto;}
.vos-lightbox img{max-width:100%; max-height:82vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5);}
.vos-lightbox-meta{position:absolute; left:40px; bottom:32px; font-family:var(--serif); font-style:italic; color:var(--fg-dim);}
.vos-lightbox-close{position:absolute; top:28px; right:34px; font-size:13px; letter-spacing:.15em; color:var(--fg-dim);}
.vos-lightbox-close:hover{color:var(--fg);}

/* ---- Footer ---- */
.site-footer{
  border-top:1px solid var(--line); margin-top:60px; padding:26px clamp(20px,4vw,48px);
  max-width:1400px; margin-left:auto; margin-right:auto;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.site-footer .fnote{font-size:10px; letter-spacing:.1em; color:var(--fg-faint); text-transform:uppercase;}

/* ---- Single photo view ---- */
.vos-single{max-width:1000px; margin:0 auto; padding:60px clamp(20px,4vw,48px);}
.vos-single img{width:100%; height:auto;}
.vos-single .meta{margin-top:24px;}
.vos-single .meta .t{font-family:var(--serif); font-style:italic; font-size:26px;}
.vos-single .meta .c{font-size:11px; letter-spacing:.1em; color:var(--fg-dim); text-transform:uppercase; margin-top:6px;}
.vos-single .back{display:inline-block; margin-top:30px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); border-bottom:1px solid var(--line); padding-bottom:6px;}
.vos-single .back:hover{color:var(--fg); border-color:var(--fg);}

.fade-in{animation:fadeIn .5s ease both;}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}