/*
 * Type and spacing are in em/rem on a 20px base (the design's body size),
 * so 1rem = 20px at desktop width. The root size eases down on narrow
 * screens and everything scales with it.
 */
:root {
  --ink: #000;
  --bg-from: #fff5d8;
  --bg-to: #ffecb5;
  --sans: "Inter", system-ui, sans-serif;
  --gutter: 2.4rem;
  font-size: clamp(15px, 2.5vw + 8px, 20px);
}

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

html {
  min-height: 100%;
  background: linear-gradient(226deg, var(--bg-from) 9.98%, var(--bg-to) 90.02%);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1em;
  line-height: 1.5;
}

h2,
p,
ul,
address {
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

img {
  display: block;
}

/* Page: a single column, vertically centred when the viewport is tall enough. */

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  flex: 1;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.experience {
  gap: 0.6rem;
}

.contact {
  gap: 0.8rem;
}

.section-title {
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.25;
}

.about .section-title {
  line-height: 1.5;
}

.section-body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0 0.8rem;
}

.contact .section-body {
  gap: 0.8rem;
}

/* Inline icon followed by a link, as in "hacking on (logo) Servo". */
.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  vertical-align: middle;
}

.with-icon img,
.project-logo img {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

.rounded {
  border-radius: 0.4rem;
}

/*
 * Recurse Center logo. The scout script injects its own styles (a 120×150
 * block) after this sheet, so these selectors are kept more specific. The
 * logo is 12×15 units; it sits centred in the same square slot as the other
 * icons. Its eyes light up when the logo or the link next to it is hovered.
 */
.with-icon .rc-scout {
  display: block;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

.with-icon .rc-scout__link {
  display: block;
  height: 100%;
}

.with-icon .rc-scout__logo {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center / contain url("assets/rc-logo.svg");
}

/* The scout's own :hover rule resets the size via the shorthand, so set it again here. */
.with-icon:hover .rc-scout__logo,
.with-icon .rc-scout__logo:hover {
  background: no-repeat center / contain url("assets/rc-logo-on.svg");
}

/* About */

.intro {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.outro {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.resume-line {
  line-height: 1.25;
}

.cta {
  font-weight: 600;
  line-height: 1.25;
}

/* Experience */

.projects {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.project-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: normal;
}

.project-title small {
  font-size: 0.8em;
}

.project-logo {
  display: block;
  flex: none;
}

.project-logo-odplus {
  padding: 0.2rem;
  background: #005198;
}

/* The OD+ mark is 32×27, not square. */
.project-logo-odplus img {
  height: 1.35rem;
}

.project-notes {
  max-width: 35rem;
  padding-left: 1.5rem;
  list-style: disc;
}

/* Contact */

.location {
  line-height: 155%;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.socials {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Footer: an 88×31 web badge at its native size. */

.badges {
  display: flex;
  gap: 0.4rem;
  padding: 0 0.8rem;
}

.badges img {
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
}

/* Narrow screens: tighter gutters, the type is already scaled by the root size. */
@media (max-width: 720px) {
  :root {
    --gutter: 1.2rem 1rem;
  }

  .section-body {
    padding: 0 0.4rem;
  }
}