/* Area pages. Layout only; tokens and the locked form stay in fx.css and home.css. */

body.fx-area {
  background: #f5f1ea;
  color: #1c1a17;
  font-family: "Inter Tight", "Segoe UI", sans-serif;
  overflow-x: clip;
}

@media (max-width: 1023px) {
  body.fx-area.has-bar { padding-bottom: var(--bar); }
}

.fx-area h1 {
  font-family: var(--fx-serif);
  font-weight: 300;
  font-synthesis: none;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 12px 0 0;
  max-width: min(18ch, 100%);
  overflow-wrap: break-word;
}

.fx-area h1 em {
  font-style: italic;
  font-weight: 300;
}

.fx-area #lead-form { scroll-margin-top: 88px; }

.fx-area-open { padding-bottom: clamp(48px, 6vw, 80px); }

.fx-area-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.fx-area-open .fx-lead a {
  text-underline-offset: 0.18em;
}

.fx-area-index { padding: 0 0 var(--fx-section); }

.fx-area-index .fx-lead { margin-top: 18px; }

.fx-page .fx-area-group h3 {
  margin-top: 0;
  font-family: var(--fx-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fx-stone);
}

.fx-area-groups {
  display: grid;
  gap: 48px;
  margin-top: 40px;
}

.fx-area-rows {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--fx-line);
}

.fx-area-rows a {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--fx-line);
  color: inherit;
  text-decoration: none;
}

.fx-area-rows strong {
  font-family: var(--fx-serif);
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  background-image: linear-gradient(var(--fx-oak), var(--fx-oak));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size 400ms var(--fx-ease);
}

.fx-area-rows span {
  color: var(--fx-stone);
  overflow-wrap: break-word;
}

.fx-area-rows a:hover strong { background-size: 100% 1px; }

.fx-area-rows a:focus-visible {
  outline: 2px solid var(--fx-oak);
  outline-offset: 4px;
}

.fx-area-region {
  background: var(--fx-charcoal);
  color: var(--fx-linen);
  padding: var(--fx-section) 0;
  color-scheme: dark;
}

.fx-area-proofs {
  display: grid;
  gap: 0;
  margin-top: 36px;
}

.fx-area-proofs article {
  min-width: 0;
  padding: 22px 0 8px;
  border-top: 1px solid var(--fx-line);
}

.fx-area-proofs article:last-child { border-bottom: 1px solid var(--fx-line); }

.fx-area-region .fx-area-proofs article,
.fx-area-region .fx-area-proofs article:last-child { border-color: var(--fx-line-dark); }

.fx-area-proofs h3 { overflow-wrap: break-word; }

.fx-area-proofs p {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--fx-ink-soft);
}

.fx-area-region .fx-area-proofs p { color: var(--fx-stone-light); }

.fx-area-corridors {
  display: grid;
  margin-top: 48px;
  border-top: 1px solid var(--fx-line-dark);
}

.fx-area-corridors div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--fx-line-dark);
}

.fx-area-corridors strong {
  overflow-wrap: break-word;
}

.fx-area-corridors span {
  color: var(--fx-stone-light);
  overflow-wrap: anywhere;
}

.fx-area-projects { padding: var(--fx-section) 0; }

.fx-area-projects__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px 18px;
  margin-top: 36px;
}

.fx-area-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.fx-area-card .fx-frame { aspect-ratio: 1; }

.fx-area-card .fx-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
}

.fx-page .fx-area-card h3 {
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  background-image: linear-gradient(var(--fx-oak), var(--fx-oak));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size 400ms var(--fx-ease);
}

.fx-area-card:hover h3 { background-size: 100% 1px; }

.fx-area-card:focus-visible {
  outline: 2px solid var(--fx-oak);
  outline-offset: 4px;
}

.fx-area-card p {
  margin: 0;
  color: var(--fx-stone);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fx-area-more { margin: 28px 0 0; }

.fx-area-note {
  background: var(--fx-paper);
  padding: var(--fx-section) 0;
}

.fx-area-aside {
  max-width: 62ch;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--fx-line);
}

.fx-area-aside p { margin: 0; }

.fx-area-mix {
  margin: 18px 0 0;
  max-width: 62ch;
}

.fx-area-quiet {
  margin: 28px 0 0;
  max-width: 68ch;
  color: var(--fx-stone);
}

.fx-area-links {
  padding: var(--fx-section) 0;
}

.fx-area-linklist {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 28px;
}

.fx-area-linklist a { overflow-wrap: break-word; }

@media (min-width: 800px) {
  .fx-area-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  .fx-area-proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }

  .fx-area-proofs article,
  .fx-area-proofs article:last-child { border-bottom: 1px solid var(--fx-line); }

  .fx-area-region .fx-area-proofs article,
  .fx-area-region .fx-area-proofs article:last-child { border-color: var(--fx-line-dark); }

  .fx-area-corridors div {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: 8px 18px;
    align-items: baseline;
  }

  .fx-area-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fx-area-projects__grid--pair { grid-template-columns: repeat(2, minmax(0, 420px)); }
}

@media (min-width: 1024px) {
  .fx-area-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .fx-area-rows { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1440px) {
  .fx-area-projects__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-area-rows strong,
  .fx-area-card h3 { transition: none; }
}