/* =========================================================
   WIRESTREAM MEDIA — PROJECTS TEMPLATE (experimental)
   Formerly "blog.css" — repurposed for highlighting clients, vendors,
   partners, projects, and events (not a blog). Page-specific styles
   only. Loads after style.css and reuses its color/type/motion
   variables — nothing here should redefine :root. This file only
   applies to projects.html; delete both together if the experiment
   doesn't stick, or revisit the content model before publishing.
   ========================================================= */

/* Scroll progress bar (.scroll-progress) used to live here, but it's now
   a site-wide feature on every page — moved to the shared css/style.css
   so pages that don't load projects.css still get it. See style.css. */

/* ---------------- full-bleed cover ---------------- */
.post-cover{
  position: relative;
  /* Plain 100svh — this is the original, correct value for the partner
     pages and projects.html, which have short copy (title + meta only)
     and were already "near perfect" in Safari before any of the --vh/
     buffer experimentation below. Switching this to the JS-measured --vh
     was a mistake: window.innerHeight tends to read larger than 100svh
     on Safari (it doesn't reliably discount the bottom toolbar the way
     the spec intends svh to), so every .post-cover page ended up taller
     than before, showing extra dead space at the bottom on pages whose
     content was already short enough to fit. */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
/* live.html/broadcasts.html are the only .post-cover pages with the
   longer console-style copy (.console-hero-copy: eyebrow + 2-line
   headline + lede + readout) instead of the partner pages' short
   .post-cover-copy (title + meta) — enough content that on a phone it
   can still run past 100svh and push the readout down near/under the
   bottom toolbar. Scoped to .post-cover--console (added only on those
   two pages) so the partner pages/projects.html are untouched. */
@media(max-width: 899px){
  /* Same formula as .hero in style.css (--vh measured live via JS +
     100px buffer) — matches the exact distance that's now confirmed
     correct in Safari on index/studio/services/work/contact. */
  .post-cover--console{ min-height: calc((var(--vh, 1vh) * 100) + 100px); }
}
@media(min-width: 900px){
  /* .page reserves --nav-w (64px) of right padding for the edge rail,
     which otherwise leaves the hero media short of the real viewport
     edge. First attempt used the "100vw / negative margin" break-out
     trick, but 100vw includes the scrollbar's own width in Chrome —
     so it consistently fell short by a scrollbar-width sliver, landing
     right in the rail's own dot-to-number gap. Canceling the exact
     known padding amount instead avoids the scrollbar quirk entirely. */
  .post-cover{ margin-right: calc(-1 * var(--nav-w)); }
}
.post-cover-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.1) contrast(1.05) brightness(.8);
}
.post-cover-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,4,7,.25) 0%, rgba(4,4,7,.35) 45%, rgba(4,4,7,.92) 100%);
}
.post-cover-copy{
  position: relative;
  z-index: 1;
  padding-top: 140px;
  padding-bottom: 70px;
}
@media(max-width: 899px){
  /* -30px on mobile so the partner pages' readout line sits at roughly
     the same height off the bottom of the screen as the .hero pages'
     lede (index/studio/services/work/contact, reserving ~105px there —
     see style.css), matching everything up on iPhone. */
  .post-cover-copy{ padding-bottom: 40px; }
}
.post-cover-title{
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 7.6vw, 6rem);
  line-height: .98;
  max-width: 22ch;
  margin-top: 14px;
}
.post-cover-title .thin{ color: var(--fg-muted); }
.post-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.post-meta-dot{ color: var(--fg-muted); }
.post-meta .flag-icon{
  display: inline-block;
  width: 16px;
  height: auto;
  margin: 0 6px -2px 0;
  border-radius: 2px;
  vertical-align: baseline;
}

/* ---------------- rhythm / reveal-on-scroll ---------------- */
.post-wrap{ padding-top: 70px; }
.post-block{ padding: 34px 0; }
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- prose ---------------- */
.post-prose p{
  max-width: 68ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.8;
  color: var(--fg-dim);
  margin: 0 0 20px;
}
.post-prose p:last-child{ margin-bottom: 0; }

