@charset "UTF-8";
/* Alon Saranga — Gallery
   Developed by Alon Saranga · © 2026 Alon Saranga. All rights reserved. */

:root{
  --bg:#0c0b0a;
  --bg-2:#141210;
  --ink:#ece6da;
  --ink-2:#b9b1a3;
  --muted:#7d766b;
  --line:rgba(236,230,218,.12);
  --gold:#c8a56a;
  --gold-soft:rgba(200,165,106,.35);
  --display:"Cormorant Garamond", "Times New Roman", serif;
  --body:"Inter", system-ui, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-slow:cubic-bezier(.65,.05,.36,1);
  --gutter:clamp(16px, 4vw, 64px);
}
html[lang="he"]{
  --display:"Frank Ruhl Libre", "David", serif;
  --body:"Heebo", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* subtle film grain */
body::before{
  content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .6s var(--ease), padding .6s var(--ease);
}
.topbar.solid{background:rgba(12,11,10,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-block:14px;border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:baseline;gap:14px}
.mark-mono{font-family:"Cormorant Garamond",serif;font-size:22px;letter-spacing:.18em;color:var(--gold)}
.mark-name{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
html[lang="he"] .mark-name{letter-spacing:.08em;font-size:13px}
.topnav{display:flex;align-items:center;gap:28px}
.nav-link{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);transition:color .4s}
html[lang="he"] .nav-link{letter-spacing:.05em;font-size:13px}
.nav-link:hover{color:var(--ink)}
.lang{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:40px;padding:6px 14px}
.lang button{font-size:12px;letter-spacing:.12em;color:var(--muted);transition:color .4s}
.lang button.on{color:var(--gold)}
.lang-sep{width:1px;height:12px;background:var(--line)}

/* ---------- stage & transitions ---------- */
.stage{position:relative;transition:filter 1.3s var(--ease-slow), transform 1.3s var(--ease-slow), opacity 1.3s var(--ease-slow)}
.stage.dimming{filter:brightness(.15) saturate(.4) blur(2px);transform:scale(1.015);opacity:.6}
.veil{
  position:fixed;inset:0;z-index:80;background:#000;opacity:0;pointer-events:none;
  transition:opacity 1.25s var(--ease-slow);
}
.veil.on{opacity:1;pointer-events:all}
.veil.quick{transition-duration:.9s}

/* ---------- HOME ---------- */
.hero{
  min-height:92vh;display:grid;align-content:end;
  padding:140px var(--gutter) 64px;position:relative;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);
  transition:opacity 3s var(--ease), transform 9s linear;filter:saturate(.85) brightness(.55)}
.hero-bg img.on{opacity:1;transform:scale(1)}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 30%, transparent 0%, rgba(12,11,10,.55) 60%, var(--bg) 100%),
  linear-gradient(to bottom, rgba(12,11,10,.3), var(--bg))}
.eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
html[lang="he"] .eyebrow{letter-spacing:.12em;font-size:13px}
.hero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(48px, 9vw, 148px);line-height:.92;letter-spacing:-.01em;max-width:12ch;
}
.hero h1 em{font-style:italic;color:var(--gold)}
html[lang="he"] .hero h1{line-height:1.02}
html[lang="he"] .hero h1 em{font-style:normal}
.hero-meta{display:flex;gap:40px;flex-wrap:wrap;margin-top:40px;color:var(--ink-2);font-size:13px;letter-spacing:.06em}
.hero-meta b{display:block;font-family:var(--display);font-weight:300;font-size:34px;color:var(--ink);letter-spacing:0;line-height:1.1}
.scroll-cue{position:absolute;bottom:28px;inset-inline-end:var(--gutter);font-size:10px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;writing-mode:vertical-rl}
.scroll-cue::after{content:"";display:block;width:1px;height:60px;background:linear-gradient(var(--gold),transparent);margin:14px auto 0;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* about */
.about{
  display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  padding:72px var(--gutter);max-width:1180px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.portrait{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.92);transition:filter 1.2s var(--ease), transform 1.6s var(--ease)}
.portrait:hover img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.04)}
.portrait::after{content:"";position:absolute;inset:10px;border:1px solid var(--gold-soft);pointer-events:none}
.about h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,4vw,52px);line-height:1.05;margin-bottom:6px}
.about .role{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
html[lang="he"] .about .role{letter-spacing:.08em;font-size:13px}
.about p{color:var(--ink-2);max-width:60ch;font-size:15.5px}
.about .sig{margin-top:22px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--ink)}

