/* winglet.dev
   The work splits in two, and the site shows it: the cool "ice" side (periwinkle, from the avatar's eyes) marks
   game work, the warm "fire" side (coral, from its hair) marks work for businesses, on the avatar's violet night.
   The logo itself is the Discord avatar, refreshed by avatar.py, in a ring that is half of each. */

@font-face {
  font-family: "Unbounded";
  src: url("/static/fonts/unbounded.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/static/fonts/literata.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/static/fonts/literata-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #160a29;
  --night-raised: #1f1036;
  --line: #3a2759;
  --text: #eee9f7;
  --muted: #b4a9cb;
  --violet: #9b5de5;
  --ice: #a7b4ff;
  --ice-sky: #16173f;
  --fire: #ff8a70;
  --fire-sky: #2e1226;

  --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --font-text: "Literata", Georgia, "Times New Roman", serif;
  --font-code: ui-monospace, "Cascadia Code", Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --content: 1200px;
  --measure: 66ch;
  --section-space: clamp(72px, 10vw, 136px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--violet);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.15s ease;
}
a:hover { text-decoration-color: currentColor; }

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

::selection { background: var(--violet); color: #fff; }

code {
  font-family: var(--font-code);
  font-size: 0.85em;
  background: var(--night-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.wrap {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--text);
  color: var(--night);
  font-family: var(--font-display);
  font-size: 0.9rem;
}
.skip-link:focus { top: 12px; }

/* Side colours. Anything inside .side-game / .side-web picks up its half of the logo. */
.side-game { --side: var(--ice); --side-sky: var(--ice-sky); }
.side-web { --side: var(--fire); --side-sky: var(--fire-sky); }

/* A half disc, one half of the logo's ring: the ice half is the left one, the fire half the right one */
.half-mark {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.12em;
  background: var(--side);
}
.side-game .half-mark { border-radius: 1em 0 0 1em; }
.side-web .half-mark { border-radius: 0 1em 1em 0; }

/* ---------- Header and footer ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(22, 10, 41, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.site-nav { display: flex; gap: clamp(14px, 3vw, 32px); }
.site-nav a {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  padding: 8px 0;
}
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav a.is-current { color: var(--text); }
.site-nav a[aria-current="page"], .site-nav a.is-current {
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 32px;
  color: var(--muted);
  font-size: 0.95rem;
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Hero: the logo's split, as a page ---------- */
.hero { padding-bottom: 0; }

.hero-sky {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 30vw) 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(40px, 6vw, 88px) var(--gutter);
  background: linear-gradient(90deg, var(--ice-sky) 50%, var(--fire-sky) 50%);
  overflow: hidden;
  isolation: isolate;
}
/* Stars: a few tiled dot layers at different sizes so the pattern never visibly repeats */
.hero-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 71%, #d9c8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 54%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 87% 13%, #c9a8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 38%, #fff 50%, transparent 51%);
  background-size: 173px 151px, 211px 197px, 97px 131px, 283px 239px, 139px 109px;
  opacity: 0.55;
}
/* The violet glow the logo sits in */
.hero-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(closest-side at 50% 50%, rgba(142, 63, 214, 0.5), transparent);
  background-size: min(760px, 90vw) min(760px, 90vw);
  background-position: center;
  background-repeat: no-repeat;
}

.hero-half { max-width: 30rem; }
.hero-half.side-game { justify-self: end; text-align: right; }
.hero-half.side-web { justify-self: start; text-align: left; }

.hero-claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.8rem + 1.2vw, 1.75rem);
  line-height: 1.25;
  color: var(--side);
  margin-bottom: 0.75em;
  text-wrap: balance;
}
.hero-text { color: var(--muted); font-size: 1rem; }

/* The avatar in a ring that is half ice, half fire: the two sides meet in the logo */
.hero-mark {
  justify-self: center;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  padding: clamp(6px, 0.7vw, 10px);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--ice) 50%, var(--fire) 50%);
  box-shadow: 0 24px 80px rgba(120, 53, 192, 0.45);
}
.hero-mark img { width: 100%; height: 100%; border-radius: 50%; }

