/* Components -------------------------------------------------------------------
   The reusable UI: labels and captions, the scroll cue, the statement CTA,
   the small CTA and the project dialog. Each block carries its own
   responsive rules so it can be lifted into another page whole.
   -------------------------------------------------------------------------- */

/* Labels and captions --------------------------------------------------- */
.section-label {
  margin: 0 0 26px;
  font-size: 11px;
  letter-spacing: var(--track-label);
  line-height: 1.3;
  text-transform: uppercase;
}

.section-label { display: flex; gap: 26px; align-items: center; }
.section-label span { color: var(--ink-3); }
.section-label::after { content: ""; width: 64px; height: 1px; background: var(--line); }
.section-label.light { color: var(--cream); }
.section-label.light::after { background: var(--line-light); }
.section-label.light span { color: var(--cream-3); }

/* Wraps rather than squeezing: on the narrowest phones the two halves cannot
   share a line, and space-between then lays the second one out underneath. */
figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 20px; padding-top: 12px; font-size: 10px; line-height: 1.3; letter-spacing: var(--track-caption); text-transform: uppercase; }
figure figcaption span + span { color: var(--ink-3); }
.section-dark figure figcaption span + span,
.location figure figcaption span + span { color: var(--cream-3); }

/* Scroll cue: a tracked label over a short hairline at the foot of the
   hero — the rule the section labels draw, stood on end. No glyph: the page
   keeps arrows out of its controls. The padding gives it a usable hit area,
   and hover lengthens the line rather than moving the whole cue. */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--cream);
  font-size: 10px;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  opacity: .8;
  transition: opacity .3s ease;
}
.scroll-cue i { display: block; width: 1px; height: 36px; background: currentColor; transform-origin: top; transition: transform .45s var(--ease); }
.scroll-cue:hover, .scroll-cue:focus-visible { opacity: 1; }
.scroll-cue:hover i, .scroll-cue:focus-visible i { transform: scaleY(1.3); }

/* Small CTA: the compact button, usually in a pair. A plain hairline box
   with a label and nothing else — no corner radius, no glyph. Outlined by
   default, and .small-cta-solid marks the primary of the two. Both are drawn
   for a dark ground in paper and ink; hover swaps the fill. */
.small-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid rgba(var(--paper-rgb), .55);
  background: transparent;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.small-cta:hover, .small-cta:focus-visible { border-color: var(--milk); background: var(--milk); color: var(--ink); }
.small-cta-solid { border-color: var(--milk); background: var(--milk); color: var(--ink); }
.small-cta-solid:hover, .small-cta-solid:focus-visible { border-color: var(--cream); background: transparent; color: var(--cream); }
/* On paper the same button is drawn in ink. */
.small-cta-ink { border-color: var(--ink); color: var(--ink); }
.small-cta-ink:hover, .small-cta-ink:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* Dialog ---------------------------------------------------------------- */
.project-dialog { width: min(940px, calc(100vw - 34px)); max-height: calc(100svh - 34px); padding: 0; border: 0; color: var(--ink); background: var(--paper); }
.project-dialog::backdrop { background: rgba(var(--charcoal-rgb), .84); backdrop-filter: blur(6px); }
.dialog-shell { position: relative; padding: clamp(32px, 6vw, 82px); }
.dialog-close { position: absolute; top: 24px; right: 24px; border: 0; background: transparent; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; cursor: pointer; }
.dialog-shell h2 {
  margin: 52px 0 66px;
  font-family: var(--font-display);
  font-size: clamp(50px, 7.4vw, 104px);
  font-weight: var(--w-light);
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.dialog-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dialog-grid > div { padding: 18px 15px 24px 0; border-right: 1px solid var(--line); }
.dialog-grid > div:last-child { border-right: 0; padding-left: 15px; }
.dialog-grid > div:not(:first-child) { padding-left: 15px; }
.dialog-grid span { display: block; margin-bottom: 32px; font-size: 10px; letter-spacing: .18em; color: var(--ink-3); }
.dialog-grid b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 80px);
  font-weight: var(--w-light);
  line-height: .9;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.dialog-grid p { margin: 14px 0 0; font-size: 11px; letter-spacing: .04em; color: var(--ink-2); }
.dialog-note { margin: 30px 0 0; max-width: 64ch; font-size: 12px; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 680px) {
  .project-dialog { width: min(940px, calc(100vw - 22px)); max-height: calc(100svh - 22px); overflow-y: auto; overscroll-behavior: contain; }
  .dialog-shell { padding: 66px 22px calc(30px + env(safe-area-inset-bottom, 0px)); }
  .dialog-close { top: 14px; right: 12px; padding: 10px; }
  .dialog-shell .section-label { gap: 14px; }
  .dialog-shell .section-label::after { width: 34px; }
  .dialog-shell h2 { margin: 30px 0 42px; font-size: clamp(38px, 11vw, 62px); }
  .dialog-grid b { font-size: clamp(38px, 11vw, 58px); }
  .dialog-grid { grid-template-columns: 1fr 1fr; }
  .dialog-grid > div { border-bottom: 1px solid var(--line); }
  .dialog-grid > div:nth-child(2) { border-right: 0; }
  .dialog-grid > div:nth-child(3), .dialog-grid > div:nth-child(4) { border-bottom: 0; }
}

/* Landscape phones: a 390px-tall viewport is the case none of the width
   breakpoints catch. Height-driven, so it applies to a short laptop window
   too. */
@media (orientation: landscape) and (max-height: 560px) {
  .scroll-cue { gap: 7px; }
  .scroll-cue i { height: 26px; }
}