/* work.css — styles specific to the Work (portfolio) page */

.hero{ position:relative; padding: 1rem 0 3.5rem; }
.oncard{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--red); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; padding:.28rem .6rem; border-radius:3px;
  transform: rotate(-2deg) translateZ(0); margin-bottom:1.4rem;
}
.oncard .dot{ width:6px; height:6px; border-radius:50%; background:#fff; }
h1{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height:1.02; letter-spacing:-0.015em; max-width: 13ch;
}
.hero p.lede{ font-size:1.05rem; color:var(--ink-soft); max-width:46ch; margin-top:1.3rem; line-height:1.6; }
.hero p.lede b{ color:var(--ink); font-weight:500; }

.section-label{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; margin-bottom:.35rem; }
.section-sub{ color:var(--ink-soft); font-size:.9rem; margin-bottom:1.8rem; }

/* ── Card grid ── */
.grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 2.1rem 1.6rem; }
.card{
  background: #fdfbf5; border: 1px solid var(--ink); padding: 1.1rem 1.2rem 1.3rem;
  box-shadow: 3px 4px 0 rgba(38,36,33,0.14); position: relative; cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1);
  /* the tilt is a non-round angle, which without this makes Chrome re-hint the text on every
     scroll repaint — looks like the text is jittering. this pins it to one rasterized layer */
  will-change: transform; backface-visibility: hidden;
}
.card:hover{ transform: rotate(0deg) translateY(-3px) translateZ(0) !important; box-shadow: 4px 6px 0 rgba(38,36,33,0.18); }
.pin{ position:absolute; top:-9px; left:22px; width:16px; height:16px; border-radius:50%; background: var(--accent); border: 1px solid var(--accent-deep); }

.thumb{
  height: 84px; border: 1.4px dashed var(--line); border-radius: 2px; margin-bottom:.7rem;
  display:flex; align-items:center; justify-content:center; color: var(--ink-soft);
  background: repeating-linear-gradient(135deg, rgba(38,36,33,0.03) 0 10px, transparent 10px 20px);
}
.thumb i{ font-size:26px; opacity:.55; }

.stamp-row{ display:flex; align-items:center; gap:.4rem; margin-bottom:.55rem; }
.stamp-row i{ font-size:15px; color: var(--accent-deep); }
.stamp{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; border: 1.3px solid var(--ink);
  color: var(--ink); padding: .16rem .45rem; transform: rotate(-2deg) translateZ(0); letter-spacing:.03em;
}
.mini-h{ font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.mini-p{ font-size:.87rem; color:var(--ink-soft); line-height:1.5; margin-bottom:.7rem; }
.tools{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--accent-deep); }

/* ── Detail overlay ── */
#backdrop{
  position:fixed; inset:0; background:rgba(38,36,33,0.35); opacity:0; pointer-events:none;
  transition:opacity .28s ease; z-index:40;
}
#backdrop.show{ opacity:1; pointer-events:all; }
#detail{
  position:fixed; background:#fdfbf5; border:1px solid var(--ink); z-index:41;
  transition: top .4s cubic-bezier(.2,.8,.2,1), left .4s cubic-bezier(.2,.8,.2,1),
              width .4s cubic-bezier(.2,.8,.2,1), height .4s cubic-bezier(.2,.8,.2,1),
              transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1);
  display:none;
}
#detail .inner{ position:relative; height:100%; }
#detail .layer{ position:absolute; inset:0; opacity:0; overflow-y:auto; padding:1.1rem 1.2rem 1.3rem; transition:opacity .28s ease; }
#detail .layer.show{ opacity:1; }
#detail .close{
  position:absolute; top:.9rem; right:1rem; font-family:'IBM Plex Mono',monospace; font-size:.7rem;
  background:none; border:1px solid var(--ink); padding:.3rem .6rem; cursor:pointer; color:var(--ink);
  display:inline-flex; align-items:center; gap:.3rem;
}
#detail .close i{ font-size:12px; }
#detail .thumb-lg{ height:180px; margin-bottom:1rem; }
#detail .thumb-lg i{ font-size:38px; }
.detail-body{ padding: .2rem .3rem .3rem; }
#detail h2{ font-family:'Space Grotesk',sans-serif; font-size:1.5rem; margin-bottom:.5rem; padding-right:5rem; }
.detail-body .stamp-row{ margin-bottom:1rem; }
.detail-body p{ font-size:.92rem; color:var(--ink-soft); line-height:1.65; margin-bottom:.9rem; max-width:60ch; }
.detail-body .tools{ font-size:.72rem; }
.detail-body .outcome b{ color:var(--ink); }

/* ── Media gallery (detail view) — driven by the `media` array in work.js ── */
.media-label{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:.5rem;
}
.media-strip{
  display:flex; gap:.7rem; overflow-x:auto; margin-bottom:1.1rem; padding-bottom:.35rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.media-item{
  flex:0 0 auto; width:132px; cursor:pointer; text-decoration:none; color:inherit;
  display:block; border:none; background:none; padding:0; text-align:left; font:inherit;
}
.media-item .media-thumb{
  width:132px; height:90px; border:1.4px dashed var(--line); border-radius:2px;
  background: repeating-linear-gradient(135deg, rgba(38,36,33,0.03) 0 10px, transparent 10px 20px) center/cover no-repeat;
  position:relative; overflow:hidden; transition: border-color .18s ease;
}
.media-item:hover .media-thumb, .media-item:focus-visible .media-thumb{ border-color:var(--accent-deep); }
.media-item .media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-item .play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(38,36,33,0.3);
}
.media-item .play-badge i{ font-size:24px; color:#fdfbf5; }
.media-caption{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--ink-soft);
  margin-top:.35rem; line-height:1.3; display:flex; align-items:center; gap:.25rem;
}
.media-caption i{ font-size:10px; flex:0 0 auto; }

/* ── Lightbox (full-size image view) ── */
#lightbox{
  position:fixed; inset:0; background:rgba(38,36,33,0.85); z-index:60;
  display:none; align-items:center; justify-content:center; padding:2.4rem; cursor:zoom-out;
}
#lightbox.show{ display:flex; }
#lightbox img{ max-width:100%; max-height:100%; box-shadow:6px 8px 0 rgba(0,0,0,0.3); }

@media (max-width: 620px){
  .grid{ grid-template-columns: 1fr; }
}