/*
  Jenn AI Visual Style — applied to UI rather than a chart.
  Fonts (Anton/Poppins) are inferred from the blog banner per the style
  guide, not yet confirmed — flagging that here as the guide asks.
*/

:root {
  /* Surfaces */
  --surface: #FCF3F2;
  --card-bg: #FFFFFF;

  /* Ink */
  --ink: #241A18;
  --ink-2: #5C4A47;
  --muted: #8E7B78;

  /* Structure */
  --gridline: #F2DFDD;
  --baseline: #DCC6C4;

  /* Accents — pink is lead, teal carries the CVD separation.
     Terracotta is intentionally unused in this UI: it would sit
     visually adjacent to the pink accent (nav, links, hover states),
     which the style guide rules out. */
  --pink: #DE4372;
  --pink-deep: #B5265A;
  --teal: #0093A0;
  --taupe: #8C7472;

  --font-display: "Anton", "Liberation Sans", sans-serif;
  --font-body: "Poppins", "Liberation Sans", sans-serif;
}

body {
  background-color: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-body);
}

.brand-display {
  font-family: var(--font-display);
  font-weight: 400; /* Anton is already heavy */
  letter-spacing: 0.01em;
  color: var(--ink);
}

.brand-body {
  font-family: var(--font-body);
  color: var(--ink-2);
}

.brand-subtitle {
  font-family: var(--font-body);
  color: var(--ink-2);
  font-size: 0.95rem;
}

.brand-link {
  font-family: var(--font-body);
  color: var(--pink);
}

.brand-source-line {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: 0.76rem;
}

/* The pink rule: the short brand mark every chart in this system
   carries above its title, reused here above the page H1. */
.brand-rule {
  width: 48px;
  height: 4px;
  background-color: var(--pink);
  margin-bottom: 1rem;
  border-radius: 1px;
}

.brand-nav {
  background-color: var(--card-bg);
  padding: 0.65rem 0;
}

.brand-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-nav .back-link {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.brand-nav .back-link:hover {
  color: var(--pink);
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.brand-wordmark .accent {
  color: var(--pink);
}

.site-header {
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--gridline);
}

.project-card {
  cursor: pointer;
  background-color: var(--card-bg);
  border: 1px solid var(--gridline);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pink);
  box-shadow: 0 0.5rem 1.25rem rgba(36, 26, 24, 0.12) !important;
}

.project-card:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

.project-card:hover .brand-link,
.project-card:focus-visible .brand-link {
  color: var(--pink-deep);
}

/* Tag chips: one consistent accent (teal), not a color per tag —
   these are metadata, not categorical data series, so there's no
   adjacency risk to manage. */
.tag-badge {
  background-color: rgba(0, 147, 160, 0.1);
  color: var(--teal);
  border: 1px solid rgba(0, 147, 160, 0.35);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
}

/* Rectangular preview box, right-hand side on desktop */
.project-media {
  position: relative;
  min-height: 220px;
  background-color: var(--gridline);
}

.project-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stack media above/below text on small screens */
@media (max-width: 767.98px) {
  .project-media {
    min-height: 200px;
  }
}

/* Brand button: replaces Bootstrap's default blue primary */
.btn-brand-pink {
  background-color: var(--pink);
  border-color: var(--pink);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 500;
}

.btn-brand-pink:hover,
.btn-brand-pink:focus {
  background-color: var(--pink-deep);
  border-color: var(--pink-deep);
  color: #FFFFFF;
}

.modal-content {
  background-color: var(--card-bg);
  color: var(--ink-2);
}

.modal-header {
  border-bottom: 1px solid var(--gridline);
}

#previewFrame {
  width: 100%;
  height: 100%;
  border: 0;
}

.modal-fullscreen .modal-body {
  height: 100%;
}

#previewFallback {
  font-family: var(--font-body);
  color: var(--ink-2);
  background-color: var(--surface);
  height: 100%;
}