/* Wayfinding case study — from Figma "main documentation" frames */

/* Cover (Figma: Wayfinding 1111:3027) */
.cover {
  position: relative;
  overflow: hidden;
  background: var(--plum);
  color: var(--white);
  min-height: min(56.25vw, 1080px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* Decorations positioned as % of the 1920×1080 Figma frame */
.cover__glow { position: absolute; left: 51.4%; top: -52.8%; width: 97.2%; max-width: none; pointer-events: none; }
.cover__arrow { position: absolute; z-index: 2; pointer-events: none; }
.cover__arrow--r { left: 31%; top: 27.8%; width: 8.4%; }
.cover__arrow--l { left: 4.9%; top: 78.7%; width: 5%; }
.cover__art { position: relative; height: 100%; min-height: 420px; }
.cover__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.cover__text { position: relative; z-index: 1; padding: 0 var(--gutter) 0 0; max-width: 640px; }
.cover__kicker {
  margin: 0 0 clamp(24px, 4vw, 56px);
  font-weight: 700; font-size: clamp(12px, 0.95vw, 18px); line-height: 1.65;
  letter-spacing: 0; text-transform: uppercase;
  white-space: nowrap; width: max-content; /* one line on desktop */
}
.cover h1 {
  margin: 0;
  font-weight: 400; font-size: clamp(34px, 3.3vw, 63px); line-height: 1.17;
}
.cover h1 em { font-weight: 700; font-style: italic; }
.cover__tags {
  display: inline-block; margin-top: clamp(24px, 3vw, 48px);
  padding: 12px 32px; border: 1px solid var(--white); border-radius: 64px;
  font-size: clamp(13px, 1.03vw, 19.8px); letter-spacing: 0;
}

@media (max-width: 760px) {
  .cover { grid-template-columns: 1fr; min-height: 0; }
  .cover__art { min-height: 0; aspect-ratio: 1 / 0.75; }
  .cover__art img { object-position: 20% center; }
  .cover__text { padding: 32px var(--gutter) 48px; }
  .cover__arrow { display: none; }
  .cover__kicker { white-space: normal; width: auto; }
  .cover__glow { left: 20%; top: 10%; }
}

/* ---------------------------------------------------------------
   One scale for every frame.
   The Figma frames are 1920px wide. Inside <main>, --u is one Figma
   pixel scaled to the column width, so each section renders at the
   same size as a full-frame image such as the Layouts GIF.
   Sizes are written as Figma px × --u, with a readable minimum.
   --------------------------------------------------------------- */
.study > main { container-type: inline-size; }
.section { --u: calc(100cqi / 1920); --m: calc(100 * var(--u)); --img-gap: max(24px, calc(32 * var(--u))); }

.section { position: relative; padding: var(--m); }
/* Extra 20px between consecutive sections */
.section { margin-bottom: 20px; }
.h-section {
  margin: 0;
  color: var(--plum);
  font-weight: 700; font-size: max(20px, calc(42 * var(--u))); line-height: 1.2;
}
.h-sub {
  margin: calc(15 * var(--u)) 0 0;
  color: var(--plum);
  font-style: italic; font-weight: 400; font-size: max(20px, calc(44 * var(--u)));
  line-height: 1.2; letter-spacing: 0;
}
.h-pink { color: var(--pink); }
.h-large { font-size: max(26px, calc(60 * var(--u))); }
.h-mid { font-size: max(18px, calc(35 * var(--u))); color: var(--pink); }
.h-small { font-size: max(19px, calc(40 * var(--u))); }
.prose { font-size: max(14px, calc(22 * var(--u))); line-height: 1.42; letter-spacing: 0; color: var(--ink); }
.prose p { margin: 0 0 1.42em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }
.prose--plum { color: var(--plum); }
.gap-xl { margin-top: calc(160 * var(--u)); }
.gap-l  { margin-top: calc(107 * var(--u)); }
.gap-m  { margin-top: calc(48 * var(--u)); }

/* Heading on the left, text on the right (Figma: 747 + 973 of 1720) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 747fr) minmax(0, 973fr);
  gap: calc(40 * var(--u));
  align-items: start;
}
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 16px; } }

/* Full-frame images (exported at 1920 wide) cancel the section margins */
.frame { display: block; width: calc(100% + 2 * var(--m)); max-width: none; margin-left: calc(-1 * var(--m)); }
.section > .frame:last-child { margin-bottom: calc(-1 * var(--m)); }

/* Decorative stepped line (Figma vectors 1111:3075 / 3082 / 3826) */
.deco { position: absolute; pointer-events: none; z-index: 0; }
/* Lines run off to the page's right edge; vertically they stop at their own section */
.section:has(> .deco) { overflow-y: clip; overflow-x: visible; }
.section > *:not(.deco) { position: relative; z-index: 1; }

/* Team (Figma: Wayfinding 8) */
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: calc(100 * var(--u)); }
.team__guide { align-self: end; }
.team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(48px, calc(100 * var(--u))) max(32px, calc(80 * var(--u))); }
.person img { width: max(96px, calc(214 * var(--u))); aspect-ratio: 1; object-fit: cover; background: #d2d2d2; }
.person p { margin: 0; color: var(--plum); font-size: max(13px, calc(24 * var(--u))); line-height: 1.4; }
.person p:first-of-type { margin-top: calc(24 * var(--u)); font-weight: 700; }
.person p + p { font-style: italic; letter-spacing: 0; }
@media (max-width: 760px) {
  .team { grid-template-columns: 1fr; }
  .team__guide { order: 2; }
}

/* Floor plans + audit (Figma: Wayfinding 9) */
.floorplans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(32px, calc(53 * var(--u))); margin-top: calc(60 * var(--u)); }
.floorplans figure { margin: 0; }
@media (max-width: 760px) { .floorplans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.audit { margin-top: calc(69 * var(--u)); mix-blend-mode: multiply; }

/* Pain points (Figma: Wayfinding 10) */
.pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(48px, calc(100 * var(--u))) max(32px, calc(60 * var(--u))); margin-top: calc(60 * var(--u)); }
.pain img { width: max(96px, calc(202 * var(--u))); border-radius: calc(16 * var(--u)); }
.pain p { margin: calc(36 * var(--u)) 0 0; font-size: max(13px, calc(24 * var(--u))); line-height: 1.42; letter-spacing: 0; }
@media (max-width: 760px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }

