/* ===========================================================
   dancohen.tv — shared stylesheet
   Used by index.html, about.html, and every file in /projects/
   =========================================================== */

:root{
  --bg:#fcfcfc;
  --ink:#181818;
  --body-text:#333333;
  --grey:#9b9b9b;
  --teal:#69e0c6;
  --gap:8px;
  --content-width:1000px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

/* ---------- header (same on every page) ---------- */
.site-header{
  padding:56px 20px 0;
  text-align:center;
}

.logo-link{ display:inline-block; }

.wordmark-box{
  display:inline-block;
  padding:14px 26px;
  background:var(--bg);
}

.logo-img{
  display:block;
  width:230px;
  max-width:100%;
  height:auto;
}

nav{
  margin:14px 0 0;
  display:flex;
  justify-content:center;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
}
nav a{ color:var(--grey); padding-bottom:3px; margin:0 11px; }
nav a.current{ color:var(--teal); }

/* ---------- homepage showreel ---------- */
.reel-wrap{
  max-width:var(--content-width);
  margin:36px auto 0;
  padding:0 20px;
}
.reel-embed{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  background:#000000;
  cursor:pointer;
}
.reel-embed video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  background:#000000;
}
.reel-play-button{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:84px; height:84px;
  border-radius:50%;
  background:rgba(24,24,24,0.55);
  border:2px solid var(--teal);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .15s ease;
  pointer-events:none;
}
.reel-embed:hover .reel-play-button{
  transform:translate(-50%, -50%) scale(1.08);
  background:rgba(24,24,24,0.75);
}
.reel-play-button::after{
  content:"";
  border-style:solid;
  border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--teal);
  margin-left:5px;
}
.reel-play-button.is-hidden{ display:none; }

/* ---------- homepage grid ---------- */
.grid{
  max-width:var(--content-width);
  margin:var(--gap) auto 0;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
}
@media (max-width:820px){ .grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:repeat(2, 1fr); } }

.tile{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f1f1f1;
}
.tile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.tile .placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:14px;
  background:var(--tile, #ededed);
}
.placeholder span{
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  font-size:13px;
  color:var(--ink);
}
.tile::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,0);
  transition:background .15s ease;
}
.tile:hover::after{ background:rgba(0,0,0,0.06); }

.tile-hover{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.tile:hover .tile-hover{ opacity:1; }
.tile-hover span{
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  font-size:14px;
  color:#ffffff;
  line-height:1.3;
}

/* ---------- project pages ---------- */
.project-intro{
  max-width:var(--content-width);
  margin:52px auto 0;
  padding:0 20px;
}
.project-intro p{
  font-size:15px;
  line-height:1.75;
  color:var(--body-text);
  margin:0 0 14px;
  max-width:70ch;
}

.project-videos{
  max-width:var(--content-width);
  margin:26px auto 0;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.video-embed{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  background:#000000;
}
.video-embed video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  background:#000000;
}

.project-spacer{ height:70px; }

/* ---------- about page ---------- */
.about-grid{
  max-width:var(--content-width);
  margin:52px auto 0;
  padding:0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:44px;
}
.about-photo-wrap{
  flex:1 1 400px;
}
.about-photo{
  width:100%;
  height:auto;
  display:block;
  background:#eeeeee;
  aspect-ratio:4/3;
  object-fit:cover;
}
.about-text{
  flex:1 1 380px;
  padding-top:4px;
}
.about-text p{
  font-size:15px;
  line-height:1.75;
  color:var(--body-text);
  margin:0 0 14px;
  max-width:60ch;
}
.about-text a{
  color:var(--body-text);
  text-decoration:underline;
}

/* ---------- footer (same on every page) ---------- */
footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:44px 20px 60px;
}
footer a{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  color:var(--ink);
}
footer svg{ width:100%; height:100%; }