/* The name sits across the seam, on both halves at once */
.hero-name {
  grid-column: 1 / -1;
  text-align: center;
  font-size: clamp(2.4rem, 0.6rem + 7.2vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: clamp(8px, 2vw, 24px);
}
.hero-intro { text-align: center; padding-top: clamp(32px, 5vw, 56px); }
.hero-lede {
  max-width: 40em;
  margin-inline: auto;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.6;
}

/* One orchestrated entrance: the halves part from the seam as the logo appears */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark { animation: appear 0.7s ease-out both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  .hero-half.side-game { animation: part-left 0.8s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-half.side-web { animation: part-right 0.8s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes appear { from { opacity: 0; transform: scale(0.96); } }
@keyframes part-left { from { opacity: 0; transform: translateX(24px); } }
@keyframes part-right { from { opacity: 0; transform: translateX(-24px); } }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-space) 0; }
.section:last-of-type { padding-bottom: var(--section-space); }
.section-title {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
  margin-bottom: 0.6em;
}
.section-note { color: var(--muted); max-width: var(--measure); }
.section-note + * { margin-top: 32px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: start;
}

/* Work: two columns with the hero's seam running down between them */
.work-columns {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 7vw, 112px);
}
.work-columns::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(90deg, var(--ice) 50%, var(--fire) 50%);
  opacity: 0.4;
}
.side-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--side);
  margin-bottom: 16px;
}
/* The lead project of each side: its image on the side's own sky */
.feature {
  display: block;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--side-sky);
}
.feature-img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.feature-body { display: block; padding: 20px 22px 24px; }
.feature .work-name { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.6rem); }

.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { border-bottom: 1px solid var(--line); }
.work-item { display: block; text-decoration: none; padding-block: 20px; }
.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.work-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
}
.work-status {
  flex: none;
  max-width: 9rem;
  text-align: right;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.3;
}
.work-summary { display: block; color: var(--muted); text-wrap: pretty; }
.work-highlight {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--side);
}
.work-item:hover .work-name, .feature:hover .work-name {
  text-decoration: underline;
  text-decoration-color: var(--side);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* Smaller things that live on iverium.nl itself */
.extras { margin-top: 32px; }
.extras-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 4px;
}
.extras-list { list-style: none; margin: 0; padding: 0; }
.extras-list li { padding-block: 12px; border-bottom: 1px solid var(--line); }
.extras-list a { font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; }
.extras-list span { display: block; color: var(--muted); font-size: 1rem; }

/* A raised band to break the run of same-coloured sections */
.section.band {
  background: var(--night-raised);
  margin-top: var(--section-space);
  padding-block: clamp(56px, 7vw, 96px);
}

/* Experience timeline: a real sequence, newest first */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  grid-template-areas: "period role" "period org";
  column-gap: 24px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline-period { grid-area: period; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline-role { grid-area: role; font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.timeline-org { grid-area: org; color: var(--muted); }

/* Open source */
.oss-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(24px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.oss-grid li { border-top: 1px solid var(--line); padding-top: 16px; }
.oss-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  display: inline-block;
  margin-bottom: 6px;
}
.oss-grid p { color: var(--muted); font-size: 1rem; }

/* Contact */
.contact-text { max-width: var(--measure); }
.contact-email {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.4rem + 4.2vw, 3.25rem);
  line-height: 1.2;
  margin-block: 32px 24px;
  overflow-wrap: anywhere;
}
.contact-email a {
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
}
.contact-links, .plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* ---------- Case study ---------- */
.case-head {
  background: linear-gradient(90deg, var(--ice-sky) 50%, var(--fire-sky) 50%);
  padding-block: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}
/* On a case study the header sky leans toward the project's own side */
.case.side-game .case-head { background: linear-gradient(100deg, var(--ice-sky) 70%, var(--fire-sky)); }
.case.side-web .case-head { background: linear-gradient(100deg, var(--ice-sky), var(--fire-sky) 30%); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}
.crumbs > a { color: var(--muted); }
.crumbs .side-name { margin: 0; font-size: 0.85rem; }

.case-title {
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.5em;
}
.case-lede {
  max-width: 38em;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.55;
}
.case-highlight {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--side);
}
.case-img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-top: clamp(28px, 4vw, 48px);
}

.case-layout {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2.6fr);
  gap: 32px clamp(32px, 6vw, 96px);
  padding-block: clamp(40px, 6vw, 80px);
  align-items: start;
}
.case-facts { margin: 0; position: sticky; top: 96px; }
.case-facts > div { padding-block: 14px; border-top: 1px solid var(--line); }
.case-facts > div:last-child { border-bottom: 1px solid var(--line); }
.case-facts dt { color: var(--muted); font-size: 0.9rem; margin-bottom: 4px; }
.case-facts dd { margin: 0; }
.stack, .fact-links { list-style: none; margin: 0; padding: 0; }
.stack { display: flex; flex-wrap: wrap; gap: 6px; }
.stack li {
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
}

