/* ==========================================================================
   Smoky background — opt-in per page via `smoke: true` front matter
   ========================================================================== */

/* The canvas is a layer *inside* the card, not a page-wide backdrop: the body
   gradient stays visible around .main, and the effect is clipped to the card's
   edges. Painted by js/smoke.js — if WebGL2 is unavailable the canvas stays
   blank and .main's own background colour shows through unchanged.

   Baseline (below): the canvas spans the whole card and scrolls with it.
   Enhanced (@supports below): it stays pinned to the viewport instead. */
.has-smoke .main {
  position: relative;
  overflow: hidden; /* keep the canvas within the card's border */
}

#smoke-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Hold the smoke still while the page scrolls, as the original site did.
   `overflow: clip` is the key: it clips like `hidden` but does NOT create a
   scroll container, so a sticky child can still pin to the viewport. With
   `hidden` the sticky would resolve against .main and scroll away with it.
   (`contain: paint` + `position: fixed` looks equivalent but is not — it makes
   .main the containing block, which downgrades fixed to absolute.)
   Older browsers without `overflow: clip` keep the scrolling version above. */
@supports (overflow: clip) {
  .has-smoke .main {
    overflow: clip;
  }

  #smoke-bg {
    position: sticky;
    inset: auto;
    top: 0;
    height: 100vh;
    /* cancel its own height so it contributes nothing to the card's flow */
    margin-bottom: -100vh;
    /* Sticky sits in normal flow, so it would be inset by .main's horizontal
       padding and the smoke would stop short of the card's edges. Pull it back
       out to run edge to edge. (The absolute fallback above needs none of this:
       `inset: 0` already resolves against the padding box.) */
    margin-left: calc(-1 * var(--main-pad));
    margin-right: calc(-1 * var(--main-pad));
    width: calc(100% + 2 * var(--main-pad));
    /* Oat's media reset applies `max-width: 100%` to canvas, which would clamp
       the width above straight back to the content box and undo the bleed. */
    max-width: none;
  }
}

/* Lift the content above the canvas. */
.has-smoke .main > .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Timeline Card
   ========================================================================== */

.timeline-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-patch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.timeline-card p {
  width: 100%;
  margin-top: 8px;
}

.timeline-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.timeline-highlights svg {
  flex-shrink: 0;
  margin-top: 4px;
}

/* ==========================================================================
   Case Study Card
   ========================================================================== */

.case-study-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-dark-active);
  transition: background-color 200ms ease-out;
}

.case-study-card:hover {
  background-color: var(--bg-hover);
  color: var(--text-dark-active);
}

.case-study-card img {
  width: 326px;
  height: 183.5px;
  border-radius: 4px;
  object-fit: cover;
}

.card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.card-text p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card variants — colored triads */
.card-variant-1 {
  background-color: var(--card-1-fill);
  border: 1px solid var(--card-1-border);
  color: var(--card-1-text);
}

.card-variant-2 {
  background-color: var(--card-2-fill);
  border: 1px solid var(--card-2-border);
  color: var(--card-2-text);
}

.card-variant-3 {
  background-color: var(--card-3-fill);
  border: 1px solid var(--card-3-border);
  color: var(--card-3-text);
}

/* Card layout modifiers */
.card-center {
  text-align: center;
  align-items: center;
}

/* Icon + Text Card */
.icon-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 4px;
}

.icon-card img {
  width: 32px;
  height: 32px;
}

/* Stat Card */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 4px;
}

.stat-card h6 {
  font-weight: 400;
}

.stat-value {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 42px 0 32px 0;
}

.signature-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  opacity: 0.4;
}

.signature-group img {
  height: auto;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 56px 0 0 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.nav-sep {
  color: var(--text-dark-active);
}