/* =========================================================
   Area Record — colour-forward variant of the Project Record.
   Loads AFTER styles.css and project-page.css. Reuses the
   .proj-* dossier furniture, then turns up the theme colour so
   Area Records read as a distinct, bolder kind of record.
   ========================================================= */

.proj.area {
  /* a faint accent wash behind record surfaces */
  --record-bg: color-mix(in srgb, var(--accent) 6%, var(--bg));
}

/* ----- File bar: solid accent band ----- */
.area .proj-filebar {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.area .proj-filebar__cell--mid {
  color: var(--bg);
  border-color: color-mix(in srgb, var(--bg) 38%, transparent);
}
.area .proj-filebar__cell--end { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.area .proj-filebar__dot { background: var(--bg); }

/* ----- Hero kicker as a filled chip ----- */
.area .proj-kicker {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 5px 11px 4px;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.area .proj-title { max-width: 22ch; }
.area .proj-standfirst { max-width: 60ch; }

/* ----- Record card: accent header ----- */
.area .proj-record { border-color: var(--accent); }
.area .proj-record__head {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.area .proj-record__head .proj-record__ref { color: color-mix(in srgb, var(--bg) 82%, transparent); }
.area .proj-row__val a.proj-extlink { color: var(--accent); border-color: var(--accent); }

/* ----- Section headers: accent rule + accent title ----- */
.area .proj-shead { border-bottom-color: var(--accent); }
.area .proj-shead__num { color: var(--accent); }
.area .proj-shead__title { color: var(--accent); }

/* ----- Community mandate: the headline block, fully themed ----- */
.area .area-mandate { border-color: var(--accent); }
.area .area-mandate .proj-recframe__bar {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.area .area-mandate .proj-recrow { border-top-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.area .area-mandate .proj-recrow__key { color: var(--accent); }
.area .area-mandate .proj-recrow__desc strong { color: var(--accent); font-weight: 600; }
.area .area-mandate .proj-recrow__desc em { color: var(--accent); }

/* =========================================================
   PROJECTS IN THIS AREA — tight list with thumbnails
   ========================================================= */
.area-projects {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.area-proj {
  display: grid;
  grid-template-columns: 84px 1fr 24px;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  transition: background .15s ease, color .15s ease;
}
.area-proj--link:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.area-proj--link:hover .area-proj__title { color: var(--accent); }
.area-proj--link:hover .area-proj__arrow { transform: translateX(5px); color: var(--accent); }

.area-proj__thumb {
  width: 84px;
  aspect-ratio: 1 / 1;
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.area-proj__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.area-proj__thumb--ph {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed;
  color: var(--ink-secondary);
  font-family: var(--font-mono);
}

.area-proj__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.area-proj__titlerow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.area-proj__title {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  transition: color .15s ease;
}
.area-proj__tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.area-proj__tag--present {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.area-proj__meta {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-secondary);
  text-wrap: pretty;
}
.area-proj__arrow {
  font-size: 18px;
  color: var(--ink-secondary);
  transition: transform .2s ease, color .15s ease;
  justify-self: end;
}

@media (max-width: 600px) {
  .area-proj { grid-template-columns: 60px 1fr; gap: 16px; }
  .area-proj__thumb { width: 60px; }
  .area-proj__arrow { display: none; }
}