/* ==========================================================================
   COSTA TZOYTZOYRAKOS — PHOTOGRAPHY PORTFOLIO
   Neutral surfaces so the photographs carry the colour.
   ========================================================================== */


/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */
:root{
  --bg:       #eeeae1;   /* warm off-white paper */
  --bg-alt:   #e3ded3;
  --fg:       #15161a;
  --fg-soft:  #46474d;
  --fg-mute:  #6a6b71;   /* ≥4.5:1 on the paper background */
  --border:   rgba(21,22,26,.13);
  --accent:   #d92b1d;   /* the red cursor — used sparingly */

  --f-display: 'American Typewriter', 'Zilla Slab', ui-serif, Georgia, serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;
  --f-name:    'Space Grotesk', 'Space Mono', ui-sans-serif, system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --gap: clamp(10px, 1.4vw, 20px);
  --maxw: 1600px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h, 64px); }
html, body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.lb-open, body.menu-open{ overflow: hidden; }
html{ -webkit-tap-highlight-color: transparent; }
.sr-only{
  position:absolute; 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: var(--gutter); top: -60px; z-index: 1001;
  background: var(--fg); color: var(--bg);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px; border-radius: 4px;
}
.skip-link:focus{ top: 12px; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
button{ font: inherit; background:none; border:none; cursor:pointer; color: inherit; padding:0; }
::selection{ background: var(--fg); color: var(--bg); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------------- */
/* Type                                                                    */
/* ---------------------------------------------------------------------- */
.display{ font-family: var(--f-display); font-weight: 400; letter-spacing: -.01em; }
h2{ text-transform: lowercase; }
.eyebrow{
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.eyebrow::before{ content:'— '; }

/* ---------------------------------------------------------------------- */
/* Layout                                                                  */
/* ---------------------------------------------------------------------- */
.wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section{ padding-block: clamp(56px, 8vw, 120px); }

.head-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 18px 24px; flex-wrap:wrap;
  margin-bottom: clamp(24px, 4vw, 44px);
}
.head-row h2{ font-size: clamp(1.8rem, 4vw, 3rem); }

.split{
  display:grid; grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 6vw, 90px); align-items:start;
}
@media (max-width: 780px){ .split{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* Nav                                                                     */
/* ---------------------------------------------------------------------- */
.site-nav{
  will-change: transform;
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--gutter);
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav.nav-solid{
  background: var(--bg);           /* opaque: no backdrop blur to recompute while scrolling */
  border-bottom-color: var(--border);
}
.site-nav .brand{
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 500;
  display:flex; align-items:baseline; gap:.4em;
}
.site-nav .brand small{ font-family: var(--f-mono); font-size: .6rem; color: var(--fg-mute); letter-spacing: .1em; }
.nav-links{
  display:flex; align-items:center; gap: clamp(14px, 2.4vw, 34px);
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
}
.nav-links a{ position:relative; padding-bottom:3px; opacity:.7; transition: opacity .3s var(--ease); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background: currentColor;
  transition: right .35s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ right:0; }
.nav-toggle{ display:none; }

@media (max-width: 720px){
  .site-nav .brand small{ display:none; }
  .nav-links{
    position: fixed; inset: 0; height: 100vh; height: 100dvh;
    flex-direction:column; justify-content:center;
    background: var(--bg);
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    font-size: 1.1rem; gap: 26px;
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-toggle{
    display:block; position:relative; z-index: 600;
    font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--border); padding: 8px 12px; border-radius: 40px;
  }
}

/* ---------------------------------------------------------------------- */
/* Hero — just the name. Shorter than a full screen so the first row of    */
/* photographs peeks in and invites the scroll.                            */
/* ---------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 78vh;     /* fallback for older browsers */
  min-height: 78svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top: 120px;
  padding-bottom: clamp(28px, 5vw, 56px);
}
.hero > :not(.olive){ position: relative; z-index: 1; }
.olive{
  position: absolute; z-index: 0;
  right: var(--gutter);
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}
@media (max-width: 720px){
  .hero .hero-name{ font-size: clamp(1.9rem, 9vw, 3rem); }
  /* fade the right edge of the section bar so it reads as scrollable */
  .si-inner{
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 48px;
  }
}
.hero-tagline{ display:flex; align-items:baseline; flex-wrap:wrap; gap: 4px 20px; margin-bottom: clamp(14px, 2vw, 24px); }
.hero-clock{
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .07em;
  color: var(--fg-mute); font-variant-numeric: tabular-nums;
}
.hero-clock::before{ content: '— '; }

.hero-name{
  font-family: var(--f-name);
  font-weight: 700;
  font-size: clamp(1.75rem, 7vw, 6.1rem);   /* max ~98px; was 124px, before that 144px */
  line-height: .95;
  letter-spacing: -.035em;
}
.hero-name .type{ display:inline-block; white-space: nowrap; }
.hero-name .cursor{
  display:inline-block; width: .07em; height: .82em;
  margin-left: .04em; vertical-align: -.05em;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}
.hero-surname{ color: var(--fg-soft); }
@keyframes blink{ 50%{ opacity:0; } }

.hero-foot{
  margin-top: clamp(32px, 6vw, 72px);
  display:flex; justify-content:space-between; align-items:center; gap: 16px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.hero-index{
  font-family: var(--f-mono); font-size: clamp(.62rem, 1vw, .72rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft);
}
.scroll-cue{
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform:uppercase;
  color: var(--fg-mute); display:flex; align-items:center; gap:10px;
}
.scroll-cue:hover{ color: var(--fg); }
.scroll-cue .stick{ width:1px; height:30px; background: var(--border); overflow:hidden; position:relative; }
.scroll-cue .stick::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--accent); animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue{ to{ top:100%; } }

/* ---------------------------------------------------------------------- */
/* Section index — sticky chip bar under the nav                           */
/* ---------------------------------------------------------------------- */
.work{ padding-block: 0; }
.section-index{
  will-change: transform;
  position: sticky; top: var(--nav-h, 61px); z-index: 400;
  background: var(--bg);
  border-block: 1px solid var(--border);
}
.si-inner{
  display:flex; gap: 6px; padding-block: 10px;
  overflow-x: auto; scrollbar-width: none;
}
.si-inner::-webkit-scrollbar{ display:none; }
.si-link{
  flex: none;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 100px;
  color: var(--fg-soft);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.si-link:hover{ border-color: var(--fg); color: var(--fg); }
.si-link.is-active{ background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ---------------------------------------------------------------------- */
/* Gallery sections                                                        */
/* ---------------------------------------------------------------------- */
.gset{ padding-block: clamp(48px, 7vw, 100px) 0; scroll-margin-top: calc(84px - clamp(48px, 7vw, 100px));  /* lands the label just under the section bar */ }
.gset:last-child{ padding-bottom: clamp(48px, 7vw, 100px); }
.gset-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 12px 32px; flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.gset-head h2{ font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; }
.gset-count{
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-mute);
}
.gset-blurb{ max-width: 36ch; color: var(--fg-soft); font-size: .95rem; }

/* masonry — columns are built in script.js (shortest-column fill) */
.gallery{ display:flex; gap: var(--gap); align-items:flex-start; }
.gcol{ flex: 1 1 0; min-width: 0; contain: layout style; display:flex; flex-direction:column; gap: var(--gap); }

.shot{
  cursor: zoom-in;
  opacity: 0; transform: translate3d(0,14px,0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.shot.is-visible{ opacity:1; transform:none; }
.shot.is-done{ transition: none; }
.shot img{
  width:100%; height:auto;
  aspect-ratio: var(--ar, 4/5);
  background: var(--bg-alt);
  -webkit-user-drag: none;
}
@media (hover: hover){
  .shot img{ transition: opacity .4s var(--ease); }
  .shot:hover img{ opacity: .88; }
}
.shot.is-empty{ display:none; }

/* ---------------------------------------------------------------------- */
/* Clients list                                                            */
/* ---------------------------------------------------------------------- */
.work-list{ border-top: 1px solid var(--border); }
.work-item{
  border-bottom: 1px solid var(--border);
  padding-block: clamp(22px, 3vw, 36px);
  display:grid; grid-template-columns: 110px 1fr auto;
  gap: 24px; align-items: baseline;
}
.wi-year{ font-family: var(--f-mono); font-size:.78rem; color: var(--fg-mute); }
.work-item h3{ font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.wi-role{
  font-family: var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--fg-soft); margin-top: 6px;
}
.work-item p:not(.wi-role){ color: var(--fg-soft); font-size:.92rem; margin-top:10px; max-width: 60ch; }
.wi-tag{
  font-family: var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--fg-mute); white-space:nowrap;
}
@media (max-width: 680px){ .work-item{ grid-template-columns: 1fr; gap: 6px; } }

/* ---------------------------------------------------------------------- */
/* About                                                                   */
/* ---------------------------------------------------------------------- */
.about-lede{
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  max-width: 34ch;
}
.inline-link{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--accent); transition: color .2s; }
.inline-link:hover{ color: var(--accent); }
.about-body{ max-width: 52ch; color: var(--fg); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; }
.stat-row{ display:flex; column-gap: clamp(30px,6vw,80px); row-gap: 24px; flex-wrap:wrap; margin-top: clamp(40px, 6vw, 72px); }
.stat{ font-family: var(--f-mono); }
.stat b{ display:block; font-family: var(--f-display); font-size: clamp(1.9rem,4vw,3.2rem); font-weight:400; }
.stat span{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-mute); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer{ border-top: 1px solid var(--border); padding-block: clamp(48px, 8vw, 90px); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 30px; flex-wrap:wrap; }
.footer-top h2{ font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.02; }
.footer-links{ display:flex; flex-direction:column; gap: 10px; font-family: var(--f-mono); font-size:.85rem; letter-spacing:.04em; }
.footer-links a{ opacity:.8; transition: opacity .3s; }
.footer-links a:hover{ opacity:1; color: var(--accent); }
.footer-bottom{
  margin-top: clamp(40px,6vw,70px); padding-top: 20px; border-top: 1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family: var(--f-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--fg-mute);
}

/* ---------------------------------------------------------------------- */
/* Lightbox                                                                */
/* ---------------------------------------------------------------------- */
.lightbox{
  position: fixed; inset: 0; z-index: 1000;
  display:grid; grid-template-columns: 64px 1fr 64px; align-items:center;
  background: #0c0c0e;
  color: #f5f4f0;
  opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity: 1; }
.lb-stage{
  grid-column: 2; height: 100vh; height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 14px; padding-block: 64px 28px; min-width: 0;
}
.lb-img{
  max-width: 100%; max-height: calc(100vh - 130px); max-height: calc(100svh - 130px);
  width:auto; height:auto; object-fit: contain;
  -webkit-user-drag: none; user-select: none;
}
.lb-cap{
  display:flex; gap: 24px; justify-content:space-between; width: 100%; max-width: 900px;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,244,240,.65);
}
.lb-btn{
  font-family: var(--f-mono); font-size: 1.1rem; color: rgba(245,244,240,.7);
  height: 100%; display:flex; align-items:center; justify-content:center;
  transition: color .2s;
}
.lb-btn:hover{ color: #fff; }
.lb-prev{ grid-column: 1; grid-row: 1; }
.lb-next{ grid-column: 3; grid-row: 1; }
.lb-close{
  position:absolute; top: 18px; right: var(--gutter); height:auto;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(245,244,240,.25); padding: 8px 12px; border-radius: 40px; z-index: 2;
}
@media (max-width: 720px){
  .lightbox{ grid-template-columns: 0 1fr 0; }
  .lb-prev, .lb-next{ display:none; }   /* swipe instead */
  .lb-stage{ padding-inline: 12px; }
}

/* ---------------------------------------------------------------------- */
/* Reveal + motion                                                         */
/* ---------------------------------------------------------------------- */
[data-reveal]{ opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .shot, [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hero-name .cursor, .scroll-cue .stick::after{ animation:none; }
}