/* Amit Shamir — portfolio. Minimal, media-first (talbaltuch / dmwa model). */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f3f1;
  --ink:#111;
  --muted:#8a8781;
  --gap:6px;
}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  min-height:100vh;
}

/* ---- header ----
   Sticky at the top on every page, per Amit (§5.1) — stays pinned while the
   page scrolls beneath it. NO solid background — only the words float over
   whatever scrolls beneath (no white bar). Legibility over any background
   comes from mix-blend-mode:difference (ref: dmwa.co/projects/adidas) — the
   text auto-inverts against whatever colour is behind it.
   Uses the EXACT same 2-col grid + gap as the project grid below it, so
   "Amit Shamir" (col 1) and "About" (col 2) align to the grid's own column
   edges. */
.site-head{
  position:sticky;top:0;z-index:20;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:center;
  padding:16px var(--gap);
  mix-blend-mode:difference;
  color:#fff;
}
/* Both header links share IDENTICAL typography — font, size, weight, line-height.
   12px (reverted back from the +2pt bump). Displayed in caps per Amit — the
   underlying text stays normal-case (accessible, matches roll-effect markup),
   text-transform handles the visual caps. */
.site-head a{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  color:inherit;
}

@media (max-width:720px){
  .site-head{grid-template-columns:1fr}
}

/* nav hover: vertical text roll — same word rolls up, identical copy arrives from below.
   No colour/weight change, only the upward slide. */
.roll{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2;vertical-align:top}
.roll__inner{display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.6,.02,.15,1)}
.roll__inner>span{display:block;height:1.2em;line-height:1.2}
.roll:hover .roll__inner,
.roll:focus-visible .roll__inner{transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){ .roll__inner{transition:none} }

/* ---- grid: 2 columns, Baltuch-style ---- */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  padding:var(--gap);
  padding-top:0; /* header is in normal flow now, no fixed-header offset needed */
}
.tile{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:#e7e5e1;
  /* reveal start state: hidden by default, JS adds .is-in via IntersectionObserver */
  opacity:0;
  transform:translateY(34px);
  filter:saturate(.5);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1), filter .8s ease;
  will-change:opacity, transform, filter;
}
.tile.is-in{opacity:1;transform:none;filter:saturate(1)}
.tile__poster,.tile__gif{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.tile__gif{z-index:1}          /* sits above the poster while hovering */
/* white tag — name + year, top-left, on hover only (talbaltuch model) */
.tile__tag{
  position:absolute;top:0;left:0;z-index:2;
  padding:7px 12px;
  background:#fff;color:#111;
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.01em;white-space:nowrap;
  opacity:0;transition:opacity .18s ease;
  pointer-events:none;
}
.tile:hover .tile__tag,
.tile:focus-visible .tile__tag{opacity:1}


@media (max-width:720px){
  .grid{grid-template-columns:1fr}   /* stack on mobile */
  .tile{aspect-ratio:16/10}
}

@media (prefers-reduced-motion:reduce){
  .tile{opacity:1 !important;transform:none !important;filter:none !important;transition:none}
}

/* ---- project page (talbaltuch.com/The-Tylenol-Murders model, §5.2) ----
   Normal document flow throughout — no sticky/pinned card, no fixed video box.
   Order: 2-col info block -> full-width hero -> flexible materials grid. */
.proj-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  padding:8px var(--gap) 28px;
}
.proj-title{
  font-family:var(--font-sans);
  font-size:40px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.proj-blurb{
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.5;
  max-width:44ch;
}
.proj-info__col--facts{padding-top:6px}
.proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.proj-tags .tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.02em;
  border:1px solid var(--ink);
  padding:4px 9px;
  white-space:nowrap;
}
.proj-tools{font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* small gap between the info text and the hero video, per Amit */
.proj-hero{padding:0 var(--gap);padding-top:10px}
/* aspect-ratio is a FALLBACK only — the browser uses the video's real
   intrinsic width/height once metadata loads; this just stops the box
   collapsing to the ugly 300x150 <video> default before/if that happens. */
.proj-hero__media{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}

/* materials: grouped into Amit's own real sections (Snaps, Developing the
   Visual Language, Selected Frames, etc.) — same order as the live site.
   Each section is its own labeled 2-col grid block. */
.proj-materials{margin-top:calc(var(--gap) * 3)}
.proj-section{margin-bottom:calc(var(--gap) * 4)}
/* Section titles (Snaps, Selected Frames, etc.) match the header's typography
   EXACTLY — same font, size, weight, line-height as "Amit Shamir" / "About". */
.proj-section__title{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--ink);
  padding:0 var(--gap) 10px;
}
/* .proj-section__grid reuses .grid's column/gap rules (it also has .grid).
   align-items:start is the fix for the white-gap bug: .grid's default
   align-items:stretch was forcing each paired tile's DIV to match the
   TALLER sibling's row height, but the <img> inside only sizes to its own
   natural aspect ratio — leaving blank space in the shorter tile's cell.
   :start lets each tile size to its own content, no stretched empty box. */
