/* ============================================================
   Site overrides layered on top of the vendored Webflow CSS.
   Keep eviltypo.css pristine; put intentional changes here.
   ============================================================ */

/* Footer — align the social links to the right edge, as on the
   original. The base Webflow rule already asks for flex-end, but
   ships display:block which defeats it. Restore flex on desktop/
   tablet; keep the mobile (<=479px) block layout untouched. */
.container.is-footer {
  display: flex;
  justify-content: flex-end;
  /* Tighten the gap below the social icons (was ~58px) for a snugger
     footer closer to gptypo's spacing. */
  padding-bottom: 2rem;
}
@media screen and (max-width: 479px) {
  .container.is-footer {
    display: block;
  }
}

/* Video controls are real <button>s now (better a11y than the
   original <div>s) — strip the default UA chrome that was drawing
   a white box behind the round unmute button. */
.video-unmute-button,
.video-play-wrapper,
.video-pause-wrapper {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.video-unmute-button {
  padding: 0;
}

/* Control visibility — replaces the Webflow IX2 interaction.
   Toggled by the home-page script. */
.video-play-pause-toggle.is-hidden,
.video-unmute-button.is-hidden,
.video-play-wrapper.is-hidden,
.video-pause-wrapper.is-hidden {
  display: none;
}

/* Magnetic hover — the element is nudged toward the cursor by JS;
   the transition gives it the smooth follow + spring-back. */
.is-magnetic {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}

/* Smooth anchor scrolling (back-to-top arrow, in-page jumps). */
html {
  scroll-behavior: smooth;
}

/* Scroll-reveal — images fade + slide up as they enter the viewport.
   Scoped to .js-reveal (added by JS) so content stays visible if the
   script never runs; reduced-motion users skip the motion entirely. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* <picture> wrappers (from the Img component) must not affect layout — let the
   inner <img> behave as a direct child of whatever contains the picture. */
picture {
  display: contents;
}

/* ---- Portfolio cards (art/design gallery) ---- */
/* The vendored .pf-image class positions the thumb but doesn't crop it. */
.pf-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card text column — the live site groups the title + description together,
   vertically centered, and pins the category label to the bottom. The
   vendored CSS used an old 55/45 grid that split title (top) from
   description (mid); override it to match. */
.div-block-23 .project-description {
  flex: none;
  margin-top: 0.8em;
  padding-top: 0;
}
/* Desktop/tablet (>=768px): the 2-col card is tall, so center the
   title+description group and pin the category label to the bottom. */
@media screen and (min-width: 768px) {
  .div-block-20 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
  }
  .div-block-23 {
    display: block;
    height: auto;
  }
  .div-block-20 > .label {
    position: absolute;
    left: 4em;
    bottom: 4em;
    margin: 0;
  }
}
/* Mobile (<768px): the card stacks (image over text); let the label flow
   in normal order with breathing room below the description. */
@media screen and (max-width: 767px) {
  .div-block-20 > .label {
    margin-top: 1.5em;
  }
}

/* ---- Work detail page hero (title overlaid, vertically centered) ---- */
.work-hero-section {
  position: relative;
}
.work-hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.work-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; /* vertical center, like the source's div-block-25 */
  /* matches source .h1-pos: left 2em + margin-left 4em = 6em */
  padding: 0 2em 0 6em;
}
.work-hero-title {
  margin: 0;
  max-width: 60em;
}
@media screen and (max-width: 767px) {
  .work-hero-overlay {
    padding: 0 2em;
  }
}

/* ---- Selected Outputs (live-coded links) ---- */
/* matches source .grid-block — 3-col grid, tight 4px gutters */
.outputs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.output-item {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.output-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
/* matches source .link-block padding (.5em 1em 2em) */
.output-text {
  padding: 0.5em 1em 2em;
}
.output-caption {
  margin: 0 0 1.1em;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
}
/* plain link, sentence case, no underline — like the source */
.output-run {
  display: inline-block;
  font-size: 0.9rem;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.output-run:hover {
  opacity: 0.55;
}
@media screen and (max-width: 767px) {
  .outputs-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Work detail page galleries ---- */
.work-hero img {
  display: block;
  width: 100%;
  height: auto;
}
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
.work-large {
  display: flex;
  flex-direction: column;
  gap: 6em;
}
.work-grid img,
.work-large img {
  display: block;
  width: 100%;
  height: auto;
}
.work-grid a,
.work-large a {
  display: block;
  cursor: zoom-in;
}
@media screen and (max-width: 767px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Video embed (16:9) ---- */
.video-embed-16x9 {
  position: relative;
  padding-top: 56.25%;
}
.video-embed-16x9 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* matches source .video-descrip */
.video-caption {
  max-width: 95%;
  margin: 0.5em 0 0;
  font-size: 0.9rem;
}

/* ---- Faithful prev/next on work & project pages (reuses Webflow classes) ---- */
/* Sibling titles list */
.fs_prevnext-collectionlist {
  padding: 3em 0 4em;
}
.prevnext-link {
  color: inherit;
  text-decoration: none;
  display: block;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.prevnext-link:hover {
  opacity: 1;
}
.prevnext-link.w--current {
  opacity: 1;
}
.fs_prevnext-collectionlist .div-block-48 h1 {
  margin: 0;
}
/* Previous / Next row — source is a 2-row, 1-col grid: Previous on row 1
   (left), Next on row 2 pushed to the right (justify-self:end). The big
   Canela names overlap diagonally because line-height (155) < size (172). */
.fs_prevnext-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}
.fs_prevnext-item {
  width: auto;
  height: auto;
}
/* Previous stays left (row 1), Next is pushed right (row 2). Tied to explicit
   classes — not :last-child — so a lone Previous (last page) stays left and a
   lone Next (first page) stays right when the other end is blank. */
.fs_prevnext-item.is-prev {
  grid-row: 1;
}
.fs_prevnext-item.is-next {
  grid-row: 2;
  justify-self: end;
}
.fs_prevnext-item .label {
  margin: 0 0 0.2em;
}
.prevnext-inline {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-family: Canela, Georgia, serif;
  font-weight: 100;
  font-size: 172px;
  line-height: 155px;
  transition: opacity 0.2s ease;
}
.prevnext-inline:hover {
  opacity: 0.55;
}
/* Tablet & phone: the 172px desktop prev/next names are far too wide for
   small viewports (they bled off the right edge). Scale fluidly so even the
   longest title ("Silhouettes"/"Transitions") fits, matching the live site. */
@media screen and (max-width: 991px) {
  .prevnext-inline {
    font-size: clamp(38px, 12vw, 132px);
    line-height: 1.05;
  }
}

/* ---- Lightbox ---- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}
.lightbox-overlay[hidden] {
  display: none;
}
.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============================================================
   Mobile responsiveness fixes
   ============================================================ */

/* On phones the Details / Statement two-column block stacks (the vendored
   rule does this at <=479px, matching the live site). The stacked columns
   butt together with no gap once the grid row-gap stops applying, so add
   breathing room between them. */
@media screen and (max-width: 479px) {
  .div-2col > .rich-text-block + .rich-text-block {
    margin-top: 2.5em;
  }
}