/* collections grid */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:96px var(--gutter) 36px;max-width:1600px;margin:0 auto}
.section-head h3{font-family:var(--display);font-weight:300;font-size:clamp(30px,4vw,56px);line-height:1}
.section-head p{color:var(--muted);font-size:13px;max-width:38ch}
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
  gap:clamp(14px,1.6vw,26px);padding:0 var(--gutter) 120px;max-width:1600px;margin:0 auto;
}
.card{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2);
  isolation:isolate;cursor:pointer;
  opacity:0;transform:translateY(40px);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.card.in{opacity:1;transform:none}
.card .layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.8s ease-in-out, transform 7s linear, filter 1.2s var(--ease);
  filter:saturate(.8) brightness(.78);
}
.card .layer.on{opacity:1;transform:scale(1)}
.card:hover .layer,.card.live .layer{filter:saturate(1) brightness(.9)}
.card::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top, rgba(8,7,6,.92) 0%, rgba(8,7,6,.2) 45%, rgba(8,7,6,0) 70%);transition:opacity 1s}
.card::after{content:"";position:absolute;inset:14px;z-index:3;border:1px solid rgba(236,230,218,0);transition:border-color 1s var(--ease), inset 1s var(--ease)}
.card:hover::after{border-color:var(--gold-soft);inset:18px}
.card-info{position:absolute;inset:auto 0 0 0;z-index:4;padding:28px 30px}
.card-num{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);font-size:18px;display:flex;justify-content:space-between;align-items:baseline}
.card-num small{font-family:var(--body);font-style:normal;font-size:10px;letter-spacing:.3em;color:var(--ink-2);text-transform:uppercase}
html[lang="he"] .card-num small{letter-spacing:.05em;font-size:12px}
.card h4{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.4vw,34px);line-height:1.05;margin-top:8px}
.card .alt{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.04em}
.card .enter{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);
  opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease), transform .8s var(--ease)
}
html[lang="he"] .card .enter{letter-spacing:.06em;font-size:12px}
.card .enter::after{content:"";width:34px;height:1px;background:var(--gold);transition:width .8s var(--ease)}
.card:hover .enter{opacity:1;transform:none}
.card:hover .enter::after{width:60px}
.card .dots{position:absolute;top:24px;inset-inline-end:26px;z-index:4;display:flex;gap:5px}
.card .dots i{width:4px;height:4px;border-radius:50%;background:rgba(236,230,218,.25);transition:background .6s}
.card .dots i.on{background:var(--gold)}

/* ---------- COLLECTION PAGE ---------- */
.c-hero{min-height:88vh;display:grid;align-content:end;padding:150px var(--gutter) 72px;position:relative;overflow:hidden}
.c-hero .bg{position:absolute;inset:0;z-index:-1}
.c-hero .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.38) saturate(.8);animation:slowzoom 22s linear forwards}
@keyframes slowzoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.c-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(12,11,10,.2), var(--bg) 96%)}
.back{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);margin-bottom:46px;transition:color .4s}
html[lang="he"] .back{letter-spacing:.06em;font-size:13px}
.back:hover{color:var(--gold)}
.back .arr{display:inline-block;transition:transform .5s var(--ease)}
.back:hover .arr{transform:translateX(-6px)}
html[dir="rtl"] .back .arr{transform:scaleX(-1)}
html[dir="rtl"] .back:hover .arr{transform:scaleX(-1) translateX(-6px)}
.c-hero .num{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--gold)}
.c-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(46px,8vw,128px);line-height:.95;margin:10px 0 8px;max-width:14ch}
.c-hero .alt{color:var(--muted);font-size:14px;letter-spacing:.06em}
.c-hero .statement{margin-top:34px;max-width:62ch;font-size:clamp(15px,1.3vw,18px);color:var(--ink-2);line-height:1.75}
.c-hero .statement::first-letter{font-family:var(--display);font-size:3.2em;float:inline-start;line-height:.8;margin-inline-end:10px;margin-top:6px;color:var(--gold)}
.c-hero .count{margin-top:28px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

.works{max-width:1560px;margin:0 auto;padding:40px var(--gutter) 60px}
.work{
  display:grid;grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr);gap:clamp(28px,5vw,96px);
  align-items:center;padding:clamp(48px,8vh,110px) 0;border-bottom:1px solid var(--line);
}
.work:nth-child(even){grid-template-columns:minmax(260px,1fr) minmax(0,1.75fr)}
.work:nth-child(even) .w-media{order:2}
.w-media{position:relative;overflow:hidden;cursor:zoom-in;background:var(--bg-2);
  clip-path:inset(12% 0 12% 0);transition:clip-path 1.6s var(--ease-slow)}