.proj-section__grid{align-items:start}

/* override .tile's fixed 16:9 cover-crop here so existing stills keep their
   own natural aspect ratio (no crop) — home tiles elsewhere are unaffected */
.proj-tile{aspect-ratio:auto;overflow:visible}
.proj-tile .tile__poster{position:static;width:100%;height:auto;object-fit:initial;display:block}
/* a lone image in its row spans both grid columns — full width, no blank
   space next to it. A paired row's two images each keep their own column. */
.proj-tile--full{grid-column:1 / -1}

.proj-back{font-family:var(--font-mono);font-size:12px;padding:28px var(--gap) 64px}
.proj-back a{color:inherit;text-decoration:none}

@media (max-width:720px){
  .proj-info{grid-template-columns:1fr}
  .proj-title{font-size:30px}
}

/* ---- about: statement + draggable line illustration (drawing above the text) ---- */
.about{padding:6vh var(--gap) 4vh;text-align:center}
.about__stage{position:relative;min-height:calc(100vh - 150px);opacity:0;transition:opacity .9s ease}
.about__stage.is-in{opacity:1}
.about__text{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);width:min(94vw,1150px);margin:0;color:var(--ink);font-family:var(--font-sans);font-weight:700;font-size:clamp(14px,2.1vw,28px);line-height:1.05;letter-spacing:-.005em;text-transform:uppercase}
.about__art{--tx:0px;--ty:0px;position:absolute;left:var(--lx,50%);top:4%;width:clamp(170px,19vw,300px);aspect-ratio:1/1;background:#000;margin-left:calc(clamp(170px,19vw,300px) / -2);transform:translate(var(--tx),var(--ty));cursor:grab;touch-action:none;user-select:none;z-index:2;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease}
.about__art.is-drag{cursor:grabbing;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.about__art img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.about__hint{margin-top:18px;font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.02em}
.about__index{margin-top:6vh;font-family:var(--font-sans);font-weight:700;font-size:15px}
@media (max-width:720px){.about__text{top:66%;font-size:13px}.about__stage{min-height:calc(100vh - 120px)}}
@media (prefers-reduced-motion:reduce){.about__stage{opacity:1;transition:none}}

/* ---- contact footer ---- */
.site-foot{padding:var(--gap);padding-top:56px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.foot-invite{line-height:1.4;margin:0 0 14px var(--gap)}
.foot-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--gap)}
.foot-card{display:flex;justify-content:space-between;align-items:flex-start;min-height:0;padding:8px 10px;background:#fff;color:var(--ink);text-decoration:none;border-radius:4px;text-transform:none}
.foot-card:hover{background:var(--ink);color:#fff}
.foot-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:56px;padding:0 var(--gap) 16px;color:var(--muted)}

/* section intro text (Genie process notes) */
.proj-section__text{font-family:var(--font-sans);font-size:15px;line-height:1.5;max-width:60ch;padding:0 var(--gap) 14px}

/* ---- story sections (text + media), used by Genie pages ---- */
.proj-section--story{
  display:grid;
  grid-template-columns:minmax(240px,5fr) 7fr;
  gap:var(--gap) calc(var(--gap) * 3);
  align-items:start;
  padding:0 var(--gap);
  margin-bottom:calc(var(--gap) * 14);
}
.proj-story__head{padding-top:4px}
.proj-story__num{display:block;font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.02em;margin-bottom:18px}
.proj-story__title{font-family:var(--font-sans);font-size:32px;font-weight:700;line-height:1.05;letter-spacing:-.01em;margin-bottom:16px}
.proj-section--story .proj-section__text{padding:0;max-width:38ch}
.proj-section--story .proj-section__grid{padding:0}
@media (max-width:900px){
  .proj-section--story{grid-template-columns:1fr;gap:20px;margin-bottom:calc(var(--gap) * 10)}
  .proj-story__title{font-size:26px}
}

/* image heroes keep their own aspect ratio (no 16:9 crop) */
img.proj-hero__media{aspect-ratio:auto;object-fit:initial;background:none}

.proj-link{margin-top:14px;font-family:var(--font-mono);font-size:12px}
.proj-link a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* website screenshots: plain, hairline border, nothing else */
.proj-tile--shot .tile__poster,.proj-hero__media--shot{border:1px solid #e1dcd5;border-radius:6px;background:#fff}

.proj-section__link{margin-top:16px;font-family:var(--font-mono);font-size:12px}
.proj-section__link a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* film first: video at the very top (clear of the sticky header), info below */
.hero-first .proj-hero{padding-top:44px}
.hero-first .proj-info{padding-top:28px}

/* the film must read as a video: dark frame behind the poster */
.hero-first .proj-hero__media{background:#2a0836;aspect-ratio:16/9;object-fit:contain}

/* big divider between the two halves of a project (e.g. Motion / Brand Development) */
.proj-divider{font-family:var(--font-sans);font-size:44px;font-weight:700;line-height:1.05;letter-spacing:-.01em;padding:96px var(--gap) 28px;border-top:1px solid #e1dcd5;margin-top:48px}
@media (max-width:720px){.proj-divider{font-size:30px;padding-top:64px}}
.proj-hero__label{padding-top:0}

/* smaller images (old-language references) */
.proj-section--small .proj-section__grid{max-width:62%}
@media (max-width:900px){.proj-section--small .proj-section__grid{max-width:100%}}
/* section on a deep plum ground */
.proj-section--dark{background:#2a0836;padding:28px var(--gap) 32px;margin-top:48px}
.proj-section--dark .proj-section__title{color:#fff;padding-left:0}
.proj-section--dark .proj-section__grid{padding:0}

/* transparent PNGs (characters) sit straight on the page */
.proj-tile{background:transparent}

.proj-section--story .proj-section__text+.proj-section__text{margin-top:14px}

.proj-stack{display:flex;flex-direction:column;gap:var(--gap)}
.proj-tile .proj-stack .tile__poster{position:static;width:100%;height:auto;display:block}

.proj-section--tight{margin-bottom:var(--gap)}
.proj-section--tight+.proj-section .proj-section__grid{margin-top:0}

/* vertical (9:16) videos: two side by side without becoming huge */
.proj-section--narrow .proj-section__grid{max-width:46%}
@media (max-width:900px){.proj-section--narrow .proj-section__grid{max-width:100%}}

/* looping videos inside phone frames (Lo'mshane, top of page) */
.proj-phones{display:flex;justify-content:center;align-items:center;gap:clamp(24px,5vw,72px);padding:56px var(--gap) 72px}
.proj-phone{position:relative;width:min(240px,36vw);padding:9px;background:#141414;border-radius:44px;box-shadow:0 24px 60px rgba(0,0,0,.22),inset 0 0 0 2px #2c2c2c}
.proj-phone video{display:block;width:100%;aspect-ratio:9/19.5;object-fit:cover;border-radius:36px;background:#000}
.proj-phone__notch{position:absolute;top:18px;left:50%;width:30%;height:16px;margin-left:-15%;background:#141414;border-radius:10px;z-index:2}

.proj-phones--solo{padding:0;justify-content:flex-start}
.proj-section--story .proj-phones--solo{justify-content:flex-start}

.proj-side{display:block;width:calc(min(240px,36vw) - 18px);aspect-ratio:9/19.5;object-fit:cover;border-radius:36px;background:#ddd}
.proj-phones--solo{gap:clamp(16px,3vw,40px);align-items:center;flex-wrap:wrap}

/* ---- About v2: two stacked panels on a dark ground ---- */
.about{padding:0;text-align:left}
.about2{background:#3a3b3d;padding:clamp(24px,6vw,96px) clamp(16px,12vw,240px);display:grid;gap:clamp(24px,5vw,72px)}
.about2__panel{position:relative;background:#f6f6f4;color:#111;aspect-ratio:1.6/1;overflow:hidden;font-family:var(--font-mono)}
.about2__name{position:absolute;left:2.4%;top:3%;margin:0;font-family:var(--font-sans);font-weight:800;font-size:clamp(20px,3.6vw,52px);line-height:.95;letter-spacing:-.03em}
.about2__name span{display:block;margin-top:.1em;text-align:right;font-family:var(--font-mono);font-weight:400;font-size:.42em;letter-spacing:0}
.about2__line{position:absolute;left:0;top:26%;width:33%;height:auto;mix-blend-mode:multiply}
.about2__photo{position:absolute;display:block;object-fit:cover}
.about2__panel--one .about2__photo{right:0;top:9%;width:57%;height:58%}
.about2__text{position:absolute;margin:0;font-size:clamp(9px,1.05vw,15px);line-height:1.18;text-align:justify;text-justify:inter-word}
.about2__panel--one .about2__text{left:1.5%;right:1.5%;bottom:7%}
.about2__panel--two .about2__photo--tall{left:15.5%;top:0;width:28%;height:100%}
.about2__text--side{left:44%;right:1.5%;top:12%}
.about2__circle{position:absolute;left:35%;bottom:2%;width:19%;height:auto}
.about2__caption{position:absolute;left:2.4%;bottom:5%;margin:0;font-size:clamp(9px,1vw,14px);line-height:1.2;max-width:12%}
@media (max-width:720px){
  .about2{padding:20px 12px}
  .about2__panel{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;gap:12px;padding:14px}
  .about2__name,.about2__line,.about2__photo,.about2__text,.about2__circle,.about2__caption{position:static;width:auto}
  .about2__panel--one .about2__photo,.about2__panel--two .about2__photo--tall{width:100%;height:auto;aspect-ratio:4/5}
  .about2__line{max-width:120px;mix-blend-mode:multiply}
  .about2__text{font-size:12px}
  .about2__circle{max-width:140px}
  .about2__caption{max-width:none}
}

/* About v2, tiles version: the two black tiles replace the photos */
.about2__panel--one .about2__photo{right:0;top:9%;width:auto;height:62%;aspect-ratio:1/1;background:#000}
.about2__panel--two .about2__photo--tall{left:15.5%;top:0;width:auto;height:80%;aspect-ratio:1/1;background:#000}
.about2__text--side{left:70%;right:1.5%;top:12%}
.about2__circle{left:57%;bottom:3%;width:17%}
@media (max-width:720px){.about2__panel--one .about2__photo,.about2__panel--two .about2__photo--tall{width:100%;height:auto;aspect-ratio:1/1}}

/* About v2, final: photo in panel 1, the two tiles stacked in the tall slot of panel 2 */
.about2__panel--one .about2__photo{right:0;top:9%;width:57%;height:58%;aspect-ratio:auto;background:none}
.about2__stack{position:absolute;left:15.5%;top:0;width:28%;height:100%;display:flex;flex-direction:column;justify-content:space-between;background:#000}
.about2__stack img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.about2__text--side{left:44%;right:1.5%;top:12%}
.about2__circle{left:40%;bottom:0;width:18%}
@media (max-width:720px){.about2__stack{position:static;width:100%;height:auto;gap:0}.about2__panel--one .about2__photo{width:100%;height:auto;aspect-ratio:4/5}}

/* ---- About v3: "about me:" style ---- */
.about{padding:0}
.about3{max-width:860px;margin:0 auto;padding:clamp(24px,6vw,72px) var(--gap) clamp(40px,8vw,110px);display:flex;flex-direction:column;align-items:center;gap:clamp(24px,5vw,56px)}
.about3__mark{width:clamp(110px,16vw,190px);height:auto}
.about3__row{display:grid;grid-template-columns:minmax(150px,280px) 1fr;gap:clamp(20px,4vw,48px);align-items:center;width:100%}
.about3__frame{position:relative;margin:0;padding:clamp(8px,1.4vw,16px)}
.about3__tiles{display:grid;gap:0;background:#000}
.about3__tiles img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.about3__outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.about3__outline path{fill:none;stroke:var(--ink,#111);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.about3__facts{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px clamp(14px,2.4vw,30px);align-items:baseline;font-size:clamp(12px,1.25vw,15px);line-height:1.45}
.about3__facts dt{font-family:var(--font-sans);font-weight:500;text-transform:uppercase;letter-spacing:.01em}
.about3__facts dd{margin:0;font-family:var(--font-mono)}
@media (max-width:640px){.about3__row{grid-template-columns:1fr}.about3__frame{max-width:260px;justify-self:center}}

.about3__text{margin:0;font-family:var(--font-mono);font-size:clamp(12px,1.3vw,16px);line-height:1.5}

/* ---- About v4: big graphic left, statement + short paragraphs right ---- */
.about4{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start;padding:clamp(24px,5vw,64px) var(--gap) clamp(48px,8vw,120px)}
.about4__art{display:flex;justify-content:center;align-items:flex-start}
.about4__art img{width:min(100%,520px);height:auto;display:block}
.about4__copy{font-family:var(--font-sans);font-size:clamp(14px,1.35vw,19px);line-height:1.45;max-width:46ch}
.about4__copy p{margin:0 0 1.4em}
.about4__label{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.about4__statement{margin:0 0 1.1em;font-weight:400;font-size:clamp(26px,3.3vw,46px);line-height:1.08;letter-spacing:-.02em;max-width:18ch}
.about4__k{font-family:var(--font-mono);font-size:.78em;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.about4__mail a{font-weight:700;color:var(--ink);text-decoration:none}
.about4__mail a:hover{text-decoration:underline}
@media (max-width:760px){.about4{grid-template-columns:1fr}.about4__art img{max-width:300px}}

/* About: content centred vertically between header and footer */
.about{min-height:calc(100vh - 400px);display:flex;align-items:center;justify-content:center}
.about3{padding-top:0;padding-bottom:0}
@media (max-width:760px){.about{min-height:0}}