/*=================================================================*/
/*  EXPLORATION — Work Page Rail Redesign (2026-08-12)
/*  /work rebuilt around the shipped Blueprint rail banners:
/*  - the homepage pointer-reveal lattice runs on the page
/*  - featured case studies use the Blueprint combo, tightened
/*  - three quieter "Other projects" treatments compared below
/*  Loads after warm.css and the shipped rail-variants stylesheet.
/*=================================================================*/

/*--- lattice geometry anchor -------------------------------------*/
/* home-rail-lattice.js measures #hero .container-xl; this invisible
   anchor reproduces the homepage's 1140px content column. */

.work-rails-anchor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.work-rails-anchor .container-xl {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 12px;
}

/*--- always-on lattice (Other projects downward) ------------------*/
/* Mirrors .home-rail-lattice so both canvases share a stacking layer. */

.work-rails-static {
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.work-rails-static-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
}

/*--- featured stage: banners vs cards ----------------------------*/

.featured-stage .featured-panel {
  display: none;
}

.featured-stage[data-featured="banners"] .featured-panel[data-panel="banners"],
.featured-stage[data-featured="cards"] .featured-panel[data-panel="cards"],
.featured-stage[data-featured="duo"] .featured-panel[data-panel="duo"],
.featured-stage[data-featured="briefs"] .featured-panel[data-panel="briefs"] {
  display: block;
  animation: op-panel-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/*--- featured banners: tightened Blueprint -----------------------*/

.rail-work-section.work-rails-featured {
  padding-top: clamp(16px, 1.6vw, 24px);
}

/* the shipped heading reserves 132px + 28px block padding; /work sits
   directly under the nav, so it needs far less air above the title */
.work-rails-featured .rail-work-heading {
  min-height: 0;
  padding-block: 0 26px;
}

@media (max-width: 767px) {
  .work-rails-featured .rail-work-heading {
    padding: 0 12px 24px;
  }
}

/* smaller banner: 350px → 240px, snapped to whole lattice steps by
   script.js (--wr-card-height / --wr-gap / --wr-nudge) */
.work-rails-featured .rail-case,
.work-rails-featured .rail-case__art {
  min-height: var(--wr-card-height, 240px);
}

.work-rails-featured[data-rail-spacing="roomy"] .rail-work-list {
  row-gap: var(--wr-gap, clamp(24px, 3vw, 42px));
}

.work-rails-featured .rail-work-list,
.work-rails-featured .duo-grid {
  margin-top: var(--wr-nudge, 0px);
}

.work-rails-featured .rail-case__copy {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* smaller title, still holding one line at desktop widths */
.work-rails-featured .rail-case__copy h3 {
  margin-bottom: 11px;
  font-size: clamp(21px, 1.7vw, 24px);
  line-height: 1.18;
}

.work-rails-featured .rail-case__summary {
  font-size: 16.5px;
  line-height: 1.52;
}

.work-rails-featured .rail-case__meta {
  margin-bottom: 11px;
  min-height: 0;
}

/* pull the CTA closer to the summary above it */
.work-rails-featured[data-rail-cta="after"] .rail-case__text-cta--after {
  margin-top: 12px;
}

/* the icon is hidden by default outside the shipped study's converged
   Rhythm combo — this is Blueprint, so show it explicitly, matching the
   home experience: locked/unlocked state is toggled by script.js */
.work-rails-featured .rail-case__access-icon {
  display: inline-grid;
  place-items: center;
  width: 13px;
  color: currentColor;
  font-size: 11px;
  line-height: 1;
}

/* shorter banners need a smaller resting offset for the artwork */
.work-rails-featured .rail-case__visual-group {
  transform: translateY(12px);
}

.work-rails-featured .rail-case:is(:hover, :focus-visible) .rail-case__visual-group {
  transform: translateY(12px) scale(1.035);
}

/* independent nudges on top of the group's shared position: the image
   drops a little further, the brand mark lifts a little higher */
.work-rails-featured .rail-case__visual-group > img {
  transform: translateY(8px);
}

.work-rails-featured .rail-case__brandline {
  transform: translate(-50%, -4px);
}

/* Chubble joins the featured set (light + dark washes) */
.rail-case--chubble {
  --case-accent: #2E9C74;
  --case-wash: color-mix(in srgb, #DCF3E9 84%, var(--warm-bg));
}

.rail-case__logo--chubble {
  height: 17px;
  max-width: 84px;
}

body.dark-mode .rail-case--chubble {
  --case-wash: color-mix(in srgb, #1D5C44 48%, var(--warm-bg));
}

body.dark-mode .work-rails-featured .rail-case--quizlet .rail-case__logo {
  filter: brightness(1.3) saturate(.9);
}

body.dark-mode .work-rails-featured .rail-case--quizlet .rail-case__industry {
  color: color-mix(in srgb, #4255ff 72%, var(--warm-ink));
}

/* Match the more restrained homepage banner hover wash. */
body.dark-mode .work-rails-featured .rail-case:is(:hover, :focus-visible)::before {
  background-color: color-mix(in srgb, var(--case-wash) 76%, var(--warm-bg));
}

@media (max-width: 767px) {
  /* Featured banners keep their visual in a consistent side panel. */
  .work-rails-featured .rail-case,
  .work-rails-featured .rail-case__art {
    min-height: var(--work-mobile-case-height, 300px);
  }

  .work-rails-featured .rail-case {
    height: var(--work-mobile-case-height, 300px);
    grid-template-columns: minmax(0, 5fr) minmax(108px, 3fr);
    grid-template-rows: var(--work-mobile-case-height, 300px);
  }

  .work-rails-featured .rail-case__copy {
    grid-column: 1;
    grid-row: 1;
    padding: 22px 16px 22px 6px;
  }

  .work-rails-featured .rail-case__art {
    grid-column: 2;
    grid-row: 1;
    height: var(--work-mobile-case-height, 300px);
    max-height: var(--work-mobile-case-height, 300px);
    overflow: hidden;
  }

  .work-rails-featured .rail-case__visual-group > img {
    width: 112%;
    height: 70%;
  }

  .work-rails-featured .rail-case__meta {
    margin-bottom: 9px;
  }

  .work-rails-featured .rail-case__highlights {
    font-size: 10px;
  }

  .work-rails-featured .rail-case__copy h3 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.2;
  }

  .work-rails-featured .rail-case__summary { font-size: 14px; line-height: 1.42; }
  .work-rails-featured[data-rail-cta="after"] .rail-case__text-cta--after { margin-top: 14px; font-size: 10px; }
}

/*--- featured option 02: vertical cards --------------------------*/

.fc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: var(--rail-content-width, min(1140px, calc(100vw - 24px)));
  margin: 0 auto;
}

.fc-card {
  --case-accent: var(--warm-primary);
  --case-wash: color-mix(in srgb, var(--warm-primary) 8%, var(--warm-bg));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--warm-border);
  border-radius: 10px;
  overflow: hidden;
  color: var(--warm-ink) !important;
  text-decoration: none !important;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.fc-card--quizlet { --case-accent: #4255ff; --case-wash: color-mix(in srgb, #e4e7ff 84%, var(--warm-bg)); }
.fc-card--sibly { --case-accent: #cb5c8a; --case-wash: color-mix(in srgb, #f7dfe9 82%, var(--warm-bg)); }
.fc-card--nextdoor { --case-accent: #5f8d19; --case-wash: color-mix(in srgb, #e5f0d5 84%, var(--warm-bg)); }
.fc-card--chubble { --case-accent: #2E9C74; --case-wash: color-mix(in srgb, #DCF3E9 84%, var(--warm-bg)); }

body.dark-mode .fc-card--quizlet { --case-wash: color-mix(in srgb, #26327e 48%, var(--warm-bg)); }
body.dark-mode .fc-card--sibly { --case-wash: color-mix(in srgb, #6d2c49 48%, var(--warm-bg)); }
body.dark-mode .fc-card--nextdoor { --case-wash: color-mix(in srgb, #355316 48%, var(--warm-bg)); }
body.dark-mode .fc-card--chubble { --case-wash: color-mix(in srgb, #1D5C44 48%, var(--warm-bg)); }

.fc-card:hover,
.fc-card:focus-visible {
  border-color: color-mix(in srgb, var(--case-accent) 38%, transparent);
  background-color: color-mix(in srgb, var(--case-wash) 30%, var(--warm-bg));
}

.fc-card__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  background: var(--case-wash);
  overflow: hidden;
}

/* dashed hairline between art and copy, quoting the rail borders */
.fc-card__art::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  height: var(--rail-hairline, 1px);
  background-image: repeating-linear-gradient(to right, var(--rail-dash-color, rgba(50, 91, 128, 0.3)) 0 7px, transparent 7px 13px);
}

.fc-card__brandline {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.84;
  transform: translateX(-50%);
  transition: opacity 220ms ease;
}

.fc-card:is(:hover, :focus-visible) .fc-card__brandline {
  opacity: 1;
}

.fc-card__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 16px;
  max-width: 84px;
  object-fit: contain;
}

.fc-card__industry {
  display: inline-flex;
  align-items: center;
  color: var(--case-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fc-card__visual {
  position: relative;
  z-index: 2;
  width: 58%;
  height: 62%;
  margin-top: 14px;
  object-fit: contain;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fc-card:is(:hover, :focus-visible) .fc-card__visual {
  transform: scale(1.035);
}

.fc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 26px 22px;
}

.fc-card__tags {
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  color: var(--case-accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.fc-card__tags li {
  display: flex;
  align-items: center;
}

.fc-card__tags li:not(:last-child)::after {
  content: "·";
  margin-inline: 9px;
  color: color-mix(in srgb, var(--case-accent) 64%, transparent);
}

.fc-card__body h3 {
  margin: 0 0 9px;
  color: var(--warm-ink);
  font-family: var(--warm-font-head) !important;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

.fc-card__summary {
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--warm-ink-soft) 78%, var(--warm-ink));
  font-size: 15px;
  line-height: 1.5;
}

.fc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: auto;
  padding-bottom: 5px;
  border-bottom: 2px solid color-mix(in srgb, var(--case-accent) 42%, transparent);
  color: var(--case-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 180ms ease;
}

.fc-card:is(:hover, :focus-visible) .fc-card__cta {
  border-bottom-color: var(--case-accent);
}

.fc-card__cta svg {
  width: 13px;
  height: 13px;
}

.fc-card__lock {
  font-size: 10px;
}

@media (max-width: 767px) {
  .fc-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .fc-card__art {
    height: 180px;
  }
}

/*--- featured option 03: duo — half-width rail banners -----------*/
/* Same language as the Blueprint banners: square corners, washes,
   dashed rail hairlines, tags, and the After CTA. Each banner spans
   exactly two rail bays; the image block fills exactly one, so its
   edges sit on the page's dashed rails. */

.duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--wr-gap, clamp(24px, 3vw, 42px));
  width: var(--rail-content-width, min(1140px, calc(100vw - 24px)));
  margin: 0 auto;
}

.duo-card {
  /* case colors come from the shared .fc-card--<project> modifiers */
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: var(--wr-card-height, 240px);
  color: var(--warm-ink) !important;
  text-decoration: none !important;
  transition: background-color 220ms ease;
}

/* dashed top and bottom hairlines, exactly like the roomy banners */
.duo-card::before,
.duo-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  height: var(--rail-hairline, 1px);
  background-image: repeating-linear-gradient(to right, var(--rail-dash-color, rgba(50, 91, 128, 0.3)) 0 7px, transparent 7px 13px);
  pointer-events: none;
}

.duo-card::before { top: 0; }
.duo-card::after { bottom: 0; }

/* full-banner hover wash, matching Blueprint's hover */
.duo-card:hover,
.duo-card:focus-visible {
  background-color: color-mix(in srgb, var(--case-wash) 48%, var(--warm-bg));
}

.duo-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px clamp(18px, 2vw, 28px) 24px 12px;
}

.duo-card__tags {
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  color: var(--case-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.duo-card__tags li {
  display: flex;
  align-items: center;
}

.duo-card__tags li:not(:last-child)::after {
  content: "·";
  margin-inline: 9px;
  color: color-mix(in srgb, var(--case-accent) 64%, transparent);
}

.duo-card__copy h3 {
  margin: 0 0 8px;
  color: var(--warm-ink);
  font-family: var(--warm-font-head) !important;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.22;
}

.duo-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: color-mix(in srgb, var(--warm-ink-soft) 78%, var(--warm-ink));
  font-size: 14px;
  line-height: 1.5;
}

/* the banners' After CTA, verbatim */
.duo-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 12px;
  padding: 9px 0 6px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--case-accent) 52%, transparent);
  color: var(--case-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.duo-card__cta svg {
  width: 18px;
  height: 18px;
}

.duo-card__art {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--case-wash);
  overflow: hidden;
}

.duo-card__brandline {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.84;
  transform: translateX(-50%);
  transition: opacity 220ms ease;
}

.duo-card:is(:hover, :focus-visible) .duo-card__brandline {
  opacity: 1;
}

.duo-card__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 14px;
  max-width: 76px;
  object-fit: contain;
}

.duo-card__industry {
  display: inline-flex;
  align-items: center;
  color: var(--case-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.duo-card__visual {
  position: relative;
  z-index: 2;
  width: 74%;
  height: 62%;
  margin-top: 14px;
  object-fit: contain;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.duo-card:is(:hover, :focus-visible) .duo-card__visual {
  transform: scale(1.035);
}

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

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

  .duo-card__copy {
    order: 2;
    padding: 20px 12px;
  }

  .duo-card__art {
    order: 1;
    height: 170px;
  }
}

/*--- featured option 04: briefs — compact rail index -------------*/
/* Four short rails retain Home's full-width banner cadence but compress
   the decision into title, proof point, and a compact product glimpse. */

.brief-list {
  display: grid;
  row-gap: var(--wr-gap, 36px);
  width: var(--rail-content-width, min(1140px, calc(100vw - 24px)));
  margin: var(--wr-nudge, 0px) auto 0;
}

.brief-rail {
  --case-accent: var(--warm-primary);
  --case-wash: color-mix(in srgb, var(--warm-primary) 8%, var(--warm-bg));
  position: relative;
  display: grid;
  /* The first quarter is one complete major rail bay: the visual sits
     exactly between the left page edge and the first vertical page rail. */
  grid-template-columns: 25% minmax(0, 1fr) 72px;
  align-items: stretch;
  min-height: 168px;
  color: var(--warm-ink) !important;
  text-decoration: none !important;
  isolation: isolate;
}

/* These are the same case tokens that power the Home rail artwork. They
   intentionally live on Briefs with higher specificity than its fallback. */
.brief-rail.rail-case--quizlet { --case-accent: #4255ff; --case-wash: color-mix(in srgb, #e4e7ff 84%, var(--warm-bg)); }
.brief-rail.rail-case--sibly { --case-accent: #cb5c8a; --case-wash: color-mix(in srgb, #f7dfe9 82%, var(--warm-bg)); }
.brief-rail.rail-case--nextdoor { --case-accent: #5f8d19; --case-wash: color-mix(in srgb, #e5f0d5 84%, var(--warm-bg)); }
.brief-rail.rail-case--chubble { --case-accent: #2E9C74; --case-wash: color-mix(in srgb, #DCF3E9 84%, var(--warm-bg)); }

.brief-rail::before,
.brief-rail::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

.brief-rail::before {
  inset-block: 0;
  background-color: color-mix(in srgb, var(--warm-surface) 76%, transparent);
  transition: background-color 220ms ease;
}

.brief-rail::after {
  bottom: 0;
  height: var(--rail-hairline, 1px);
  background: color-mix(in srgb, var(--warm-ink) 18%, transparent);
}

.brief-rail__copy {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  min-width: 0;
  padding: 20px 32px 20px 30px;
}

.brief-rail__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--case-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.brief-rail__eyebrow .fa-lock {
  font-size: 9px;
}

.brief-rail__title {
  overflow: hidden;
  color: var(--warm-ink);
  font-family: var(--warm-font-head) !important;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-rail__summary {
  overflow: hidden;
  margin: 0;
  color: color-mix(in srgb, var(--warm-ink-soft) 78%, var(--warm-ink));
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-rail__art {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--case-wash);
}

/* This is the visual bay's right-hand page rail: a quiet vertical echo of
   the dotted horizontal separators used by the Home banners. */
.brief-rail__art::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--rail-hairline, 1px);
  background-image: repeating-linear-gradient(to bottom, var(--rail-dash-color, rgba(50, 91, 128, 0.3)) 0 7px, transparent 7px 13px);
  pointer-events: none;
}

.brief-rail__logo {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 18px;
  width: auto;
  height: 14px;
  max-width: 76px;
  object-fit: contain;
}

.brief-rail__visual {
  width: 56%;
  height: 70%;
  margin-top: 18px;
  object-fit: contain;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.brief-rail__arrow {
  grid-column: 3;
  display: grid;
  place-items: center;
  padding-right: 16px;
  color: var(--case-accent);
}

.brief-rail__arrow svg {
  width: 21px;
  height: 21px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brief-rail:is(:hover, :focus-visible)::before {
  background-color: color-mix(in srgb, var(--case-wash) 48%, var(--warm-bg));
}

.brief-rail:is(:hover, :focus-visible) .brief-rail__visual {
  transform: scale(1.06);
}

.brief-rail:is(:hover, :focus-visible) .brief-rail__arrow svg {
  transform: translate(3px, -3px);
}

body.dark-mode .brief-rail::before {
  background-color: var(--warm-bg);
}

body.dark-mode .brief-rail.rail-case--quizlet { --case-wash: color-mix(in srgb, #26327e 48%, var(--warm-bg)); }
body.dark-mode .brief-rail.rail-case--sibly { --case-wash: color-mix(in srgb, #6d2c49 48%, var(--warm-bg)); }
body.dark-mode .brief-rail.rail-case--nextdoor { --case-wash: color-mix(in srgb, #355316 48%, var(--warm-bg)); }
body.dark-mode .brief-rail.rail-case--chubble { --case-wash: color-mix(in srgb, #1D5C44 48%, var(--warm-bg)); }

body.dark-mode .brief-rail:is(:hover, :focus-visible)::before {
  background-color: var(--case-wash);
}

@media (max-width: 767px) {
  .brief-list {
    row-gap: 22px;
  }

  .brief-rail {
    grid-template-columns: 128px minmax(0, 1fr) 56px;
    min-height: 142px;
  }

  .brief-rail__copy {
    gap: 10px;
    padding: 20px 18px 20px 22px;
  }

  .brief-rail__title,
  .brief-rail__summary {
    white-space: normal;
  }

  .brief-rail__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .brief-rail__logo {
    top: 11px;
    left: 12px;
    height: 12px;
    max-width: 58px;
  }
}

@media (max-width: 575px) {
  .brief-list {
    row-gap: 16px;
  }

  .brief-rail {
    grid-template-columns: 86px minmax(0, 1fr) 44px;
    min-height: 122px;
  }

  .brief-rail__eyebrow {
    font-size: 9px;
  }

  .brief-rail__copy {
    gap: 9px;
    padding: 16px 10px 16px 14px;
  }

  .brief-rail__arrow {
    padding-right: 8px;
  }

  .brief-rail__title {
    font-size: 17px;
  }

  .brief-rail__summary {
    display: none;
  }
}

/*--- other projects section --------------------------------------*/

.op-section {
  position: relative;
  padding-top: clamp(72px, 8vw, 108px);
  padding-bottom: clamp(64px, 7vw, 96px);
}

.op-container {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 12px;
}

.op-header {
  margin-bottom: 38px;
  text-align: center;
}

.op-header h2 {
  margin: 0 0 8px;
  color: var(--warm-ink);
  font-family: var(--warm-font-head) !important;
  font-size: clamp(23px, 2.1vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.op-sub {
  margin: 0 0 22px;
  color: var(--warm-ink-soft);
  font-size: 15px;
}

/*--- filters ---*/

.op-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.op-filter {
  padding: 6px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--warm-ink-soft);
  font-family: var(--warm-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms linear, border-color 120ms linear, background-color 120ms linear;
}

.op-filter:hover {
  color: var(--warm-ink);
}

.op-filter.is-active {
  border-color: color-mix(in srgb, var(--warm-primary) 44%, transparent);
  color: var(--warm-primary);
}

body.dark-mode .op-filter.is-active {
  border-color: color-mix(in srgb, #6FA8EF 46%, transparent);
  color: #6FA8EF;
}

/*--- shared bits ---*/

.op-panel {
  display: none;
}

.op-section[data-treatment="index"] .op-panel[data-panel="index"],
.op-section[data-treatment="tiles"] .op-panel[data-panel="tiles"],
.op-section[data-treatment="strip"] .op-panel[data-panel="strip"],
.op-section[data-treatment="classic"] .op-panel[data-panel="classic"],
.op-section[data-treatment="wall"] .op-panel[data-panel="wall"] {
  display: block;
  animation: op-panel-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.op-section[data-treatment="tiles"] .op-panel[data-panel="tiles"],
.op-section[data-treatment="strip"] .op-panel[data-panel="strip"] {
  display: grid;
}

/* Classic is a Bootstrap .row and Wall centres partial rows, so both
   stay on flex rather than grid */
.op-section[data-treatment="wall"] .op-panel[data-panel="wall"] {
  display: flex;
}

/* Classic is a Bootstrap .row, so it keeps flex and its own gutters */
.op-section[data-treatment="classic"] .op-panel[data-panel="classic"] {
  display: flex;
}

@keyframes op-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.op-panel {
  position: relative;
}

.op-tags {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  color: var(--warm-ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.op-tags li {
  display: flex;
  align-items: center;
}

.op-tags li:not(:last-child)::after {
  content: "·";
  margin-inline: 8px;
  opacity: 0.55;
}

.op-arrow {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--warm-ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms linear, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.op-arrow svg {
  width: 17px;
  height: 17px;
}

.op-row__name-ar {
  margin-left: 6px;
  color: var(--warm-ink-soft);
  font-size: 0.82em;
}

.op-empty {
  margin: 34px 0 0;
  color: var(--warm-ink-soft);
  font-size: 15px;
  text-align: center;
}

/*--- treatment 01: index -----------------------------------------*/

.op-index {
  border-top: 1px solid var(--warm-border);
}

.op-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 20px;
  padding: 15px 10px;
  border-bottom: 1px solid var(--warm-border);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease, padding-left 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.op-row:hover,
.op-row:focus-visible {
  background-color: var(--warm-bg-2);
  padding-left: 18px;
  color: inherit;
}

.op-row__thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
}

.op-row__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: saturate(0.9);
}

.op-row__name {
  color: var(--warm-ink);
  font-family: var(--warm-font-head);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.op-row:hover .op-arrow,
.op-row:focus-visible .op-arrow {
  opacity: 1;
  transform: none;
}

/*--- treatment 02: tiles -----------------------------------------*/

.op-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--warm-border);
  border-left: 1px solid var(--warm-border);
}

.op-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px 24px;
  border-right: 1px solid var(--warm-border);
  border-bottom: 1px solid var(--warm-border);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.op-tile:hover,
.op-tile:focus-visible {
  background-color: var(--warm-bg-2);
  color: inherit;
}

.op-tile__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 108px;
  margin-bottom: 16px;
}

.op-tile__art img {
  max-width: 62%;
  max-height: 100%;
  object-fit: contain;
  filter: saturate(0.9);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.op-tile:hover .op-tile__art img {
  transform: translateY(-3px);
}

.op-tile__name {
  margin-bottom: 7px;
  color: var(--warm-ink);
  font-family: var(--warm-font-head);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.op-tile .op-tags {
  justify-content: center;
}

/*--- treatment 03: strip -----------------------------------------*/

.op-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.op-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--warm-border);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.op-card:hover,
.op-card:focus-visible {
  background-color: var(--warm-bg-2);
  border-color: color-mix(in srgb, var(--warm-ink) 22%, transparent);
  color: inherit;
}

.op-card__thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: var(--warm-bg-2);
}

.op-card:hover .op-card__thumb {
  background: var(--warm-bg);
}

.op-card__thumb img {
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  filter: saturate(0.9);
}

.op-card__copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.op-card__name {
  color: var(--warm-ink);
  font-family: var(--warm-font-head);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.op-card .op-arrow {
  margin-left: auto;
}

.op-card:hover .op-arrow,
.op-card:focus-visible .op-arrow {
  opacity: 1;
  transform: none;
}

/*--- treatment 04: classic ---------------------------------------*/
/* The production /work card verbatim: .card-rounded, .regular-bg,
   .card-image, .static-tag, hr and "View Details" all come from
   custom.css / style.css. Only the row needs breathing room for the
   thumbnails that hang above each card. */

.op-classic {
  padding-top: 52px;
}

/*--- treatment 05: wall ------------------------------------------*/
/* The Studio Wall concept: prints pinned to the page with a single pin,
   subtle 1° rotations, a gallery placard, and one handwritten aside. */

.op-wall {
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  /* The filter tween gives the panel a temporary explicit height. Without
     this, flexbox stretches a one-card row to fill that height before the
     panel settles, making the print visibly grow then shrink. */
  align-content: flex-start;
  /* a wider column gap than row gap: since the row is centred, more
     horizontal air pushes the outer columns further from the middle
     one without moving the centre itself */
  gap: 54px 46px;
  padding-top: 30px;
}

.ow-print {
  /* narrower than a strict third so a lone card reads as a print, not
     a stretched panel; the row centres whatever is left over */
  flex: 0 0 322px;
  align-self: flex-start;
  max-width: 100%;
}

.ow-print {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px 15px 0;
  border: 1px solid var(--warm-border);
  border-radius: 6px;
  background: var(--warm-surface);
  box-shadow: 0 14px 32px rgba(28, 32, 38, 0.09);
  color: inherit;
  text-decoration: none;
  /* The pin is 13px tall and begins 8px above the card, placing its centre
     1.5px above the top edge. Rotating around that point makes each print
     swing from the pin instead of lifting as one rigid card. */
  transform-origin: 50% -1.5px;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

body.dark-mode .ow-print {
  background: #1B222B;
  border-color: #303844;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}

/* of-type so the handwritten note doesn't offset the alternation */
.ow-print:nth-of-type(odd) { transform: rotate(-1deg); }
.ow-print:nth-of-type(even) { transform: rotate(1.1deg); }

.ow-print:hover,
.ow-print:focus-visible {
  box-shadow: 0 24px 48px rgba(28, 32, 38, 0.15);
  color: inherit;
}

/* Swing the print straight beneath the pin while keeping the pin as the
   pivot. The resting tilt returns naturally when the pointer leaves. */
.ow-print:nth-of-type(odd):hover,
.ow-print:nth-of-type(odd):focus-visible { transform: rotate(0); }
.ow-print:nth-of-type(even):hover,
.ow-print:nth-of-type(even):focus-visible { transform: rotate(0); }

body.dark-mode .ow-print:hover {
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.52);
}

.ow-print__pin {
  position: absolute;
  z-index: 3;
  top: -8px;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--warm-primary);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.28), 0 3px 6px rgba(28, 32, 38, 0.28);
  transform: translateX(-50%);
}

body.dark-mode .ow-print__pin {
  background: #6FA8EF;
}

.ow-print__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 208px;
  padding: 18px;
  border-radius: 4px;
  background: var(--warm-bg-2);
  overflow: hidden;
}

.ow-print__shot img {
  max-width: 78%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(0.94);
}

.ow-print__plaque {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 15px 5px 18px;
}

.ow-print .op-tags {
  margin-bottom: 6px;
  font-size: 10.5px;
}

/* title left, action right, on one line */
.ow-print__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.ow-print__name {
  min-width: 0;
  color: var(--warm-ink);
  font-family: var(--warm-font-head);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ow-print__go {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--warm-ink) 26%, transparent);
  color: var(--warm-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 180ms ease;
}

.ow-print:hover .ow-print__go {
  border-bottom-color: var(--warm-ink);
}

.ow-print__go svg {
  width: 14px;
  height: 14px;
}

/*--- floating study controls -------------------------------------*/

.op-controls {
  position: fixed;
  z-index: 60;
  left: 22px;
  bottom: 22px;
  width: min(220px, calc(100vw - 44px));
  padding: 13px 14px 12px;
  background: color-mix(in srgb, var(--warm-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--warm-border);
  border-radius: 16px;
  box-shadow: 0 18px 44px var(--warm-shadow);
}

body.op-controls-hidden .op-controls {
  display: none;
}

.op-controls__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.op-controls__title {
  font-family: var(--warm-font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--warm-ink);
}

.op-controls__note {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-ink-soft);
}

.op-controls__group-label {
  margin: 10px 2px 6px;
  color: var(--warm-ink-soft);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.op-controls__tabs {
  display: flex;
  gap: 5px;
}

.op-controls__tabs--wrap {
  flex-wrap: wrap;
}

.op-controls__tabs--wrap .op-controls__tab {
  flex: 0 0 auto;
}

.op-controls__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  justify-content: center;
  padding: 7px 8px;
  border: 1px solid var(--warm-border);
  border-radius: 30px;
  background: transparent;
  color: var(--warm-ink-soft);
  font-family: var(--warm-font-body);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}

.op-controls__tab span {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--warm-primary);
}

.op-controls__tab:hover {
  border-color: var(--warm-primary);
  color: var(--warm-ink);
}

.op-controls__tab.is-active {
  background: var(--warm-primary);
  border-color: var(--warm-primary);
  color: #fff;
}

.op-controls__tab.is-active span {
  color: rgba(255, 255, 255, 0.75);
}

/*--- responsive ---------------------------------------------------*/

@media (max-width: 991px) {
  .op-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ow-print {
    flex-basis: 300px;
  }

  .op-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .op-row {
    grid-template-columns: 40px minmax(0, 1fr) 26px;
    gap: 14px;
  }

  .op-row .op-tags {
    display: none;
  }

  .op-row__thumb {
    width: 40px;
    height: 40px;
  }

  .op-controls {
    left: 12px;
    bottom: 12px;
  }

  .op-wall {
    flex-direction: column;
    align-items: center;
    gap: 38px;
  }

  .ow-print {
    flex: 0 0 322px;
    width: min(322px, calc(100vw - 48px));
    align-self: center;
    left: 50%;
    margin-inline: 0;
  }

  .ow-print:nth-of-type(odd),
  .ow-print:nth-of-type(even),
  .ow-print:nth-of-type(odd):hover,
  .ow-print:nth-of-type(even):hover,
  .ow-print:nth-of-type(odd):focus-visible,
  .ow-print:nth-of-type(even):focus-visible {
    transform: translateX(-50%);
  }
}

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

  .ow-print { flex-basis: 322px; }
}

/*--- reduced motion ----------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  .op-panel,
  .op-panel [data-tags],
  .op-row,
  .op-tile,
  .op-tile__art img,
  .op-card,
  .op-arrow,
  .oc-card,
  .oc-card__art img,
  .ow-print {
    animation: none !important;
    transition: none !important;
  }

  /* keep the pinned-print character, drop the hover movement */
  .ow-print:hover,
  .ow-print:focus-visible {
    transform: none;
  }

  .ow-print:nth-of-type(odd):hover { transform: rotate(-1deg); }
  .ow-print:nth-of-type(even):hover { transform: rotate(1.1deg); }
}