/* home/work.css — WORK organism — split from main.css lines 316-627. See docs/ for the reorg record. */
/* ============================================================ WORK ============================================================ */
.section {
  position: relative;
  width: 100vw;
  background: var(--color-brand-black);
  padding: clamp(4rem, 7vw, 7.5rem) 0;
}
.section__inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section__eyebrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.section__eyebrow-bar {
  width: 2.5rem;
  height: 3px;
  background: var(--color-brand-purple);
}
.section__eyebrow-text {
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-white);
}
#work { padding: clamp(4rem, 7vw, 7.5rem) 0 clamp(4rem, 7vw, 7.5rem); }
.work__track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
/* A card filtered out is removed from layout and from the tab order alike. */
.work-card[hidden] { display: none; }
.work-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-hover);
  /* --work-art-top is where the card art begins, and the single value the
     surface gradient and the image both derive from, so the two cannot drift.
     It clears the three-line headline, which bottoms out at a different
     fraction of card height per breakpoint — ~47% mobile, ~36% tablet, ~35%
     desktop. --work-art-bleed is how far the art runs past the base; the
     card's own overflow does the clip. */
  --work-art-top:   60%;
  --work-art-bleed: 10%;
  --work-type-gap:  0.875rem;
  /* The section ground is pure black, so the drop shadows below it are
     invisible and cannot carry elevation on their own. The purple lift and
     the brightened hairlines are what separate the tile from the page. */
  box-shadow:
    0 2px 8px   var(--shadow-1),
    0 12px 44px rgba(161, 0, 255, 0.22),
    inset 0 1px 0   rgba(var(--ink), 0.14),
    inset 0 0 0 1px rgba(var(--ink), 0.12);
}
/* The surface fills the whole card and resolves to the artwork's own ground
   exactly where the artwork begins, so the two read as one continuous tile
   rather than a panel with a picture stuck to its base. Literals, not tokens,
   for the same reason the light-mode block below exists: this surface must
   not lighten with the theme. */
.work-card__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #2A1240 0%,
    #150B20 34%,
    #0A0A0A var(--work-art-top)
  );
  z-index: 0;
}

/* The work cards are media tiles: all four are carried by a dark, colour-led
   photograph. Those grounds do not lighten with the theme, so the type on them
   must not darken either.
   Re-pinning the channels and surfaces on the card keeps the whole tile in its
   dark treatment in light mode — the alternative, inverting the art, turns the
   brand purple green. Everything inside inherits, so no rule below changes. */
html[data-theme="light"] .work-card {
  --ink: 255,255,255;
  --ground: 0,0,0;
  --color-brand-white:   #FFFFFF;
  --color-brand-black:   #000000;
  --color-text-muted:    rgba(255,255,255,0.60);
  --color-text-dim:      rgba(255,255,255,0.50);
  --color-border-faint:  rgba(255,255,255,0.06);
  --color-border-soft:   rgba(255,255,255,0.10);
  --surface-hover:       #1A1A1A;
  --surface-elevated:    #1E1E1E;
}
/* On a white ground the purple lift reads as a lavender haze around each tile
   in the phone carousel, so light mode drops it there (S10C). The neutral
   drop shadow and the hairlines stay; tablet and desktop keep the lift. */
@media (max-width: 767px) {
  html[data-theme="light"] .work-card {
    box-shadow:
      0 2px 8px   var(--shadow-1),
      inset 0 1px 0   rgba(var(--ink), 0.14),
      inset 0 0 0 1px rgba(var(--ink), 0.12);
  }
}
.work-card__bg-img {
  position: absolute;
  top: var(--work-art-top);
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--work-art-bleed));
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: filter var(--duration-ui) var(--ease-standard);
}
.work-card__default {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding:
    clamp(2.25rem, 3.5vw, 3rem)
    clamp(1.5rem,  2.25vw, 2.25rem)
    clamp(1.5rem,  2.25vw, 2.25rem)
    clamp(1.5rem,  2.25vw, 2.25rem);
  background: linear-gradient(
    to bottom,
    rgba(var(--ground),0.72) 0%,
    rgba(var(--ground),0.14) 55%,
    transparent 100%
  );
  transition:
    opacity   var(--duration-ui) var(--ease-standard),
    transform var(--duration-ui) var(--ease-standard);
}
.work-card__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.6vw, 1.575rem);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--color-brand-white);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-card__summary {
  margin: 0;
  font-size: clamp(0.9rem, 1.0vw, 1.0rem);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  color: rgba(var(--ink),0.82);
  opacity: 0;
  transform: translateX(12px);
  transition:
    opacity   var(--duration-ui) var(--ease-standard),
    transform var(--duration-ui) var(--ease-standard);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The CTA takes the Contact organism's .cta form, label plus purple icon
   square (S10C); this rule only places and reveals it. .cta's 2rem bottom
   margin is for flow layout and has no place on an absolute element. */
.work-card__cta {
  position: absolute;
  bottom: clamp(1.5rem, 2.25vw, 2.25rem);
  right:  clamp(1.5rem, 2.25vw, 2.25rem);
  z-index: 4;
  margin-bottom: 0;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--duration-ui) var(--ease-standard),
    transform var(--duration-ui) var(--ease-standard);
  pointer-events: none;
}
/* The CTA is the card's only interactive element, so its focus ring is the
   card's focus ring. Kept visible at every breakpoint (G5, A14). */
