:root {
  --color-bg: oklch(0.97 0.006 60);
  --color-text: oklch(0.22 0.01 60);
  --color-bio: oklch(0.32 0.01 60);
  --color-muted: oklch(0.5 0.01 60);
  --color-border-row: oklch(0.88 0.008 60);
  --color-border-chip: oklch(0.85 0.008 60);
  /* Brand accent, used for the @Nina wordmark. At 32px/600 it counts as
     WCAG large text, so 4.30:1 on the off-white passes (needs 3.0). */
  --color-accent: #e5142b;
  /* Placements and grades are 16px bold — that is NOT WCAG "large text",
     so it needs 4.5:1 and #e5142b only reaches 4.30:1. The design bundle
     specified darkening to the link red if the audit failed; it does,
     and #cc0f24 gives 5.24:1. */
  --color-accent-text: #cc0f24;
  --color-link: #cc0f24;
  --color-link-hover: #a30b1c;
  --color-link-underline: oklch(0.6 0.2 22 / 0.45);
  --color-link-underline-hover: oklch(0.5 0.2 22 / 0.6);
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid var(--color-link-underline);
}

a:hover {
  color: var(--color-link-hover);
  border-bottom-color: var(--color-link-underline-hover);
}

.page {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7vw 8vw 6vw;
}

.column {
  max-width: 680px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Header */

.header {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.header-top {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.name-title {
  margin: 0;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  color: var(--color-accent);
}

.wordmark .at {
  display: inline-block;
  transform: translateY(-0.09em);
}

.role {
  font-family: var(--font-sans);
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.bio {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--color-bio);
}

/* With no bio paragraphs the element is left empty. Without this it would
   still be a flex item and the header's 32px gap would open a hole under
   the name. Add copy to content.json and it reappears on its own. */
.bio:empty {
  display: none;
}

.bio p {
  margin: 0;
}

/* Section labels (shared) */

.section-label {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 700;
}

/* Chip groups (skills, engineering, languages) */

.skills-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.chip-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  font-size: 16px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-chip);
  border-radius: 999px;
  white-space: nowrap;
}

/* Row lists (challenge results, qualifications) */

.rows-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rows {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-row);
}

.rows .row:last-child {
  border-bottom: 1px solid var(--color-border-row);
}

.row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}

.row-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.row-value {
  font-size: 16px;
  color: var(--color-accent-text);
  font-weight: 700;
  white-space: nowrap;
}

.row-note {
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
  color: var(--color-muted);
  margin-top: 6px;
}

/* Contact */

.contact-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
}

.contact-link {
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
}

.discord-link {
  display: flex;
  align-items: center;
  gap: 9px;
}

.discord-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

/* Sections wrapper */

.sections {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Below ~700px the hero stacks: avatar above name/title, full width,
   instead of relying on flex-wrap to break the row at an unpredictable
   point. Avatar stays 104px — it never shrinks to a thumbnail. */
@media (max-width: 700px) {
  .header-top {
    flex-direction: column;
    align-items: flex-start;
  }
}