/* ============================================================
   ALMOG STUDIO — landscape, in code
   One image. One mark. Then a swipe through the work.
   Palette of place · golden ratio · growth-easing.
   ============================================================ */

:root {
  /* warm monochrome — black, cream, grey. timeless gallery. */
  --ink:    #16140f;        /* warm near-black */
  --bark:   #3a352c;        /* warm dark grey — secondary text */
  --lichen: #cfc8b8;        /* warm light — hover on dark */
  --stone:  #9a958b;        /* warm grey */
  --linen:  #e9e3d6;        /* cream — image wells */
  --paper:  #f4f1ea;        /* cream — page */
  --line:   #e4dfd3;
  --olive:  #16140f;        /* accent = ink (true monochrome) */
  --white:  #ffffff;

  --max: 1280px;
  --phi: 1.618;
  /* fibonacci spacing */
  --f1: 8px; --f2: 13px; --f3: 21px; --f4: 34px;
  --f5: 55px; --f6: 89px; --f7: 144px; --f8: 233px;

  /* growth easing — sigmoid, like a leaf unfurling */
  --grow: cubic-bezier(0.22, 1, 0.36, 1);
  --soft: cubic-bezier(0.16, 1, 0.3, 1);

  --display: "Clash Display", "Assistant", system-ui, sans-serif;
  --sans: "Satoshi", "Assistant", system-ui, sans-serif;
  --hebrew: "Assistant", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--olive); color: var(--paper); }

.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;
}

/* progress strip */
#scroll-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--olive); transform: scaleX(0); transform-origin: left;
  z-index: 9999; pointer-events: none; will-change: transform;
}

/* ===================== NAV ===================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 3vw, 26px) clamp(16px, 4vw, 44px);
  mix-blend-mode: difference;            /* mark reads on any image */
}
.nav-mark img { height: clamp(28px, 4vw, 38px); width: auto; filter: invert(1); transition: transform 0.6s var(--grow); }
.nav-mark:hover img { transform: rotate(-7deg) scale(1.06); }

.nav-toggle {
  width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
}
.nav-toggle span {
  display: block; height: 1.5px; background: var(--white); border-radius: 2px;
  transition: width 0.4s var(--grow), transform 0.4s var(--grow), opacity 0.3s;
}
.nav-toggle span:nth-child(1) { width: 26px; }
.nav-toggle span:nth-child(2) { width: 17px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { width: 24px; transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { width: 24px; transform: translateY(-3.75px) rotate(-45deg); }

/* overlay menu */
.nav-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--f5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--soft), visibility 0.5s;
}
.nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: clamp(14px, 3vh, 28px); }
.nav-overlay li {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s var(--grow), transform 0.6s var(--grow);
  transition-delay: calc(var(--i) * 0.06s);
}
.nav-overlay.open li { opacity: 1; transform: none; }
.nav-overlay a {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 9vw, 72px); line-height: 1; letter-spacing: -0.02em;
  transition: color 0.4s, letter-spacing 0.4s var(--grow);
}
.nav-overlay a:hover { color: var(--lichen); letter-spacing: 0.01em; }
.nav-foot {
  position: absolute; bottom: clamp(24px, 5vh, 44px);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--stone);
}

/* ===================== HERO ===================== */
.hero {
  position: relative; min-height: 100svh; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; background: var(--ink);
}
.hero-image { position: absolute; inset: 0; }
.hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  animation: slow-zoom 16s var(--soft) both;
}
@keyframes slow-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* before the real photo lands: a living gradient, not a void */
.hero--empty .hero-image { display: none; }
.hero--empty {
  background:
    radial-gradient(120% 80% at 50% 0%, #2c2720 0%, transparent 60%),
    linear-gradient(170deg, #17140f 0%, #221d17 55%, #2b241c 100%);
}
.hero--empty .hero-veil { opacity: 0.35; }

.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,16,13,0.7) 0%, transparent 45%);
}
.hero-stage {
  position: relative; z-index: 2; text-align: center;
  padding-bottom: clamp(96px, 18vh, 200px);
  display: flex; flex-direction: column; align-items: center; gap: var(--f3);
}
.hero-wordmark {
  width: min(360px, 64vw); filter: invert(1) brightness(1.6);
  animation: rise 1.4s var(--grow) 0.2s both;
}
.hero-place {
  font-size: clamp(11px, 1.4vw, 13px); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--linen); opacity: 0.85;
  animation: rise 1.4s var(--grow) 0.45s both;
}
.hero-cue {
  position: absolute; left: 50%; bottom: clamp(24px, 5vh, 40px); transform: translateX(-50%);
  z-index: 3; width: 24px; height: 48px; display: flex; justify-content: center;
  animation: fade 1.4s ease 0.9s both;
}
.hero-cue span {
  width: 1px; height: 100%;
  background: linear-gradient(var(--linen), transparent);
  animation: drip 2.4s ease-in-out infinite;
}
@keyframes drip { 0%,100% { transform: scaleY(1); opacity: 0.9; } 50% { transform: scaleY(0.5); opacity: 0.4; } }

