/* ==========================================================================
   FULLSTACK — Selected Work + case studies
   Shared components live in components.css; this file holds the project card,
   the curated grid and the case-study layout.
   ========================================================================== */

/* ==========================================================================
   01. HERO
   ========================================================================== */

/* Measured on the rendered page: "real businesses." is the widest line at
   10.04em, so the cap is 100/10.04 ≈ 9.96cqw. 9.6cqw leaves margin. */
/* Measured on the rendered page: with the approved four-line break the widest
   line is "businesses." at 7.092em, so the column can carry the full display
   size. The cap only takes over on narrower screens. */
.fs-hero--work .fs-hero__title { font-size: min(var(--fs-text-d1), 13.3cqw); }

/* Editorial fragments beside the headline — abstractions of the work, not
   screenshots of it. */
.fs-fragments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-space-3);
  width: 100%;
}

.fs-fragment {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  padding: var(--fs-space-5);
  border: var(--fs-border-width) solid var(--fs-dark-border);
  background-color: var(--fs-dark-bg-raised);
}

.fs-fragment__label {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-text-on-dark-muted);
}

.fs-fragment__figure {
  font-size: 3rem;
  font-weight: var(--fs-weight-black);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fs-text-on-dark);
}

.fs-fragment--range { grid-column: 1 / -1; }

.fs-fragment__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-2);
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-text-on-dark);
}

.fs-fragment__arrow { color: var(--fs-text-on-dark-faint); }

/* ---- Hero fragment cluster, per the approved design ------------------- */

/* The cluster runs three rows: window + span, count + flow, range + type. */
.fs-fragment--window { gap: var(--fs-space-4); }

.fs-fragment__chrome {
  display: flex;
  gap: 0.375rem;
}

.fs-fragment__chrome span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--fs-dark-border-strong);
}

.fs-fragment__chrome .is-on { background-color: var(--fs-accent); }

/* Abstracted content lines. Deliberately shapes, not text: the panel stands
   for a kind of interface and must not imply a specific client's product. */
.fs-fragment__skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin-top: auto;
}

.fs-fragment__skeleton span {
  height: 6px;
  background-color: var(--fs-dark-border-strong);
}

.fs-fragment__skeleton span:first-child { width: 78%; }
.fs-fragment__skeleton span:nth-child(2) { width: 52%; }

/* The span card carries the accent in the design — the one lime block in the
   cluster, which is what stops the grid reading as six identical tiles. */
.fs-fragment--span {
  justify-content: space-between;
  background-color: var(--fs-accent);
  border-color: var(--fs-accent);
  --fs-accent-text: var(--fs-graphite);
}

.fs-fragment--span .fs-fragment__label { color: var(--fs-graphite); }
.fs-fragment--span .fs-mark__bar { fill: var(--fs-graphite); }

.fs-fragment__chip {
  padding: 0.3125rem 0.5rem;
  border: var(--fs-border-width) solid var(--fs-dark-border-strong);
  color: var(--fs-text-on-dark-2);
}

.fs-fragment__chip--on {
  border-color: var(--fs-accent);
  color: var(--fs-accent);
}

.fs-fragment--range {
  border-style: dashed;
  background-color: transparent;
}

.fs-fragment--type {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-4);
}

.fs-fragment__aa {
  font-size: 1.125rem;
  font-weight: var(--fs-weight-black);
  color: var(--fs-text-on-dark);
}

.fs-fragment__swatch {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: var(--fs-accent);
}

@media (max-width: 560px) {
  .fs-fragment--type { flex-wrap: wrap; }
}

/* ==========================================================================
   04. RANGE / DOMAINS
   ========================================================================== */

.fs-domains {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--fs-section-gap);
  background-color: var(--fs-divider);
  border: var(--fs-border-width) solid var(--fs-divider);
}

.fs-domain {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  padding: var(--fs-space-6) var(--fs-space-5) var(--fs-space-8);
  background-color: var(--fs-bg);
}

.fs-domain__title {
  letter-spacing: var(--fs-tracking-mono);
  color: var(--fs-fg);
  font-size: var(--fs-text-mono-lg);
}

.fs-domain__arrow { color: var(--fs-fg-muted); }

.fs-domain__items {
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-semibold);
  line-height: 1.9;
  color: var(--fs-fg-body);
}

@media (max-width: 1023px) {
  .fs-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .fs-domains { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   05. BEYOND THE SCREEN
   ========================================================================== */

.fs-beyond__title { margin-top: var(--fs-space-6); text-transform: uppercase; }
.fs-beyond__text { margin-top: var(--fs-space-5); }

.fs-stack-diagram { display: flex; flex-direction: column; width: 100%; }

.fs-stack-diagram__layer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-4);
  padding: var(--fs-space-4) var(--fs-space-5);
  border: var(--fs-border-width) solid var(--fs-border);
  font-size: 0.8125rem;
  font-weight: var(--fs-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fs-stack-diagram__layer + .fs-stack-diagram__layer { margin-top: 1.75rem; }

.fs-stack-diagram__layer + .fs-stack-diagram__layer::before {
  content: '↓';
  position: absolute;
  top: -0.875rem;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  font-weight: var(--fs-weight-regular);
  line-height: 1;
  color: var(--fs-fg-muted);
}

.fs-stack-diagram__layer--base {
  background-color: var(--fs-dark-bg-raised);
  border-color: var(--fs-border-strong);
}

/* ==========================================================================
   06. CASE STUDY
   ========================================================================== */

.fs-case-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 3.75rem);
  align-items: end;
}