.work.in .w-media{clip-path:inset(0 0 0 0)}
.w-media img{width:100%;height:auto;max-height:82vh;object-fit:contain;margin:0 auto;transform:scale(1.12);transition:transform 2.4s var(--ease-slow), filter 1s}
.work.in .w-media img{transform:scale(1)}
.w-media:hover img{filter:brightness(1.06)}
.w-text{opacity:0;transform:translateY(30px);transition:opacity 1.3s var(--ease) .35s, transform 1.3s var(--ease) .35s}
.work.in .w-text{opacity:1;transform:none}
.w-code{font-size:11px;letter-spacing:.34em;color:var(--gold);text-transform:uppercase;display:flex;align-items:center;gap:14px}
.w-code::after{content:"";flex:0 0 46px;height:1px;background:var(--gold-soft)}
.w-text h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,3.4vw,54px);line-height:1.02;margin:18px 0 6px}
.w-text .alt{font-size:13px;color:var(--muted);letter-spacing:.04em}
.w-text p{margin-top:24px;color:var(--ink-2);font-size:16px;max-width:42ch;line-height:1.75}
.w-text .w-meta{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:6px}
html[lang="he"] .w-text .w-meta{letter-spacing:.04em;font-size:12.5px}
.w-text .view{margin-top:26px;display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
html[lang="he"] .w-text .view{letter-spacing:.06em;font-size:13px}
.w-text .view::before{content:"";width:28px;height:1px;background:var(--gold);transition:width .6s var(--ease)}
.w-text .view:hover::before{width:54px}

.c-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:20px}
.c-nav a{position:relative;overflow:hidden;padding:70px var(--gutter);min-height:260px;display:flex;flex-direction:column;justify-content:end}
.c-nav a + a{border-inline-start:1px solid var(--line);text-align:end;align-items:flex-end}
.c-nav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;filter:brightness(.25) saturate(.6);transition:filter 1.2s var(--ease), transform 3s var(--ease);transform:scale(1.05)}
.c-nav a:hover img{filter:brightness(.45) saturate(.9);transform:scale(1)}
.c-nav small{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
html[lang="he"] .c-nav small{letter-spacing:.06em;font-size:12px}
.c-nav span{font-family:var(--display);font-weight:300;font-size:clamp(24px,3vw,42px);margin-top:8px;line-height:1.05}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:85;background:rgba(5,5,4,.97);display:grid;grid-template-columns:80px 1fr 80px;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .9s var(--ease)}
.lightbox.on{opacity:1;pointer-events:all}
.lb-figure{display:flex;flex-direction:column;align-items:center;gap:18px;height:100vh;justify-content:center;padding:40px 0}
.lb-img{max-width:100%;max-height:84vh;object-fit:contain;opacity:0;transform:scale(.985);transition:opacity .8s var(--ease), transform 1.2s var(--ease)}
.lb-img.ready{opacity:1;transform:none}
.lb-cap{font-family:var(--display);font-size:22px;color:var(--ink-2);text-align:center}
.lb-cap small{display:block;font-family:var(--body);font-size:10px;letter-spacing:.3em;color:var(--gold);margin-bottom:4px}
.lb-nav,.lb-close{font-family:"Cormorant Garamond",serif;font-size:46px;color:var(--ink-2);transition:color .3s;height:100%}
.lb-nav:hover,.lb-close:hover{color:var(--gold)}
.lb-close{position:absolute;top:18px;inset-inline-end:28px;height:auto;font-size:40px;z-index:2}
html[dir="rtl"] .lb-prev{order:3}
html[dir="rtl"] .lb-next{order:1}
html[dir="rtl"] .lb-figure{order:2}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:34px var(--gutter);color:var(--muted);font-size:12px;letter-spacing:.06em}
.footer-inner{max-width:1600px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.footer-dot{color:var(--gold)}

/* ---------- language crossfade ---------- */
.lang-fade [data-i18n], .lang-fade .stage{transition:opacity .45s}
body.switching .stage, body.switching [data-i18n]{opacity:0}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .about{grid-template-columns:1fr;text-align:start}
  .portrait{max-width:200px}
  .work, .work:nth-child(even){grid-template-columns:1fr;gap:26px}
  .work:nth-child(even) .w-media{order:0}
  .c-nav{grid-template-columns:1fr}
  .c-nav a + a{border-inline-start:0;border-top:1px solid var(--line)}
  .lightbox{grid-template-columns:44px 1fr 44px}
  .nav-about{display:none}
  .mark-name{display:none}
  .section-head{flex-direction:column;align-items:start}
}
@media (hover:none){ .card .enter{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}