.work-card__cta:focus-visible {
  outline: 2px solid var(--color-brand-purple);
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .work-card__default,
  .work-card:focus-within .work-card__default { opacity: 0; pointer-events: none; }
  .work-card:hover .work-card__hover,
  .work-card:focus-within .work-card__hover { opacity: 1; background: rgba(var(--ground),0.68); }
  .work-card:hover .work-card__summary,
  .work-card:focus-within .work-card__summary { opacity: 1; transform: translateX(0); }
  .work-card:hover .work-card__cta,
  .work-card:focus-within .work-card__cta { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .work-card:hover .work-card__bg-img,
  .work-card:focus-within .work-card__bg-img { filter: blur(6px); }
}
/* Touch: work.js toggles .is-active, and .work-card__close dismisses it. That
   handler survived the S4 flattening untouched, so no JS changes here. */
.work-card.is-active .work-card__default { opacity: 0; pointer-events: none; }
.work-card.is-active .work-card__hover { opacity: 1; background: rgba(var(--ground),0.68); }
.work-card.is-active .work-card__summary { opacity: 1; transform: translateX(0); }
.work-card.is-active .work-card__cta { opacity: 1; transform: translateY(0); pointer-events: auto; }
.work-card.is-active .work-card__close { opacity: 1; transform: translateX(0); pointer-events: auto; }
.work-card.is-active .work-card__bg-img { filter: blur(6px); }
/* ============================================================
   P-9 · S6 restrained depth — a subtle whole-card tilt on hover/
   focus-within (transform only, compositor-safe). Per-layer
   translateZ is intentionally omitted: the card's overflow:hidden
   (required to clip the art + overlay) flattens any preserve-3d
   context, so depth reads as a single-plane tilt instead. Gated to
   hover-capable fine pointers; reduced motion holds the card flat.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .work__track { perspective: 1400px; }
  .work-card {
    transition:
      transform var(--duration-ui) var(--ease-standard),
      box-shadow var(--duration-ui) var(--ease-standard);
    will-change: transform;
  }
  .work-card:hover,
  .work-card:focus-within { transform: translateY(-4px) rotateX(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .work-card { transform: none !important; }
}
@media (max-width: 767px) {
  .work__track {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding: 0 var(--gutter) 1rem;
    margin: 0 calc(-1 * var(--gutter));
    scrollbar-width: none;
  }
  .work__track::-webkit-scrollbar { display: none; }
  .work-card { flex: 0 0 78vw; max-width: 320px; scroll-snap-align: center; }
  .work__dots { display: flex; }
}
/* Carousel cards keep the desktop tile's proportion (S10C). At 4 / 5 the
   card was too short for its art: the 640x512 artwork sizes by card width
   from --work-art-top down, so the card's overflow clipped 72-96px of every
   image below 1024px. Desktop runs ~1.69x tall with the art from 52%, which
   shows it whole; 10 / 17 with the same art top does the same here. */
@media (max-width: 1023px) {
  .work-card { aspect-ratio: 10 / 17; --work-art-top: 52%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .work__track {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: 0 var(--gutter) 1rem;
    margin: 0 calc(-1 * var(--gutter));
    scrollbar-width: none;
  }
  .work__track::-webkit-scrollbar { display: none; }
  .work-card { flex: 0 0 42vw; max-width: 380px; scroll-snap-align: start; }
}
/* Desktop: the 4-column grid narrows each card enough that aspect-ratio sizing
   made it too short to hold the hover overlay. Height is set explicitly instead,
   matching the pre-4-column height at every desktop width (fit through the old
   3-column height at 1024px and at 1440px). */
@media (min-width: 1024px) {
  .work-card {
    aspect-ratio: auto;
    height: clamp(384px, 37.5vw, 540px);
    --work-art-top: 52%;
  }
}
.work__dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.work__dot {
  width: 0.45rem;
  height: 0.45rem;
  background: rgba(var(--ink),0.22);
  border: none;
  cursor: pointer;
  transition:
    background var(--duration-ui) var(--ease-standard),
    width      var(--duration-ui) var(--ease-standard);
}
.work__dot--active { background: var(--color-brand-purple); width: 1.25rem; }
.work__dot[hidden] { display: none; }
@media (max-width: 767px) {}

/* ============================================================
   A14 · SPOTLIGHT — the AccreditaPass card is the lead artefact.
   The purple treatments that carried it — the container tint, the
   default-face wash, the brand-purple edge and outer glow — were
   removed by direction: Card 1 now renders on the same surface as the
   rest of the set. A slightly larger title is what remains. No
   autoplay, no motion-driven navigation, no scroll-jacking, and
   nothing that moves on its own.
   ============================================================ */
.work-card--spotlight .work-card__title { font-size: clamp(1.5rem, 1.85vw, 1.8rem); }
@media (max-width: 767px) {
  .work-card--spotlight .work-card__title { font-size: clamp(1.25rem, 5vw, 1.5rem); }
}

/* ============================================================
   TWO-STATE CARD (S4D / F3.3) — restored from jdsaire/legacy-desops.
   The default face carries label + title; the hover face repeats them
   and adds the summary. S4 flattened this into one always-visible
   face, which is why the two states looked identical.
   ============================================================ */
/* The card's type block is locked to one rhythm: --work-type-gap between
   label and heading, and the same between heading and body. Both gaps used
   to come from the UA's margin: 1em 0 on the h3 and p — the reset only
   touches body and a — so they measured ~37px and ~39px and drifted with
   each element's own clamp() font-size across breakpoints. Zeroing those
   margins and stating the gap is what makes the block deterministic. */
.work-card__category,
.work-card__hover-category {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 var(--work-type-gap);
}
.work-card__category { color: rgba(var(--ink),0.65); }
.work-card__hover-category { color: rgba(var(--ink),0.65); } /* was .55: 4.45:1 in light, 0.05 short of AA. Matches its sibling above. */
.work-card__hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding:
    clamp(2.25rem, 3.5vw, 3rem)
    clamp(1.5rem,  2.25vw, 2.25rem)
    clamp(1.5rem,  2.25vw, 2.25rem)
    clamp(1.5rem,  2.25vw, 2.25rem);
  background: rgba(var(--ground),0);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity    var(--duration-ui) var(--ease-standard),
    background var(--duration-ui) var(--ease-standard);
}
.work-card__hover-title {
  margin: 0 0 var(--work-type-gap);
  font-size: clamp(1.375rem, 1.6vw, 1.575rem);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--color-brand-white);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-card__close {
  position: absolute;
  top:   clamp(1rem, 1.5vw, 1.25rem);
  right: clamp(1rem, 1.5vw, 1.25rem);
  z-index: 5;
  background: transparent;
  border: 1px solid rgba(var(--ink),0.30);
  color: var(--color-brand-white);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: var(--fw-light);
  width: 2rem;
  height: 2rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity   var(--duration-ui) var(--ease-standard),
    transform var(--duration-ui) var(--ease-standard);
  pointer-events: none;
}
.work-card:focus-visible { outline: 2px solid var(--color-brand-purple); outline-offset: 3px; }
@media (hover: none), (pointer: coarse) {
  .work-card__close { display: flex; }
}
/* Reduced motion: the reveal still happens, instantly and without travel.
   Content is never withheld from a reader who suppresses animation. */
@media (prefers-reduced-motion: reduce) {
  .work-card__default,
  .work-card__hover,
  .work-card__summary,
  .work-card__cta,
  .work-card__close,
  .work-card__bg-img { transition: none !important; }
  .work-card__summary,
  .work-card__cta,
  .work-card__close { transform: none !important; }
}