.fs-case-hero__lead { container-type: inline-size; }

.fs-case-hero__title {
  margin-top: var(--fs-space-6);
  font-size: min(var(--fs-text-d2), 13cqw);
  font-weight: var(--fs-weight-black);
  line-height: var(--fs-leading-display);
  letter-spacing: var(--fs-tracking-display);
  text-transform: uppercase;
}

/* The project name leads; the positioning statement is a step down so a long
   sentence cannot out-shout the name it belongs to. */
.fs-case-hero__name { display: block; }

.fs-case-hero__title .fs-display-mute {
  display: block;
  margin-top: var(--fs-space-3);
  font-size: 0.58em;
  line-height: 1.05;
  letter-spacing: var(--fs-tracking-heading);
}

.fs-case-hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-4);
}

.fs-case-hero__meta-row {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-1);
  padding-bottom: var(--fs-space-4);
  border-bottom: var(--fs-border-width) solid var(--fs-hairline);
}

.fs-case-hero__meta dt {
  letter-spacing: var(--fs-tracking-mono);
  color: var(--fs-fg-muted);
}

.fs-case-hero__meta dd {
  margin: 0;
  font-size: var(--fs-text-h4);
  font-weight: var(--fs-weight-extrabold);
}

.fs-case-hero__visual {
  margin: var(--fs-section-gap) 0 0;
  overflow: hidden;
  background-color: var(--fs-dark-bg-raised);
}

.fs-case-hero__image { width: 100%; height: auto; }

@media (max-width: 1023px) {
  .fs-case-hero__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* --- Body: sticky rail + prose ------------------------------------------- */

.fs-case__layout {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

.fs-case__rail { position: sticky; top: calc(var(--fs-header-height) + 2rem); }

.fs-case__rail-list {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
  border-left: var(--fs-border-width) solid var(--fs-border);
  padding-left: var(--fs-space-5);
}

.fs-case__rail-list a:hover { color: var(--fs-fg); }

.fs-case__content { max-width: 46rem; }

.fs-case__block + .fs-case__block,
.fs-case__block + .fs-case__closing,
.fs-case__closing + .fs-case__block { margin-top: var(--fs-section-gap); }

.fs-case__heading {
  letter-spacing: var(--fs-tracking-mono);
  color: var(--fs-fg-muted);
  padding-bottom: var(--fs-space-4);
  border-bottom: var(--fs-border-emphasis) solid var(--fs-fg);
}

.fs-case__prose { margin-top: var(--fs-space-5); }

.fs-case__prose p {
  font-size: var(--fs-text-lead);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

.fs-case__prose p + p { margin-top: var(--fs-space-4); }

.fs-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-5);
}

.fs-case__tags li {
  padding: 0.4375rem 0.75rem;
  border: var(--fs-border-width) solid var(--fs-border);
  font-size: 0.8125rem;
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-fg);
}

.fs-case__tags--roles li {
  background-color: var(--fs-graphite);
  color: var(--fs-warm-white);
  border-color: var(--fs-graphite);
}

.fs-case__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-grid-gap);
  margin-top: var(--fs-space-5);
}

.fs-case__gallery-image {
  width: 100%;
  height: auto;
  border: var(--fs-border-width) solid var(--fs-border);
}

.fs-case__note {
  margin-top: var(--fs-space-4);
  font-size: 0.875rem;
  color: var(--fs-fg-muted);
}

.fs-case__live .fs-btn { margin-top: var(--fs-space-5); }

.fs-case__closing { margin-top: var(--fs-section-gap); }

.fs-related__more { margin-top: var(--fs-section-gap); }

@media (max-width: 1023px) {
  .fs-case__layout { grid-template-columns: minmax(0, 1fr); }
  .fs-case__rail { position: static; }
  .fs-case__rail-list { flex-direction: row; flex-wrap: wrap; gap: var(--fs-space-4); }
}

@media (max-width: 560px) {
  .fs-case__gallery { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   PAGE-LEVEL DISPLAY HEADINGS
   ========================================================================== */

/*
 * The approved Selected Work design sets its two editorial headings at display
 * scale rather than the shared section-header size used elsewhere on the site.
 * This is the page-specific override that reproduces it; every other page is
 * untouched because the selector is scoped to this page's own class.
 */
.fs-work-display {
  display: block;
  font-size: var(--fs-text-d2);
  font-weight: var(--fs-weight-black);
  line-height: var(--fs-leading-display);
  letter-spacing: var(--fs-tracking-display);
  text-transform: uppercase;
}

.fs-work-display--sm { font-size: var(--fs-text-d3); }

.fs-work-display__line { display: block; }

.fs-work-intro .fs-section-header__title,
.fs-projects .fs-section-header__title { max-width: none; }

/* The heading now carries the section, so the supporting column needs its own
   alignment rather than sitting on the old header baseline. */
.fs-work-intro .fs-section-header--split { align-items: start; }

.fs-projects__range {
  margin-top: var(--fs-space-6);
  letter-spacing: var(--fs-tracking-mono-wide);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

/* ==========================================================================
   EXPERIENCE — DARK BAND
   ========================================================================== */

/*
 * The approved design puts this section on the dark ground, with the heading
 * running full width and the supporting paragraph beneath it rather than
 * beside it. On the dark ground the accent resolves to lime, which is what
 * makes "product thinkers." the one coloured line in the section.
 */
.fs-range__header { display: block; }

.fs-range__header .fs-section-header__title { max-width: 22ch; }

.fs-range__header .fs-section-header__text {
  margin-top: var(--fs-space-6);
  max-width: 34rem;
}