/* Palette: night bordeaux #550c18, deep mocha #443730, olive wood #786452,
     dusty taupe #a5907e, soft blush #f7dad9. Olive wood and dusty taupe fall
     below 4.5:1 on soft blush, so light-mode text stays deep mocha. */
  :root {
    --paper: #f7dad9;
    --surface: rgb(165 144 126 / 0.12);
    --ink: #443730;
    --strong: #550c18;
    --muted: #443730;
    --line: #786452;
    --accent: #550c18;
    --accent-soft: rgb(165 144 126 / 0.3);
    --shadow: 0 14px 32px -14px rgb(85 12 24 / 0.4), 0 2px 6px rgb(85 12 24 / 0.08);

    --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --text: "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

    color-scheme: light;
  }

  @media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #550c18;
      --surface: rgb(68 55 48 / 0.35);
      --ink: #f7dad9;
      --strong: #f7dad9;
      --muted: #a5907e;
      --line: #786452;
      --accent: #a5907e;
      --accent-soft: rgb(68 55 48 / 0.6);
      --shadow: 0 14px 32px -14px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.25);
      color-scheme: dark;
    }
  }

  @media screen {
    :root[data-theme="dark"] {
      --paper: #550c18;
      --surface: rgb(68 55 48 / 0.35);
      --ink: #f7dad9;
      --strong: #f7dad9;
      --muted: #a5907e;
      --line: #786452;
      --accent: #a5907e;
      --accent-soft: rgb(68 55 48 / 0.6);
      --shadow: 0 14px 32px -14px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.25);
      color-scheme: dark;
    }
  }

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

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  p { margin: 0; }

  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
  }

  a:hover { color: var(--accent); }

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

  .page {
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 3rem);
    padding-block: clamp(3rem, 9vw, 6.5rem);
  }

  /* Masthead */

  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem clamp(1.5rem, 5vw, 3rem);
    padding-bottom: clamp(2.75rem, 7vw, 4.5rem);
  }

  /* The name sits beside the portrait, and the bio and links run the full width beneath both. */
  .masthead-name {
    display: grid;
    align-content: center;
    gap: 1rem;
  }

  .masthead-intro {
    grid-column: 1 / -1;
    display: grid;
    gap: 1rem;
  }

  .portrait {
    display: block;
    width: clamp(5.5rem, 18vw, 11.5rem);
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    outline: 1px solid var(--line);
    outline-offset: 5px;
  }

  .role {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }

  h1 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(3.25rem, 13vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--strong);
  }

  h1 span { display: block; }

  .lede {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    line-height: 1.5;
    color: var(--muted);
    text-wrap: pretty;
  }

  .contact {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--muted);
  }

  .contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink);
    text-decoration: none;
  }

  .contact a:hover { color: var(--accent); }

  /* Only the words carry the underline, so the logo beside them stays clean. */
  .contact a span {
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
  }

  .contact a::before {
    content: "";
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    background-color: var(--accent);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .contact-email::before { -webkit-mask-image: url("icons/contact-email.png"); mask-image: url("icons/contact-email.png"); }
  .contact-github::before { -webkit-mask-image: url("icons/contact-github.png"); mask-image: url("icons/contact-github.png"); }
  .contact-linkedin::before { -webkit-mask-image: url("icons/contact-linkedin.png"); mask-image: url("icons/contact-linkedin.png"); }

  /* Sections */

  .section {
    --section-pad: clamp(2rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    row-gap: 1.25rem;
    padding-block: var(--section-pad);
    border-top: 1px solid var(--line);
  }

  /* The label sits just under the section's dividing line, above the level of the content beside it. */
  .section > h2 {
    margin: calc(0.7rem - var(--section-pad)) 0 0;
    padding: 0;
    scroll-margin-top: 2rem;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* Icons8 icons used as masks, so each one is painted in the accent colour. */
  .section > h2::before {
    content: "";
    flex: none;
    width: 2rem;
    height: 2rem;
    background-color: var(--accent);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  #experience::before { -webkit-mask-image: url("icons/briefcase.png"); mask-image: url("icons/briefcase.png"); }
  #skills::before { -webkit-mask-image: url("icons/toolbox.png"); mask-image: url("icons/toolbox.png"); }
  #projects::before { -webkit-mask-image: url("icons/knight.png"); mask-image: url("icons/knight.png"); }
  #education::before { -webkit-mask-image: url("icons/graduation-cap.png"); mask-image: url("icons/graduation-cap.png"); }
  #hobbies::before { -webkit-mask-image: url("icons/puzzle.png"); mask-image: url("icons/puzzle.png"); }
  #extras::before { -webkit-mask-image: url("icons/extras.png"); mask-image: url("icons/extras.png"); }
  #philosophy::before { -webkit-mask-image: url("icons/habits.png"); mask-image: url("icons/habits.png"); }
  #tldr::before { -webkit-mask-image: url("icons/tldr.png"); mask-image: url("icons/tldr.png"); }

  .section-body {
    display: grid;
    gap: 1.1rem;
    min-width: 0;
  }


  /* Entries */

  .entries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2.25rem;
  }

  .entry {
    display: grid;
    gap: 0.85rem;
  }

  .entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
  }

  h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--strong);
  }

  .meta {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
  }

  .points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
  }

  .points li {
    position: relative;
    padding-left: 1.1rem;
  }

  .points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 0.45rem;
    height: 1px;
    background: var(--accent);
  }

  .points strong {
    font-weight: 600;
    color: var(--strong);
  }

  .points code {
    font-family: var(--mono);
    font-size: 0.85em;
    font-weight: 500;
    color: var(--strong);
  }

  .flow {
    --flow-gap: 2.25rem;
    list-style: none;
    margin: 0.4rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--flow-gap);
  }

  .flow li {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
  }

  .flow li + li::before {
    content: "\2192";
    content: "\2192" / "";
    position: absolute;
    top: 50%;
    left: calc(var(--flow-gap) / -2);
    transform: translate(-50%, -50%);
    font-family: var(--mono);
    font-size: 1rem;
    line-height: 1;
    color: var(--accent);
  }

  .flow-name {
    color: var(--strong);
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .flow-note {
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted);
  }

  /* Summary */

  html { scroll-behavior: smooth; }

  .summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
    padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
  }

  .widget {
    position: relative;
    display: grid;
    align-content: start;
    gap: 1.1rem;
    min-width: 0;
    padding: 1.2rem 1.35rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .widget:hover,
  .widget:focus-within {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
  }

  .widget-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
  }

  .widget-link:focus-visible { outline: none; }

  /* The link's overlay covers the whole card, so a click anywhere on the card follows the link. */
  .widget-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 6px;
  }

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

  .widget-arrow { color: var(--accent); }

  /* The timeline sits above the overlay so its bars stay clickable, and lets every other click
     fall through to the link beneath it. */
  .widget career-timeline {
    position: relative;
    z-index: 2;
    pointer-events: none;
  }

  skill-bands dl { margin: 0; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .widget { transition: none; }
    .widget:hover, .widget:focus-within { transform: none; }
  }

  /* Skills */

  .skills {
    margin: 0;
    display: grid;
    gap: 1.9rem;
  }

  .skill {
    display: grid;
    gap: 0.4rem;
  }

  .skill dt {
    color: var(--strong);
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .skill dd {
    margin: 0;
    display: grid;
    gap: 0.75rem;
  }

  .tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .tags li {
    padding: 0.45rem 0.6rem;
    border-radius: 3px;
    background: var(--accent-soft);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
  }

  /* Hobbies */

  .hobbies {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.6rem;
  }

  .hobbies li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.85rem;
  }

  /* Icons8 Puffy Filled icons used as masks, painted in the accent colour like the section icons. */
  .hobby-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: var(--accent);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .hobby-icon-coding { -webkit-mask-image: url("icons/hobby-coding.png"); mask-image: url("icons/hobby-coding.png"); }
  .hobby-icon-chess { -webkit-mask-image: url("icons/hobby-chess.png"); mask-image: url("icons/hobby-chess.png"); }
  .hobby-icon-maths { -webkit-mask-image: url("icons/hobby-maths.png"); mask-image: url("icons/hobby-maths.png"); }
  .hobby-icon-reading { -webkit-mask-image: url("icons/hobby-reading.png"); mask-image: url("icons/hobby-reading.png"); }

  .hobby-text {
    display: grid;
    gap: 0.3rem;
  }

  .hobby-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--strong);
  }

  .hobby-note {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  /* Credits */

  /* Extras: the optional pages, offered as cards that behave like the summary widgets. */
  .extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
  }

  /* A page of writing, such as the habits page, sets its own rhythm. */
  .prose {
    display: grid;
    gap: 1.1rem;
  }

  .prose h3 { margin-top: 0.9rem; }

  .pull {
    margin: 0.4rem 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--accent);
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--strong);
  }

  /* A quiet link onward, such as the one to the hobbies page. */
  .more a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
  }

  .more a:hover { color: var(--accent); }

  .more-arrow { color: var(--accent); }

  /* The hobbies page shares this stylesheet and heads itself with a smaller name. */
  .masthead-compact h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }

  .credits {
    display: grid;
    gap: 0.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  /* Narrow screens */

  @media screen and (max-width: 48rem) {
    .section { grid-template-columns: minmax(0, 1fr); }
    .summary { grid-template-columns: minmax(0, 1fr); }
  }

  @media screen and (max-width: 40rem) {
    .flow {
      --flow-gap: 1.75rem;
      grid-template-columns: minmax(0, 1fr);
    }

    .flow li + li::before {
      content: "\2193";
      content: "\2193" / "";
      top: calc(var(--flow-gap) / -2);
      left: 1.1rem;
      transform: translate(0, -50%);
    }
  }

  /* Print */

  @media print {
    @page { margin: 15mm 16mm; }

    body { font-size: 10pt; line-height: 1.5; }
    .page { max-width: none; padding: 0; }
    .masthead { padding-bottom: 8mm; }
    h1 { font-size: 36pt; }
    .section { --section-pad: 6mm; grid-template-columns: 28mm minmax(0, 1fr); }
    .flow, .points li, .tags { break-inside: avoid; }
    .entry-head, .skill dt { break-after: avoid; }
    .flow li, .tags li, .points li::before, .section > h2::before, .hobby-icon, .contact a::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { text-decoration: none; }
    .summary { display: none; }
    a[data-print]::after { content: " (" attr(data-print) ")"; color: var(--muted); }
  }