/* Jimmy Cukier — photography
   Named sections, named projects, and project pages that scroll sideways. */

:root{
  --paper:#fafafa;
  --ink:#1c1c1c;
  --ink-soft:#6f6f6f;
  --rule:rgba(0,0,0,.13);
  --accent:#c8563c;
  --chrome:74px;
  --gutter:clamp(18px, 3.4vw, 52px);
  --ui: ui-sans-serif, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2{font-weight:600}

/* ---------------- chrome ---------------- */
.chrome{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--chrome);
  display:flex; align-items:center; gap:24px;
  padding:0 var(--gutter);
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.wordmark{
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; font-weight:700; line-height:1.05;
  display:flex; flex-direction:column;
}
.wordmark span{font-weight:400; letter-spacing:.24em}
.nav{display:flex; gap:clamp(12px,1.8vw,30px); margin-left:auto; flex-wrap:wrap}
.nav-link{
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  padding-bottom:3px; border-bottom:1.5px solid transparent; white-space:nowrap;
}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink); border-bottom-color:var(--accent)}
.lang{
  appearance:none; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:11px; letter-spacing:.15em; color:var(--ink-soft);
}
.lang .off{opacity:.4}
.lang .sep{opacity:.4; margin:0 2px}
.burger{display:none}

/* ---------------- horizontal pages (home + projects) ----------------
   `.hsec` is a genuinely tall block in normal flow, so the page has a real
   scrollbar and scrolls natively. `.hsticky` pins to the top while you scroll
   through it, and the track inside is translated sideways in proportion.
   No fixed overlays, no synthetic scroll height, nothing to swallow a wheel. */
/* starts below the fixed header, so at scroll 0 the sticky top and the
   section top coincide and the track offset is exactly zero.
   min-height guarantees a scrollbar even if the script never runs. */
.hsec{
  position:relative; margin-top:var(--chrome);
  min-height:calc(100vh - var(--chrome));
}
.hsticky{
  position:sticky; top:var(--chrome);
  height:calc(100vh - var(--chrome));
  display:flex; align-items:stretch;
  overflow:hidden;
}
.viewport{
  flex:1 1 auto; min-width:0; height:100%;
  position:relative;
  /* Scrollable by default so the strip still works with no JavaScript at all.
     script.js switches this to hidden once it is driving the track itself. */
  overflow-x:auto; overflow-y:hidden;
}
.viewport::-webkit-scrollbar{height:8px}
.viewport::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22)}
.track{
  display:flex; align-items:center; height:100%;
  gap:clamp(16px,2vw,34px);
  padding:0 clamp(24px,4vw,72px);
  will-change:transform;
}

.frame{
  position:relative; flex:0 0 auto; text-decoration:none;
  --fig-h:calc(100vh - var(--chrome) - clamp(40px,8vh,96px));
  height:var(--fig-h);
  width:calc(var(--fig-h) * var(--ar));
}
.frame img{width:100%; height:100%; object-fit:cover}
.frame-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  opacity:0; transition:opacity .35s ease;
}
.frame:hover .frame-label, .frame:focus-visible .frame-label{opacity:1}
.frame-label b{display:block; font-size:17px; font-weight:600; line-height:1.2}
.frame-label i{
  display:block; font-style:normal; margin-top:2px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.85;
}
.hint{
  position:absolute; right:clamp(20px,3vw,40px); bottom:14px; margin:0;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); transition:opacity .4s ease;
}
.hint::after{content:" \2193"}
.moved .hint{opacity:0}

