/* ============================================================
   Tamar Iancu — portfolio styles (light, editorial)
   Fonts, colors, type scale measured from the live Wix Studio site.
   ============================================================ */
/* Manrope in two cuts the live site actually uses: regular (extralight master) + semibold */
@font-face{ font-family:"Manrope"; src:url("/assets/manrope.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Manrope"; src:url("/assets/manrope2.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thermal"; src:url("/assets/thermal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }

:root{
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;   /* headings, titles, bios */
  --serif:"Thermal",Georgia,"Times New Roman",serif;     /* brand, body, captions, intros */
  --ink:#2f2b36;
  --muted:rgba(47,43,54,.78);
  --line:rgba(47,43,54,.14);
  --bg:#ffffff;
  --edge:clamp(20px,3.4vw,58px);          /* content side margin (Wix ~49px @1440) */
  --maxw:1360px;
  --gap:clamp(14px,2vw,30px);             /* gallery gutter (Wix ~29px @1440) */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:16px; line-height:1.4;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--sans); font-weight:400; margin:0; }
p{ margin:0; }

.wrap{ width:min(100vw - var(--edge)*2, var(--maxw)); margin:0 auto; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--edge);
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
}
.brand{ font-family:var(--serif); font-size:16px; line-height:1.4; letter-spacing:.01em; color:var(--ink); }
.hamburger{ background:none; border:0; cursor:pointer; padding:8px; }
.hamburger span{ display:block; width:26px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; }

/* ---------- hero (home) ---------- */
.hero{ padding:clamp(60px,8.2vw,150px) 0 clamp(30px,3.75vw,80px); }
.hero .wrap{ width:100%; max-width:none; }   /* hero is full-bleed; margins come from the title itself */
.hero-title{
  font-family:var(--sans); font-weight:400;
  /* Wix scales the hero with viewport width: font 2.846vw, left margin 13.8vw, block width 80.2vw */
  font-size:clamp(24px,2.846vw,64px); line-height:1.47; letter-spacing:-.03em;
  width:80.2vw; max-width:none; margin-left:13.8vw;
}
.hero-title .lead{ font-weight:600; }   /* "Hi! I’m Tamar." — Manrope SemiBold, like the live site */

/* ---------- galleries / grids ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:start; }
.grid figure{ margin:0; }
.grid figure img{ width:100%; height:auto; }

/* home project cards */
.work{ padding:clamp(48px,7.15vw,150px) 0 clamp(34px,3.7vw,70px); }
/* grid scales with viewport (margins ~3.4vw), not capped at 1360 like the default .wrap */
.work .wrap{ width:min(93.2vw,1800px); max-width:none; }
.grid-home .card{ display:block; color:var(--ink); }
.card-img{ overflow:hidden; }
.card-img img{ width:100%; height:auto; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.grid-home .card:hover .card-img img{ transform:scale(1.03); }
.card-title{ font-family:var(--sans); font-weight:400; font-size:22px;
  line-height:1.3; letter-spacing:.01em; margin:19px 0 4px; }
.card-meta{ font-family:var(--serif); font-size:16px; line-height:1.4; letter-spacing:.01em; color:var(--ink); }

/* ---------- home bio + portrait ---------- */
.home-bio{ padding:clamp(40px,6vw,90px) 0 clamp(24px,3vw,40px); }
/* Wix bio spans ~91.5vw (margins ~4.25vw): 1317px@1440, 1537px@1680 */
.home-bio .wrap{ width:min(91.5vw,1760px); max-width:none; }
.home-bio p{ font-family:var(--sans); font-weight:400; text-align:center;
  font-size:22px; line-height:1.3; letter-spacing:.01em; max-width:none; width:100%; margin:0 auto; color:var(--ink); }
.portrait{ padding:clamp(8px,0.83vw,16px) 0 clamp(40px,5.8vw,120px); }
.portrait .wrap{ display:flex; justify-content:center; }
/* Wix portrait video scales ~31.5vw: 453px@1440, 529px@1680 */
.portrait video{ width:clamp(280px,31.5vw,640px); height:auto; display:block; }

/* ---------- about ---------- */
.about-bio{ padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,36px); }
.about-bio p{ font-family:var(--sans); font-weight:400; text-align:center;
  font-size:22px; line-height:1.3; letter-spacing:.01em; max-width:1000px; margin:0 auto; }

/* ---------- project pages ---------- */
.project .wrap{ width:min(93.2vw,1800px); max-width:none; }  /* scale like the home grid, not capped */
/* header sits inset toward centre (title ~8.5vw from left, intro ~17vw from right), like Wix */
.project .proj-head{
  display:grid; grid-template-columns:1fr minmax(280px,32vw);
  gap:clamp(24px,3vw,60px); align-items:start;
  padding:clamp(40px,6vw,80px) clamp(20px,15vw,290px) clamp(34px,5vw,64px) calc(2.95vw + 15px);
}
.proj-head h1{ font-family:var(--sans); font-weight:400;
  font-size:32px; line-height:1.5; letter-spacing:normal; }
.proj-intro p{ font-family:var(--serif); font-size:16px; line-height:1.5; text-align:justify; }

/* gallery band: ~87vw centred container, like the live Wix gallery */
.proj-body{ width:min(87.3vw,1530px); margin:0 auto; }
.proj-body>*{ margin-bottom:clamp(28px,2.9vw,46px); }
.cap{ max-width:520px; margin:clamp(28px,4vw,52px) 0 clamp(16px,2vw,22px); }
.cap h2{ font-family:var(--serif); font-weight:700; font-size:16px; line-height:1.5; margin-bottom:2px; }
.cap p{ font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--ink); }
/* justified gallery: rows of images at a common height, natural widths, space-around */
/* fixed-width 3-column grid (images keep natural height, top-aligned) */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(3px,0.4vw,8px); align-items:start; }
.grid3 img{ width:100%; height:auto; display:block; }
.gallery{ display:flex; flex-direction:column; row-gap:clamp(6px,0.7vw,12px); }
.grow{ display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; row-gap:clamp(6px,0.7vw,12px); }
/* last partial row: left-aligned with the full rows' gap (like Wix), not centred */
.grow.grow-partial{ justify-content:flex-start; column-gap:var(--pgap); padding-left:calc(var(--pgap) / 2); }
.grow img, .grow.vids video{ height:var(--gh); width:auto; max-width:100%; display:block; }
.grow.vids .vid{ line-height:0; }
/* single full-width image (or capped by --mw, centred) */
figure.full{ margin:0; text-align:center; }
figure.full img{ width:100%; height:auto; display:block; margin:0 auto; }
figure.full[style*="--mw"] img{ width:min(100%, var(--mw)); }
/* single full-width video */
.vid.full video{ width:100%; height:auto; display:block; background:#000; }

.proj-nav{ display:flex; justify-content:space-between; align-items:center;
  padding:clamp(30px,4vw,54px) 0 clamp(10px,2vw,20px); }
.proj-nav a{ font-family:var(--serif); font-size:15px; color:var(--ink); padding:6px 4px; }
.proj-nav a:hover{ opacity:.6; }

/* ---------- footer ---------- */
.site-footer{ padding:clamp(40px,6vw,72px) 0 40px; margin-top:clamp(15px,1.5vw,30px); }
.email-marquee{ display:block; overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.email-marquee .marquee-track{ display:inline-flex; gap:2.5em; animation:marquee 30s linear infinite; }
.email-marquee span{ font-family:var(--sans); font-weight:300; letter-spacing:.06em;
  font-size:clamp(18px,2.4vw,30px); color:var(--ink); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.footer-row{ display:flex; justify-content:space-between; align-items:center;
  padding:22px var(--edge) 0; }
.footer-row a{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.footer-row a:hover{ opacity:.6; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between;
  padding:22px var(--edge) 0; margin-top:14px; }
.legal-links{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.legal-links a{ color:var(--muted); font-size:13px; }
.legal-links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.footer-legal .copyright{ color:var(--muted); font-size:13px; }

/* ---------- legal pages ---------- */
.legal{ padding-top:clamp(30px,4vw,50px); }
.page-head h1{ font-family:var(--sans); font-size:clamp(28px,3vw,40px); margin-bottom:18px; }
.legal-body{ max-width:70ch; padding-bottom:clamp(40px,6vw,80px); }
.legal-body h2{ font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.8vw,22px); margin:30px 0 8px; }
.legal-body p{ color:var(--ink); margin:0 0 12px; line-height:1.55; }
.legal-body a{ text-decoration:underline; text-underline-offset:2px; }
.legal-updated{ margin-top:26px; font-size:13px; color:var(--muted); }

/* ---------- reveal animations ---------- */
@media (prefers-reduced-motion:no-preference){
  /* pictures rise up... */
  .reveal{ opacity:0; transform:translateY(30px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .reveal.in{ opacity:1; transform:none; }
  /* ...then the text rises up from the bottom, shortly after */
  .reveal-text{ opacity:0; transform:translateY(28px);
    transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); transition-delay:.3s; }
  .reveal-text.in{ opacity:1; transform:none; }
  /* media that just fades in slowly (e.g. the portrait video) */
  .reveal-fade{ opacity:0; transition:opacity 1.2s ease; }
  .reveal-fade.in{ opacity:1; }
  /* Wix home: the pictures show first, then the hero intro text rises in shortly after */
  .hero-title{ animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .7s both; }
  @keyframes heroRise{ from{ opacity:0; transform:translateY(46px); } to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce){
  .email-marquee .marquee-track{ animation:none; }
}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .hero .wrap{ padding:0 var(--edge); }
  .hero-title{ width:auto; max-width:100%; margin-left:0; font-size:clamp(21px,5.6vw,26px); line-height:1.4; }
  .grid, .grid-home{ grid-template-columns:1fr; }
  .grid3{ grid-template-columns:1fr 1fr; }
  .project .proj-head{ grid-template-columns:1fr; gap:14px; padding-left:var(--edge); padding-right:var(--edge); }
  .proj-intro p{ text-align:left; }
  /* galleries: 2-up on phones (vw heights would be tiny) */
  .proj-body{ width:auto; padding:0 var(--edge); }
  .grow img{ height:auto; width:calc((100% - 10px)/2); }
  .grow.vids{ flex-direction:column; row-gap:12px; }
  .grow.vids video{ height:auto; width:100%; }
  .about-bio p{ font-size:clamp(18px,4.6vw,22px); }
  .portrait video{ width:min(320px,86vw); }
}

/* ---------- menu: right-side panel + scrim (matches the live Wix menu) ---------- */
#mnav{ position:fixed; inset:0; z-index:999; visibility:hidden; transition:visibility 0s linear .4s; }
#mnav.open{ visibility:visible; transition:visibility 0s; }
.mnav-scrim{ position:absolute; inset:0; background:rgba(20,18,24,.5); opacity:0; transition:opacity .38s ease; }
#mnav.open .mnav-scrim{ opacity:1; }
.mnav-panel{
  position:absolute; top:0; right:0; height:100%; width:min(40%,620px); background:#fff;
  display:flex; flex-direction:column; align-items:center; padding-top:108px;
  box-shadow:-14px 0 40px rgba(0,0,0,.10);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
}
#mnav.open .mnav-panel{ transform:none; }
/* Wix scales the menu with viewport width: font ≈1.265vw, line-height 1.3 (18.2px@1440, 21.25px@1680) */
.mnav-links{ display:flex; flex-direction:column; align-items:center; gap:clamp(15px,1.42vw,26px); }
.mnav-links a{ font-family:var(--sans); font-weight:400; font-size:clamp(15px,1.265vw,30px); line-height:1.3; color:#000; letter-spacing:normal; }
.mnav-links a:hover{ opacity:.55; }
#mnav .close{ position:absolute; top:30px; right:clamp(24px,3vw,52px); width:34px; height:34px; background:none; border:0; cursor:pointer; }
#mnav .close::before,#mnav .close::after{ content:""; position:absolute; left:16px; top:4px; width:1.5px; height:26px; background:var(--ink); }
#mnav .close::before{ transform:rotate(45deg); } #mnav .close::after{ transform:rotate(-45deg); }
@media (max-width:820px){
  .mnav-panel{ width:100%; box-shadow:none; }
  .mnav-links{ gap:24px; }
  .mnav-links a{ font-size:21px; }   /* readable on phones (vw would be tiny) */
}

/* ---------- accessibility ---------- */
.skip-link{ position:absolute; left:12px; top:-60px; z-index:1000; background:var(--ink); color:#fff;
  padding:10px 16px; font-size:15px; transition:top .2s ease; }
.skip-link:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:1px; }