/* Design B, "Ops sheet": two-column résumé, steel-cyan accent,
   Red Hat type family (a nod to the RHCSA). Dark by default, light on request
   or when the system prefers it. */
@font-face {
  font-family: 'Red Hat Text';
  src: url('fonts/redhat-text-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/redhat-display-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Mono';
  src: url('fonts/redhat-mono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --bg: #111315;
  --side: #181B1F;
  --line: #2A2F36;
  --line-strong: #3A414A;
  --text: #ECEEF0;
  --text-2: #C5CBD2;
  --muted: #9BA3AD;
  --accent: #6FC3DF;
  --accent-hover: #A5DDEE;
  --marker: #59616B;

  --side-w: 400px;
  --measure: 72ch;

  --display: 'Red Hat Display', system-ui, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, monospace;

  color-scheme: dark;
}

/* Light palette: cool paper grey rather than warm cream, accent darkened
   to keep text contrast above 4.5:1. Kept in one block and applied two ways. */
:root[data-theme="light"] {
  --bg: #F5F7F9;
  --side: #E9EDF1;
  --line: #D3D9DF;
  --line-strong: #B9C1CA;
  --text: #14191E;
  --text-2: #37404A;
  --muted: #56606B;
  --accent: #17607C;
  --accent-hover: #0F4A61;
  --marker: #8A939D;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F7F9;
    --side: #E9EDF1;
    --line: #D3D9DF;
    --line-strong: #B9C1CA;
    --text: #14191E;
    --text-2: #37404A;
    --muted: #56606B;
    --accent: #17607C;
    --accent-hover: #0F4A61;
    --marker: #8A939D;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Red Hat Text', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.75rem;
  background: var(--accent);
  color: var(--bg);
  z-index: 10;
}
.skip:focus { top: 1rem; }

.nowrap { white-space: nowrap; }

h1, h2, h3 { font-family: var(--display); }

h2 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

p { margin: 0 0 1rem; }


/* Layout: sidebar on wide screens, one column below that.
   The sidebar colour is painted by the wrapper so it runs the full page height. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "profile" "main" "details";
}

.profile { grid-area: profile; }
main     { grid-area: main; }
.details { grid-area: details; }

.profile, .details {
  background: var(--side);
  padding: 2.5rem 1.25rem;
}
.profile { border-bottom: 1px solid var(--line); }
.details { border-top: 1px solid var(--line); }

main { padding: 2.5rem 1.25rem 3rem; }

@media (min-width: 1000px) {
  /* The sheet is centred and only as wide as sidebar plus reading column,
     so wide screens get even margins instead of a blank right side. */
  .layout {
    max-width: calc(var(--side-w) + var(--measure) + 11rem);
    margin-inline: auto;
    min-height: 100vh;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "profile main" "details main";
    background: linear-gradient(to right,
      var(--side) 0 var(--side-w),
      var(--line) var(--side-w) calc(var(--side-w) + 1px),
      var(--bg) calc(var(--side-w) + 1px));
  }

  .profile, .details { background: none; border: 0; padding-inline: 3rem; }
  .profile { padding-top: 4.5rem; padding-bottom: 0; }
  .details { padding-top: 2.75rem; padding-bottom: 3rem; }

  main { padding: 4.5rem 5.5rem 4rem; }
}

/* Hairline edges only once there is page background beside the sheet. */
@media (min-width: 1300px) {
  .layout { border-inline: 1px solid var(--line); }
}


/* Profile block */
.profile { position: relative; }

.theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--muted); }
.theme-toggle svg { width: 18px; height: 18px; }

/* Show the icon of the theme you would switch to. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* On one-column screens the name is full width, so it starts below the toggle. */
@media (max-width: 999.98px) {
  .profile { padding-top: 4.25rem; }
}
@media (min-width: 1000px) {
  .theme-toggle { top: 1.5rem; right: 1.5rem; }
}

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 9vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (min-width: 1000px) {
  /* Two lines in the narrow sidebar reads as a deliberate block, not a wrap accident. */
  h1 { max-width: 7ch; }
}

.role {
  margin: 1rem 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--accent);
}

.actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 2rem;
}
@media (min-width: 1000px) {
  .actions { flex-direction: column; }
}