/* ---------------- section index ---------------- */
.index{padding:calc(var(--chrome) + 6vh) var(--gutter) 12vh; max-width:1600px; margin:0 auto}
.index h1{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 3rem; font-weight:600;
}
.cards{
  display:grid; gap:clamp(28px,3.4vw,56px);
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
}
.card{text-decoration:none; display:block}
.card-img{display:block; overflow:hidden; background:#eee; aspect-ratio:4/3}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.03)}
.card-title{display:block; margin-top:.85rem; font-size:19px; font-weight:600; line-height:1.25}
.card-meta{display:block; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin-top:.3rem}

/* ---------------- project: horizontal ---------------- */
.statement{
  flex:0 0 clamp(280px, 26vw, 400px);
  border-right:1px solid var(--rule);
  padding:clamp(24px,3.4vw,44px) clamp(20px,2.4vw,36px);
  overflow-y:auto;
}
.back{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
}
.back:hover{color:var(--accent)}
.statement h1{font-size:clamp(24px,2.4vw,34px); line-height:1.12; margin:1.6rem 0 .4rem}
.statement .meta{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1.6rem;
}
.statement .text p{font-size:14.5px; line-height:1.62; margin:0 0 1rem; color:#333}
.statement .count{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:2rem;
}

/* A true filmstrip: every frame the same height, width follows the ratio. */
.track figure{
  margin:0; flex:0 0 auto;
  --fig-h:calc(100vh - var(--chrome) - clamp(44px,9vh,104px));
  height:var(--fig-h);
  width:calc(var(--fig-h) * var(--ar));
}
.track figure img{width:100%; height:100%; object-fit:contain; cursor:zoom-in}

/* ---------------- contact ---------------- */
.contact{max-width:900px; margin:0 auto; padding:calc(var(--chrome) + 8vh) var(--gutter) 14vh}
.contact h1{font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 2.6rem}
.lede{font-size:clamp(19px,2.2vw,26px); line-height:1.45; margin:0 0 4rem; max-width:27em; text-wrap:pretty}
.cols{
  display:grid; gap:2.4rem clamp(24px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding:2.6rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.cols h2{font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin:0 0 .8rem}
.cols p{margin:0; font-size:14.5px; line-height:1.6; color:#333}
.reach{padding-top:3.4rem}
.reach p{max-width:34em}
.reach .big{font-size:clamp(19px,2.6vw,28px); margin:.9rem 0 0}
.reach .big a{text-decoration:none; border-bottom:1px solid var(--rule)}
.reach .big a:hover{border-bottom-color:var(--accent); color:var(--accent)}

/* ---------------- lightbox ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:90; background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,4vw,64px); cursor:zoom-out;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:100%; width:auto; height:auto}
.lb-close{
  position:absolute; top:14px; right:var(--gutter);
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:28px; line-height:1; color:var(--ink); opacity:.5;
}
.lb-close:hover{opacity:1}

/* ---------------- footer ---------------- */
.foot{
  display:flex; align-items:center; gap:clamp(14px,2vw,30px); flex-wrap:wrap;
  padding:1.6rem var(--gutter);
  border-top:1px solid var(--rule);
  font-size:11.5px; letter-spacing:.1em;
}
.foot a{text-decoration:none; color:var(--ink-soft)}
.foot a:hover{color:var(--ink)}
.foot-name{text-transform:uppercase; letter-spacing:.2em; font-weight:600}
.foot-note{margin-left:auto; color:var(--ink-soft); text-transform:uppercase}

/* ---------------- small screens ---------------- */
@media (max-width:900px){
  :root{--chrome:60px}
  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:30px; height:30px; margin-left:auto;
    appearance:none; border:0; background:none; padding:0; cursor:pointer;
  }
  .burger span{display:block; height:1.5px; background:var(--ink)}
  .nav{
    position:fixed; inset:var(--chrome) 0 auto 0;
    flex-direction:column; gap:0; margin:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    padding:6px var(--gutter) 18px;
    display:none;
  }
  .chrome.open .nav{display:flex}
  .nav-link{padding:12px 0; font-size:13px; border-bottom:0}
  .nav-link.active{color:var(--accent)}
  .lang{order:3}

  /* horizontal becomes vertical on a phone */
  .hint{display:none}
  .hsec{height:auto !important}
  .hsticky{position:static; height:auto; display:block; overflow:visible}
  .viewport{height:auto; overflow:visible}
  .track{display:block; height:auto; padding:0; transform:none !important}
  .frame{
    display:block; height:auto; width:auto;
    margin:0 0 clamp(28px,6vw,52px); padding:0 var(--gutter);
  }
  .frame img{height:auto; aspect-ratio:var(--ar)}
  .frame-label{
    position:static; opacity:1; color:var(--ink); background:none;
    padding:.7rem 0 0;
  }
  .frame-label i{color:var(--ink-soft)}
  .statement{
    flex:none; border-right:0; border-bottom:1px solid var(--rule);
    padding:2rem var(--gutter) 2.4rem; overflow:visible;
  }
  .track figure{
    height:auto; width:auto;
    margin:0 0 clamp(28px,6vw,52px);
    padding:0 var(--gutter);
  }
  .track figure:first-child{margin-top:clamp(28px,6vw,52px)}
  .track figure img{width:100%; height:auto; aspect-ratio:var(--ar)}
  .foot-note{margin-left:0; width:100%}
}