/* FC section 03 — the Capture Compass. Navy surface. The four-card grid is the design
   system's CaptureCompass component; this file supplies section chrome, and the four coloured
   seam labels. The cards are type only: direction label, subject, topics, note. No compass rose: the letters N E S W as separate text
   nodes are what produced the stray "NESW" string on the live page. */
.cmp{position:relative;background:var(--color-navy);color:var(--color-text-light);padding:96px 0 108px}
.cmp .rt-seam{background:var(--seam-color-dark)}
.cmp .s-num{position:absolute;left:0;top:96px;width:calc(var(--seam) - 32px);text-align:right;font-family:var(--font-serif);font-weight:400;font-size:24px;line-height:1;color:rgba(232,232,234,.35)}
.cmp-col{margin-left:calc(var(--seam) + var(--seam-inset));margin-right:48px}
.cmp-h{margin:0;font-family:var(--font-serif);font-weight:500;font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.1;letter-spacing:var(--tracking-tight);color:var(--color-text-light-2)}
.cmp-sub{margin:16px 0 0;max-width:64ch;font-size:16.5px;line-height:1.5;color:rgba(232,232,234,.72)}
.cmp-grid{margin-top:52px}
/* The four cards carry unequal copy, so the grid rows are stretched to one height rather than
   left to size on their content. Ragged card feet read as a fault on a four-up. */
#compass-grid>div{align-items:stretch}
#compass-grid>div>*{height:100%}
/* Four labels ride the seam, one per direction block. NORTH, EAST and SOUTH carry their fixed
   token colours, which all read on navy. WEST's token is navy itself, so on a navy surface it
   takes the standard seam-label treatment, off-white at 60%; the navy token applies to WEST on
   light surfaces. Vertical position is set from each grid cell at runtime rather than in fixed
   pixels, because a cell's height changes when its image slot is pending or lands. */
.cmp .rt-seam-label{left:var(--seam);z-index:4;background:var(--color-navy);height:max-content;white-space:nowrap;transform:translate(-50%,-50%) rotate(180deg)}
.cmp .cmp-lbl-n{color:var(--compass-north)}
.cmp .cmp-lbl-e{color:var(--compass-east)}
.cmp .cmp-lbl-s{color:var(--compass-south)}
.cmp-topics{display:block;font-weight:600;color:var(--color-navy)}
.cmp-note{display:block;margin-top:8px;color:rgba(26,26,31,.72)}
/* Below 768 the direction labels would land as horizontal lines directly above cards that
   already carry NORTH, EAST, SOUTH and WEST as their own headings, so they are suppressed
   rather than duplicated. */
@media(max-width:767px){.cmp{padding:56px 0 64px}.cmp-col{margin:0;padding:0 20px}.cmp .s-num{position:static;width:auto;text-align:left;padding:0 20px 6px}.cmp .rt-seam-label{display:none}#compass-grid>div{grid-template-columns:1fr !important}}