/* ===================== REEL (carousel) ===================== */
.reel-section { padding: clamp(48px, 9vh, 96px) 0 clamp(40px, 8vh, 80px); }
.reel-head {
  margin: 0 auto clamp(24px, 5vh, 44px);
  padding: 0 clamp(16px, 4vw, 44px);
  text-align: center;
}
.kicker {
  font-family: var(--display); font-size: clamp(12px, 1.4vw, 14px); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bark);
}
.reel-all {
  display: flex; width: fit-content; gap: 8px; align-items: center;
  margin: clamp(22px, 4vh, 36px) auto 0;
  font-family: var(--display); font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: 0.02em; color: var(--ink);
  transition: gap 0.3s var(--grow);
}
.reel-all em { font-style: normal; }
.reel-all:hover { gap: 13px; }

.reel {
  display: flex; gap: clamp(14px, 2vw, 26px);
  padding: 0 clamp(16px, 4vw, 44px) 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-padding-left: clamp(16px, 4vw, 44px);
}
.reel::-webkit-scrollbar { display: none; }

.card {
  scroll-snap-align: start; scroll-snap-stop: always;
  flex: 0 0 auto; width: min(78vw, 420px);
  display: flex; flex-direction: column; gap: var(--f2);
  transition: transform 0.5s var(--grow);
}
.card-media {
  position: relative; aspect-ratio: 1 / 1.272;     /* √φ golden rectangle */
  background: var(--linen); overflow: hidden; border-radius: 2px;
}
/* empty well reads as an intentional gallery mat */
.card-media::before {
  content: ""; position: absolute; inset: 12px; z-index: 0;
  border: 1px solid rgba(22,20,15,0.10);
  transition: opacity 0.6s ease;
}
.card-media img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: transform 1.2s var(--soft), opacity 0.8s ease;
}
.card-media:has(img.is-loaded)::before { opacity: 0; }
.card-media img.is-loaded { opacity: 1; }
.card:hover .card-media img.is-loaded { transform: scale(1.04); }

.card-media.is-wip { display: flex; align-items: center; justify-content: center; }
.wip-stamp {
  font-family: var(--hebrew); font-weight: 700; font-size: clamp(15px, 2vw, 19px);
  color: var(--bark); border: 1.5px solid var(--bark); padding: 8px 16px;
  transform: rotate(-4deg); background: var(--paper);
}

.card-meta { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.card-idx { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--stone); }
.card-title { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.02; letter-spacing: -0.01em; }
.card-place { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }

.reel-pager { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.reel-pager .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line);
  transition: background 0.4s, transform 0.4s var(--grow);
}
.reel-pager .dot.is-active { background: var(--olive); transform: scale(1.25); }

/* ===================== BIO ===================== */
.bio {
  max-width: 760px; margin: 0 auto;
  padding: clamp(72px, 14vh, 160px) clamp(20px, 5vw, 40px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--f4);
}
.bio-line {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 3.4vw, 38px); line-height: 1.22; letter-spacing: -0.01em;
}
.bio-more {
  font-size: 14px; letter-spacing: 0.04em; color: var(--olive);
  display: inline-flex; gap: 8px; align-items: center; transition: gap 0.3s var(--grow);
}
.bio-more:hover { gap: 13px; }

/* ===================== CONTACT ===================== */
.contact {
  background: var(--ink); color: var(--paper);
  padding: clamp(80px, 16vh, 180px) clamp(20px, 5vw, 44px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--f5);
}
.contact-h {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(44px, 10vw, 120px); line-height: 0.95; letter-spacing: -0.03em;
}
.contact-list { list-style: none; display: flex; flex-direction: column; gap: var(--f2); }
.contact-list a {
  font-size: clamp(15px, 1.8vw, 18px); letter-spacing: 0.03em; color: var(--linen);
  transition: color 0.3s, letter-spacing 0.3s var(--grow);
}
.contact-list a:hover { color: var(--lichen); letter-spacing: 0.06em; }

/* ===================== FOOTER ===================== */
.footer {
  background: var(--ink); color: var(--paper);
  padding: 0 clamp(20px, 5vw, 44px) clamp(40px, 7vh, 64px);
  display: flex; flex-direction: column; align-items: center; gap: var(--f4);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.footer-mark { height: 34px; width: auto; filter: invert(1); opacity: 0.85; margin-top: clamp(40px, 7vh, 64px); }
.footer-links { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 30px); justify-content: center; }
.footer-links a {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper); opacity: 0.6; transition: opacity 0.3s;
}
.footer-links a:hover { opacity: 1; }
.footer-fine { font-size: 10px; letter-spacing: 0.18em; color: var(--stone); }

/* ===================== ANIMATIONS ===================== */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--grow), transform 0.9s var(--grow); }
.reveal.in { opacity: 1; transform: none; }

/* ===================== ACCESSIBILITY ===================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.nav-overlay :focus-visible, .contact :focus-visible, .footer :focus-visible { outline-color: var(--lichen); }

/* ===================== SMALL PHONES ===================== */
@media (max-width: 480px) {
  .card { width: 80vw; }
  .reel-head { align-items: center; }
  .bio-line { font-size: clamp(20px, 6vw, 26px); }
}