/* ---------------- asymmetric gallery ---------------- */
.post-gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media(min-width: 900px){
  .post-gallery{
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
  }
  .gallery-tile-lg{ grid-row: span 2; }
}
.gallery-tile{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media(min-width: 900px){
  .gallery-tile-lg{ aspect-ratio: auto; height: 100%; }
}
.gallery-tile img, .gallery-tile video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.gallery-tile:hover img, .gallery-tile:hover video{ transform: scale(1.06); }
.gallery-tile-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--fg);
  text-align: left;
  background: linear-gradient(0deg, rgba(4,4,7,.85) 0%, rgba(4,4,7,0) 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery-tile:hover .gallery-tile-caption,
.gallery-tile:focus-visible .gallery-tile-caption{
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- pull quote ---------------- */
.post-quote{
  margin: 0;
  padding: 6px 0 6px 28px;
  border-left: 2px solid var(--accent-2);
}
.post-quote p{
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  color: var(--fg);
  margin: 0 0 14px;
  max-width: 24ch;
}
.post-quote cite{
  display: block;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------------- stat strip ---------------- */
.post-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
}
.stat{ display: flex; flex-direction: column; gap: 6px; }
.stat-num{
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  line-height: 1;
  color: var(--accent);
}
.stat-label{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------------- second full-bleed break ---------------- */
.post-break{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-height: 60vh;
  overflow: hidden;
}
.post-break img{
  width: 100%;
  height: 100%;
  max-height: 60vh;
  object-fit: cover;
  filter: grayscale(.15) contrast(1.05) brightness(.85);
}

/* ---------------- lightbox ---------------- */
.post-lightbox{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5,5,8,.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.post-lightbox.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease), visibility 0s;
}
.post-lightbox-stage{
  max-width: 92vw;
  max-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-lightbox-stage img, .post-lightbox-stage video{
  max-width: 92vw;
  max-height: 76vh;
  border-radius: 4px;
  display: block;
}
.post-lightbox-caption{
  font-size: 13px;
  color: var(--fg-dim);
  text-align: center;
  max-width: 60ch;
}
.post-lightbox-counter{
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--fg-muted);
  text-align: center;
}

/* Locks the background page in place while the lightbox is open. Applied
   to both <html> and <body> — some browsers (notably iOS Safari) scroll
   the html element rather than body, so overflow:hidden on body alone
   isn't reliably enough to stop the page scrolling behind the overlay. */
html.lb-lock, body.lb-lock{
  overflow: hidden;
  height: 100%;
}
/* body is pinned with position:fixed (set inline via JS, alongside a
   negative top offset matching the scroll position at the moment the
   lightbox opened) so closing it can restore the exact same scroll spot
   instead of resetting to the top of the page. Fixed positioning takes
   the body out of normal flow, so it needs an explicit full width here
   or it'd collapse to its content's intrinsic width. */
body.lb-lock{ width: 100%; }

.post-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.post-lightbox-nav:hover{ background: var(--fg); color: #0a0a0a; border-color: var(--fg); }
.post-lightbox-nav[hidden]{ display: none; }
.post-lightbox-prev{ left: 16px; }
.post-lightbox-next{ right: 16px; }
@media(min-width: 700px){
  .post-lightbox-prev{ left: 28px; }
  .post-lightbox-next{ right: 28px; }
}
@media(max-width: 480px){
  .post-lightbox-nav{ width: 38px; height: 38px; font-size: 20px; }
}

.post-lightbox-close{
  position: absolute;
  top: 22px; right: 24px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.post-lightbox-close:hover{ background: var(--fg); color: #0a0a0a; border-color: var(--fg); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .gallery-tile img, .gallery-tile video{ transition: none; }
  .post-lightbox{ transition: none; }
}