.btn {
  flex: 1 1 0;
  min-height: 46px;
  padding: 0 1.1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.email-out {
  min-height: 1.6em;
  margin: 0.75rem 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* Takes no space until the address is revealed. */
.email-out:empty { min-height: 0; margin: 0; }

.facts { margin: 1.25rem 0 0; }
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); flex-shrink: 0; }
.facts dd { margin: 0; text-align: right; }


/* Main column */
main section + section { margin-top: 3.5rem; }

main p, main li { max-width: var(--measure); }

.lede { font-size: 1.25rem; line-height: 1.55; }
main section p:not(.lede):not(.context):not(.when) { color: var(--text-2); }

.job {
  padding-bottom: 2.25rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--line);
}

.job-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.15rem;
}

h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}
h3 .org { font-weight: 500; color: var(--text-2); }

.when {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--accent);
  white-space: nowrap;
}

.context { margin: 0.4rem 0 1rem; color: var(--muted); }

.job ul:not(.tags) {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.job ul:not(.tags) li::marker { color: var(--marker); }

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
}
.tags li {
  padding: 0.15rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.early { display: flex; flex-direction: column; gap: 1.25rem; }
.job-short { padding: 0; margin: 0; border: 0; }
.job-short h3 { font-size: 1.15rem; }
.job-short p { margin: 0.25rem 0 0; }


/* Details column */
.details h2 { font-size: 1.35rem; margin-bottom: 0.9rem; }
.details section + section { margin-top: 2.5rem; }

.skills {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.skills dt { font-weight: 600; }
.skills dd { margin: 0.1rem 0 0; color: var(--text-2); }

.rows { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.rows li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}
.year { font-family: var(--mono); color: var(--muted); white-space: nowrap; }

/* Certificates: name on top, issuer and credential ID underneath. */
.certs .cert-meta { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.certs code { font-family: var(--mono); }

.updated {
  margin: 2.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}


/* Print: one light A4 column in reading order, no buttons. */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }

  /* Matches the theme selectors' specificity, so print is always black on white. */
  :root, :root[data-theme] {
    --bg: #FFFFFF;
    --side: #FFFFFF;
    --line: #C9CED4;
    --line-strong: #C9CED4;
    --text: #000000;
    --text-2: #1F2429;
    --muted: #4A525B;
    --accent: #000000;
    --marker: #59616B;
  }

  body { font-size: 9.5pt; line-height: 1.4; background: #fff; }

  .layout { display: block; background: none; min-height: 0; max-width: none; border: 0; }
  .profile, .details, main { padding: 0; border: 0; background: none; max-width: none; }

  .actions, .skip, noscript, .updated, .theme-toggle { display: none; }

  h1 { font-size: 26pt; max-width: none; }
  .role { font-size: 12pt; margin-top: 4pt; }
  .email-out { margin: 4pt 0 0; min-height: 0; }
  .email-out a { color: #000; text-decoration: none; }

  .facts { display: flex; flex-wrap: wrap; column-gap: 14pt; margin-top: 6pt; }
  .facts > div, .facts > div:last-child { border: 0; padding: 0; font-size: 9pt; gap: 4pt; }
  .facts dt::after { content: ':'; }

  main { margin-top: 12pt; }
  main section + section, .details section, .details section + section { margin-top: 12pt; }
  main p, main li { max-width: none; }

  h2, .details h2 { font-size: 13pt; margin-bottom: 5pt; break-after: avoid; }
  h3 { font-size: 10.5pt; break-after: avoid; }
  .job-short h3 { font-size: 10pt; }
  .lede { font-size: 10pt; }
  .when, .context, .year { font-size: 8.5pt; }
  .certs .cert-meta { font-size: 8pt; }

  .job { padding-bottom: 8pt; margin-bottom: 8pt; }
  .job ul:not(.tags) { gap: 2pt; }
  .job li { break-inside: avoid; }
  .tags { gap: 3pt; margin-top: 6pt; }
  .tags li { font-size: 7.5pt; padding: 0 4pt; }
  .job-short, .skills > div, .rows li { break-inside: avoid; }
  .early { gap: 5pt; }
  .job-short { padding: 0; margin: 0; }

  .skills { gap: 3pt; font-size: 9pt; }
  .skills > div { display: grid; grid-template-columns: 38mm 1fr; column-gap: 4mm; }
  .rows { font-size: 9pt; }
  .rows li { padding: 2pt 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}