/* components.css */
/* =========================================================
   TYPOGRAPHY SYSTEM
   ========================================================= */

h1 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

h2 {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: var(--space-lg);
}

h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-sm);
}

/* =========================================================
   LISTS (CONTENT ONLY)
   ========================================================= */

ul {
  list-style: none;
  margin-bottom: var(--space-md);
}

section ul {
  padding-left: 0;
}

section ul li {
  margin-bottom: var(--space-sm);
  padding-left: 20px;
  position: relative;
}

section ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--muted);
}

/* =========================================================
   BUTTONS & INLINE ACTIONS
   ========================================================= */

.btn {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 14px 28px;
  background: var(--text);
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.btn:hover,
.btn:focus-visible {
  background: var(--accent);
  color: white;
}

.jump-link {
  display: block;
  margin-top: var(--space-sm);
  color: var(--muted);
  text-decoration: none;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-name {
  font-weight: 600;
  text-decoration: none;
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links li {
  padding-left: 0;
  margin-bottom: 0;
}

.nav-links li::before {
  content: none;
}

.nav-links a {
  margin-left: var(--space-md);
  text-decoration: none;
  color: var(--muted);
}

.nav-links a:hover {
  color: var(--text);
}

/* =========================================================
   CASE STUDIES / WORK ITEMS
   ========================================================= */

.work-item {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.work-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Case title aligns with content column */
.work-item h3 {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: var(--space-md);
  margin-left: var(--label-width);
}

/* Label + text rows */
.row {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
  gap: 0;
}

/* Text column (flexible) */
.text {
  flex: 1;
}

/* Metadata label (fixed column) */
.label {
  width: var(--label-width);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   VISUAL ELEMENTS
   ========================================================= */

.chart img {
  max-width: 100%;
  margin-top: var(--space-md);
}

/* =========================================================
   CONTACT SECTION
   ========================================================= */

.contact-icons {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--text);
  font-size: 16px;
}

.contact-item svg {
  width: 21px;
  height: 21px;
  fill: var(--muted);
}

.contact-item:hover svg {
  fill: var(--accent);
}

/* EOF components.css */