/* System derived (Figma: Wayfinding 11) — heading left, content right */
.subrow { display: grid; grid-template-columns: minmax(0, 747fr) minmax(0, 973fr); gap: calc(40 * var(--u)); padding: calc(80 * var(--u)) 0; border-top: 1px solid #e0c9d6; }
.subrow:first-of-type { border-top: 0; }
@media (max-width: 760px) { .subrow { grid-template-columns: 1fr; gap: 16px; } }
.type-name { margin: 0 0 calc(60 * var(--u)); font-size: max(30px, calc(80 * var(--u))); font-weight: 700; letter-spacing: -0.025em; color: var(--ink-2); line-height: 1.2; }
.type-specimen { margin: calc(60 * var(--u)) 0 0; font-weight: 700; font-size: max(18px, calc(63 * var(--u))); line-height: 1.2; color: var(--ink-2); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.scripts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(68 * var(--u)); margin-top: calc(120 * var(--u)); }
.scripts h4 { margin: 0 0 calc(48 * var(--u)); font-weight: 600; font-size: max(20px, calc(50 * var(--u))); color: var(--pink); letter-spacing: 0; }
.scripts p { margin: 0; font-weight: 700; font-size: max(14px, calc(36 * var(--u))); line-height: 1.2; color: var(--ink-2); }
.leaf-caption { margin: calc(16 * var(--u)) 0 0; font-size: max(13px, calc(34 * var(--u))); color: var(--ink-2); letter-spacing: 0; }
.leaf { margin: calc(60 * var(--u)) 0 0; mix-blend-mode: multiply; }
.swatches { display: grid; grid-template-columns: 455fr 201fr 318fr; height: max(220px, calc(620 * var(--u))); margin-top: calc(60 * var(--u)); }
.swatch { position: relative; padding: calc(30 * var(--u)) calc(32 * var(--u)); color: var(--white); font-weight: 700; font-size: max(11px, calc(24 * var(--u))); letter-spacing: 0; line-height: 1.2; }
.swatch span { position: absolute; right: calc(16 * var(--u)); bottom: calc(16 * var(--u)); font-weight: 400; font-size: max(10px, calc(18 * var(--u))); }
.swatch-stack { display: grid; grid-template-rows: 108fr 256fr 256fr; }
.swatch--light { color: var(--ink); background: var(--white); border: 1px solid #d3d3d3; }
.icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(29 * var(--u)) 0; margin-top: calc(60 * var(--u)); }

/* Installations (Figma: Wayfinding 13) */
.install { display: grid; grid-template-columns: minmax(0, 769fr) minmax(0, 877fr); gap: calc(74 * var(--u)); }
.install__grid { display: grid; grid-template-columns: 297fr 552fr; gap: var(--img-gap); }
.install__grid img { width: 100%; height: 100%; object-fit: cover; }
.install__grid .r2 { grid-column: 1 / -1; display: grid; grid-template-columns: 386fr 456fr; gap: var(--img-gap); }
.install__grid .r3 { grid-column: 1 / -1; display: grid; grid-template-columns: 536fr 310fr; gap: var(--img-gap); }
@media (max-width: 760px) { .install { grid-template-columns: 1fr; gap: 16px; } }

.bts { display: grid; gap: var(--img-gap); margin-top: calc(72 * var(--u)); }
.bts__row { display: grid; gap: var(--img-gap); align-items: center; }
.bts__row img { width: 100%; height: 100%; object-fit: cover; }
.bts__row--1 { grid-template-columns: 647fr 647fr 363fr; align-items: stretch; }
.bts__photo { position: relative; margin: 0; }
.bts__row .bts__marker { position: absolute; height: auto; aspect-ratio: 1; pointer-events: none; }
.bts__overlay { position: absolute; left: 8.2%; top: 10%; width: 42%; margin: 0; color: #fffdf3; font-style: italic; font-weight: 600; font-size: max(12px, calc(28 * var(--u))); line-height: 1.4; }
.bts__row--2 { grid-template-columns: 222fr 579fr 811fr; }
.bts__row--3 { grid-template-columns: 222fr 362fr 508fr 415fr; }
.bts__label { margin: 0; color: var(--pink); font-style: italic; font-weight: 600; font-size: max(12px, calc(28 * var(--u))); line-height: 1.4; }
@media (max-width: 760px) {
  .bts__row--1, .bts__row--2, .bts__row--3 { grid-template-columns: 1fr; }
}

/* All text on this page is set in Archivo; only the typeface specimen keeps Fira Sans,
   because it shows the signage typeface itself */
body.wf { font-family: "Archivo", system-ui, sans-serif; letter-spacing: 0; }
.wf .type-name, .wf .type-specimen { font-family: "Fira Sans", system-ui, sans-serif; }
.wf .topnav, .wf .sidenav { letter-spacing: normal; }