/* case-detail-citi.css — components unique to the Citi Realty Services
   (Northeast) case study.

   This page also loads case-detail-wf.css, which is where .record-row,
   .case-figure, .flow-chain, .practice-list and .provenance already live. Those
   components are not Wells-Fargo-specific despite the filename; they were just
   written there first. If a third case study needs them, rename that file to
   case-detail-work.css and update the two <link> tags — do not fork them. */

/* ---- Constraint grid ----------------------------------------------------
   Sits on .deep (a light surface), so all colour is ink-on-paper. Six cards,
   3-up on desktop, because a rollout's difficulty is not one bottleneck — it
   is six independent ones that all have to clear before a single sign moves. */
.constraint-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: rgba(17, 16, 14, 0.2);
  border: 1px solid rgba(17, 16, 14, 0.2);
  margin-top: clamp(34px, 4vw, 54px);
}

.constraint-grid > article {
  background: var(--paper);
  padding: 26px 24px 24px;
}

.deep .constraint-grid > article { background: var(--paper); }

.constraint-grid .con-idx {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.constraint-grid h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0 0 10px;
}

.constraint-grid p {
  font-size: 14.5px;
  line-height: 1.52;
  margin: 0;
  color: rgba(17, 16, 14, 0.74);
}

/* ---- Pull statement ------------------------------------------------------
   One line of argument given the width of a section, used once. Not .case-quote
   — that component is styled for an attributed client quote, and there is no
   quote on this page by design. */
.pull-statement {
  border-left: 3px solid var(--red);
  font-family: var(--serif);
  font-size: clamp(23px, 2.5vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: clamp(34px, 4vw, 52px) 0 0;
  max-width: 900px;
  padding-left: clamp(20px, 2.4vw, 34px);
}

.dark .pull-statement { color: var(--white); }

/* ---- Mark comparison ----------------------------------------------------
   Two specimen panels either side of a dated pivot. The panels are deliberately
   plain — a neutral field, a thin rule, a caption — because the artwork inside
   them belongs to someone else and should read as a cited specimen, not as
   decoration this page is claiming credit for. */
/* Three specimens, two pivots. Column widths are weighted to each mark's aspect
   ratio (3.77 : 1.70 : 1.55) rather than split evenly, so all three can render
   at one common height without the wide citigroup lockup hitting max-width and
   breaking the height match. Equal columns would have forced it down to ~55px
   tall while the other two sat at 92px. */
.mark-compare {
  align-items: start;
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: 3.8fr auto 1.7fr auto 1.6fr;
  margin: clamp(34px, 4vw, 54px) 0 0;
  max-width: 1100px;
}

.mark-compare > .art-caption {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.mark-panel .mark-era {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.mark-panel .mark-slot {
  align-items: center;
  background: var(--white);
  border: 1px solid rgba(17, 16, 14, 0.28);
  display: flex;
  justify-content: center;
  min-height: 146px;
  padding: clamp(16px, 1.8vw, 24px);
}

/* Both specimens are constrained by HEIGHT, not width, so the two marks are
   compared the way a fascia band actually constrains them — same cap height,
   widths falling where they fall. Matching widths instead would shrink the
   nine-character citigroup lockup until it read as the smaller brand, which is
   the opposite of what happened.

   92px is the ceiling: at 3.774:1 the wide mark lands at 347px, which clears
   its weighted column at the 1100px max-width without max-width having to
   intervene and break the height match. */
.mark-panel .mark-slot img {
  height: auto;
  max-height: 92px;
  width: auto;
  max-width: 100%;
}

/* Empty state. The artwork is supplied separately, so a missing file degrades
   to a labelled placeholder instead of a broken-image icon. Self-heals the
   moment the file lands — nothing to undo. */
.mark-panel .mark-slot.is-empty {
  background: repeating-linear-gradient(
    45deg,
    var(--white),
    var(--white) 8px,
    var(--paper-deep) 8px,
    var(--paper-deep) 16px
  );
  border-style: dashed;
}

.mark-panel .mark-slot.is-empty::after {
  background: var(--white);
  border: 1px solid rgba(17, 16, 14, 0.28);
  color: var(--muted);
  content: "Artwork not yet supplied";
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  text-transform: uppercase;
}

.mark-panel .mark-cap {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 14px 0 0;
  color: rgba(17, 16, 14, 0.74);
}

.mark-panel .mark-cap strong { font-weight: 700; }

/* The pivot. Vertically centred against the specimen panels rather than the
   whole column, so it lines up with the artwork and not the captions. */
.mark-pivot {
  align-self: center;
  padding-top: 23px;
  text-align: center;
  white-space: nowrap;
}

.mark-pivot .pivot-year {
  display: block;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--red);
}

.mark-pivot .pivot-arrow {
  display: block;
  font-size: 20px;
  line-height: 1;
  margin-top: 10px;
  color: var(--red);
}

/* Stacks earlier than the two-panel version did — three weighted columns run
   out of room for the wide lockup well before a phone breakpoint. Stacked, the
   pivots read as a top-to-bottom timeline, so the arrow turns to point down. */
@media (max-width: 980px) {
  .mark-compare { grid-template-columns: 1fr; }
  .mark-pivot { padding-top: 0; }
  .mark-pivot .pivot-arrow { margin-top: 4px; transform: rotate(90deg); display: inline-block; }
}

/* ---- Mobile leading guard ------------------------------------------------
   Same rule the rest of the site follows: any sub-1.0 line-height needs an
   override once the clamp minimum drops below ~60px. */
@media (max-width: 760px) {
  .pull-statement { line-height: 1.3; }
}