.prose { max-width: var(--measure); }
.prose section + section { margin-top: 48px; }
.prose h2 {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  margin-bottom: 0.75em;
  color: var(--side);
}
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li { margin-bottom: 0.75em; padding-left: 0.3em; }
.prose li::marker { color: var(--side); }
.prose strong { font-weight: 600; }

.case-next { padding-bottom: var(--section-space); }
.case-next a {
  display: grid;
  gap: 4px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.case-next-label { color: var(--muted); font-size: 0.95rem; }
.case-next-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  color: var(--side);
}
.case-next-summary { color: var(--muted); }
.case-next a:hover .case-next-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* ---------- Resume ---------- */
.resume { padding-block: clamp(40px, 6vw, 80px) var(--section-space); max-width: calc(880px + 2 * var(--gutter)); }
.resume-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.resume-name { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-weight: 700; margin-bottom: 0.3em; }
.resume-role { color: var(--muted); }
.resume-contact { list-style: none; margin: 0; padding: 0; text-align: right; font-size: 1rem; }
.resume-print { grid-column: 1 / -1; }
.button {
  font: 500 0.85rem/1 var(--font-display);
  color: var(--night);
  background: var(--text);
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
}
.button:hover { background: #fff; }

.resume-section { padding-top: 40px; }
.resume-section > h2 { font-size: 1.15rem; margin-bottom: 20px; color: var(--violet); }
.resume-summary { max-width: var(--measure); }
.resume-list { list-style: none; margin: 0; padding: 0; }
.resume-list > li {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 4px 24px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}
.resume-list h3 { font-size: 1rem; font-weight: 500; margin-bottom: 6px; line-height: 1.4; }
.resume-list p { margin: 0; }
.resume-list p:not(.resume-period) { color: var(--muted); }
.resume-period { color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.skills { margin: 0; }
.skills > div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 4px 24px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
}
.skills dt { color: var(--muted); }
.skills dd { margin: 0; }
.plain-list li { padding-block: 4px; }

/* ---------- 404 ---------- */
.notfound { padding-block: clamp(56px, 8vw, 112px) var(--section-space); max-width: calc(720px + 2 * var(--gutter)); }
.notfound-logo { width: 120px; margin-bottom: 32px; border-radius: 50%; }
.notfound-title { font-size: clamp(1.8rem, 1rem + 3vw, 3rem); margin-bottom: 0.6em; }

/* ---------- Small screens ---------- */
@media (max-width: 959px) {
  .oss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 759px) {
  .brand span { display: none; }

  /* The halves stack: logo and name first, then the ice half and the fire half, each on its own sky */
  .hero-sky {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
    background: var(--ice-sky);
  }
  .hero-mark { order: -2; width: 60vw; max-width: 280px; margin: 40px auto 28px; }
  .hero-name { order: -1; margin: 0 var(--gutter) 32px; }
  .hero-half { max-width: none; padding: 28px var(--gutter); }
  .hero-half.side-game, .hero-half.side-web { justify-self: stretch; text-align: left; }
  .hero-half.side-web { background: var(--fire-sky); }
  .hero-sky::after { background-position: 50% 0; }

  .work-columns { grid-template-columns: 1fr; gap: 56px; }
  .work-columns::before { display: none; }
  .feature-body { padding: 16px 18px 20px; }

  .timeline li { grid-template-columns: 1fr; grid-template-areas: "period" "role" "org"; }

  .oss-grid { grid-template-columns: 1fr; }

  .case.side-game .case-head, .case.side-web .case-head { background: var(--side-sky); }
  .case-layout { grid-template-columns: 1fr; }
  .case-facts { position: static; }

  .resume-head { grid-template-columns: 1fr; }
  .resume-contact { text-align: left; }
  .resume-list > li, .skills > div { grid-template-columns: 1fr; }
}

/* ---------- Print (the resume is the page people print) ---------- */
@media print {
  :root { --text: #111; --muted: #444; --line: #ccc; --violet: #5b2a96; }
  body { background: #fff; color: #111; font-size: 10.5pt; line-height: 1.45; }
  .site-header, .site-footer, .skip-link, .resume-print { display: none; }
  a { text-decoration: none; }
  .resume { padding: 0; max-width: none; }
  .resume-section { padding-top: 14pt; break-inside: avoid-page; }
  .resume-list > li, .skills > div { break-inside: avoid; }
  .resume-list > li { grid-template-columns: 9rem 1fr; }
}