:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --muted: #696969;
  --soft: #a7a7a7;
  --line: #dfdfdf;
  --panel: #f6f6f6;
  --panel-2: #eeeeee;
  --card: #ffffff;
  --input-bg: #ffffff;
  --header-bg: rgba(255,255,255,.94);
  --muted-strong: #626262;
  --copy-strong: #333333;
  --line-strong: #a5a5a5;
  --mesh-dot: rgba(0,0,0,.12);
  --mesh-glow: rgba(0,0,0,.10);
  --icon-filter: grayscale(1) contrast(1.2);
  --button-text: #ffffff;
  --button-border: #0a0a0a;
  --page: clamp(24px, 6vw, 92px);
  --radius: 3px;
  --sans: "Inter", Arial, sans-serif;
  --display: "Archivo Black", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  min-height: 82px;
  padding: 0 var(--page);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
}

.brand {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.desktop-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 50px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
}

.desktop-nav a,
.resume-link,
.text-link,
.filter-button {
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.desktop-nav a:hover,
.resume-link:hover {
  opacity: .48;
}

.desktop-nav span {
  color: var(--soft);
  margin-right: 3px;
}

/*
  Navbar Download CV.
  Intentionally has NO bordered-button styling.
*/
.resume-link {
  font-family: var(--mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.menu-button {
  display: none;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
}

.mobile-nav {
  display: none;
}

/* =========================================================
   GENERAL LAYOUT
   ========================================================= */

.section-shell {
  width: min(1560px, 100%);
  margin: 0 auto;
  padding-inline: var(--page);
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: calc(100vh - 82px);
  padding-top: clamp(58px, 8vw, 108px);
  padding-bottom: 56px;
  position: relative;
  overflow: hidden;
}

.hero-mesh {
  position: absolute;
  right: -3vw;
  top: 4vh;
  width: min(54vw, 820px);
  aspect-ratio: 1.15;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      var(--mesh-dot) 0 1px,
      transparent 1.3px
    ) 0 0 / 7px 7px,
    radial-gradient(
      circle at 35% 45%,
      var(--mesh-glow),
      transparent 62%
    );
  mask-image:
    radial-gradient(
      ellipse at center,
      #000 0%,
      #000 45%,
      transparent 72%
    );
  opacity: .34;
  transform: rotate(-10deg);
  pointer-events: none;
}

.hero-title {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  letter-spacing: -.065em;
  font-size: clamp(66px, 12vw, 184px);
  line-height: .84;
  text-transform: uppercase;
  max-width: 1320px;
}

.hero-title span {
  display: block;
}

.hero-muted {
  color: var(--muted-strong);
}

.hero-rule {
  position: relative;
  z-index: 2;
  margin-top: clamp(44px, 6vw, 82px);
  height: 1px;
  background: var(--line);
}

.hero-lower {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(340px, 620px);
  gap: 60px;
  padding-top: 34px;
}

.eyebrow,
.mono,
.section-index,
.section-kicker {
  font-family: var(--mono);
}

.eyebrow,
.section-index,
.section-kicker {
  font-size: 12px;
  letter-spacing: .05em;
}

.hero-eyebrow {
  margin: 0;
  align-self: start;
}

.hero-intro {
  max-width: 620px;
}

.hero-intro .mono {
  font-size: 12px;
  color: var(--copy-strong);
}

.hero-intro > p:last-of-type {
  color: var(--muted);
  max-width: 560px;
}

.social-row,
.contact-icons,
.footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.social-row {
  margin-top: 26px;
}

.social-row a,
.contact-icons a,
.footer-links a {
  font-size: 28px;
  line-height: 1;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.social-row a:hover,
.contact-icons a:hover,
.footer-links a:hover {
  transform: translateY(-3px);
  opacity: .5;
}

.hero-actions {
  position: relative;
  z-index: 2;
  margin-top: clamp(70px, 12vh, 150px);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* =========================================================
   MAIN OUTLINE BUTTON STYLE

   Thin border.
   Zero border radius.
   Transparent background.
   Applies outside navigation.
   ========================================================= */

.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid var(--button-border);
  border-radius: 0;

  background: transparent;
  color: var(--ink);

  padding: 11px 15px;

  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;

  cursor: pointer;
}

.text-link:hover {
  background: var(--ink);
  color: var(--button-text);
  transform: translateY(-2px);
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-block {
  padding-top: clamp(92px, 10vw, 150px);
  padding-bottom: clamp(92px, 10vw, 150px);
  border-top: 1px solid var(--line);
}

.section-index {
  color: var(--muted);
  margin-bottom: 34px;
}

.section-heading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  gap: 70px;
  margin-bottom: clamp(52px, 7vw, 96px);
  align-items: start;
}

.section-heading-grid h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(58px, 8vw, 118px);
  line-height: .88;
  letter-spacing: -.06em;
}

.section-heading-grid h2 span {
  color: var(--muted-strong);
}

.section-note {
  margin: 0;
  color: var(--muted);
  max-width: 430px;
  justify-self: end;
  align-self: start;
  padding-top: 10px;
  font-size: 15px;
  line-height: 1.65;
}

/* =========================================================
   ABOUT
   ========================================================= */

.about-grid {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: clamp(50px, 8vw, 128px);
  align-items: center;
  padding-bottom: clamp(70px, 9vw, 120px);
}

.portrait-wrap {
  width: min(330px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel);
}

.portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-copy {
  max-width: 760px;
}

.about-copy p {
  margin: 0 0 18px;
  color: var(--copy-strong);
  font-size: clamp(17px, 1.3vw, 20px);
}

/* =========================================================
   SKILLS
   ========================================================= */

.skills-header {
  border-top: 1px solid var(--line);
  padding-top: 34px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 520px);
  gap: 60px;
  align-items: start;
}

.section-kicker {
  color: var(--muted);
}

.skills-header h3 {
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -.05em;
  margin: 8px 0 0;
}

.skills-header .section-note {
  padding-top: 10px;
}

.skills-groups {
  margin-top: 42px;
  display: grid;
  gap: 34px;
}

.skill-group {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.skill-group h4 {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}

.skill-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.brand-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: var(--icon-filter);
}

/* =========================================================
   PROJECT FILTER BUTTONS
   ========================================================= */

.project-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 10px;
}

.filter-button {
  appearance: none;

  border: 1px solid var(--button-border);
  border-radius: 0;

  background: transparent;
  color: var(--ink);

  padding: 9px 13px;

  cursor: pointer;

  font-family: var(--mono);
  font-size: 11px;
}

.filter-button:hover,
.filter-button.active {
  background: var(--ink);
  color: var(--button-text);
}

.filter-button.active {
  text-decoration: none;
}

/* =========================================================
   PROJECTS
   ========================================================= */

.project-row {
  display: grid;
  grid-template-columns:
    120px
    minmax(0, 1fr)
    minmax(280px, 480px);

  gap: clamp(28px, 5vw, 80px);
  align-items: center;

  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.project-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.project-copy h3 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -.045em;
  margin: 0 0 14px;
}

.project-copy p {
  color: var(--muted);
  max-width: 620px;
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.project-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    transform 350ms ease,
    opacity 350ms ease;
}

.project-row:hover .project-image img {
  transform: scale(1.025);
}

/* =========================================================
   HACKATHONS
   ========================================================= */

.hackathon-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.hackathon-row {
  display: grid;

  grid-template-columns:
    150px
    minmax(0, 1fr)
    minmax(220px, 360px);

  gap: clamp(24px, 4vw, 64px);

  align-items: center;

  padding: 28px 0;

  border-bottom: 1px solid var(--line);
}

.hackathon-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.hackathon-copy h3 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -.035em;
}

.hackathon-copy p {
  margin: 0 0 10px;
  color: var(--muted);
  max-width: 680px;
}

.hackathon-result {
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
}

.hackathon-image {
  aspect-ratio: 16 / 9;

  border: 1px solid var(--line);
  border-radius: var(--radius);

  overflow: hidden;

  background: var(--panel);
}

.hackathon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  font-family: var(--mono);
  font-size: 10px;

  color: var(--copy-strong);
}

.tool-chip img {
  width: 17px;
  height: 17px;

  object-fit: contain;

  filter: var(--icon-filter);
}

/* =========================================================
   CERTIFICATES
   ========================================================= */

.certificate-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.certificate-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);

  overflow: hidden;

  min-height: 100%;

  background: var(--card);

  transition:
    transform 180ms ease,
    border-color 180ms ease;
}

.certificate-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

.certificate-image {
  aspect-ratio: 4 / 3;

  background: var(--panel);

  border-bottom: 1px solid var(--line);

  overflow: hidden;

  display: grid;
  place-items: center;
}

.certificate-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.certificate-image .certificate-brand-icon {
  width: 54px;
  height: 54px;

  object-fit: contain;

  filter: var(--icon-filter);
}

.certificate-copy {
  padding: 22px;
}

.certificate-copy .mono {
  color: var(--muted);
  font-size: 11px;
}

.certificate-copy h3 {
  font-size: 21px;
  line-height: 1.25;
  margin: 10px 0;
}

.certificate-copy p {
  color: var(--muted);
  font-size: 14px;
}

.empty-state {
  border: 1px solid var(--line);
  border-radius: var(--radius);

  padding: 34px;

  color: var(--muted);

  grid-column: 1 / -1;
}

/* =========================================================
   CONTACT
   ========================================================= */

.contact-section {
  padding-bottom: clamp(100px, 11vw, 170px);
}

.contact-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(280px, .7fr);

  gap: clamp(60px, 9vw, 140px);
}

.contact-form {
  display: grid;
  gap: 22px;
}

.contact-form label {
  display: grid;
  gap: 8px;
}

.contact-form label > span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;

  border: 1px solid var(--line);
  border-radius: var(--radius);

  padding: 15px 16px;

  background: var(--input-bg);
  color: var(--ink);

  outline: none;

  resize: vertical;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--line-strong);

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--ink) 8%,
      transparent
    );
}

/* Main form/action button */

.primary-button {
  width: max-content;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border: 1px solid var(--button-border);
  border-radius: 0;

  background: transparent;
  color: var(--ink);

  padding: 13px 18px;

  cursor: pointer;

  font-family: var(--mono);
  font-size: 11px;

  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.primary-button:hover {
  background: var(--ink);
  color: var(--button-text);
  transform: translateY(-2px);
}

.contact-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 12px;

  border-left: 1px solid var(--line);

  padding-left: 34px;
}

.contact-aside .mono {
  color: var(--muted);
  font-size: 11px;
}

.contact-aside > a {
  font-size: 17px;

  border-bottom:
    1px solid transparent;
}

.contact-aside > a:hover {
  border-color: var(--ink);
}

.contact-icons {
  margin-top: 24px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  border-top: 1px solid var(--line);

  padding: 36px var(--page);

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  gap: 30px;

  align-items: center;

  font-size: 13px;
}

.site-footer > div:first-child {
  display: flex;
  gap: 10px;
  align-items: center;
}

.site-footer strong {
  font-family: var(--display);
}

.site-footer p {
  justify-self: end;
  color: var(--muted);
}

.footer-links a {
  font-size: 24px;
}

/* =========================================================
   PROJECT DETAIL PAGE
   ========================================================= */

.project-detail-main {
  min-height: 70vh;
}

.case-hero {
  padding-top: clamp(70px, 9vw, 120px);
  padding-bottom: clamp(60px, 7vw, 100px);
}

.case-back {
  margin-bottom: 50px;
}

.case-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 22px;
}

.case-title {
  font-family: var(--display);

  font-size:
    clamp(58px, 10vw, 145px);

  letter-spacing: -.06em;

  line-height: .9;

  margin: 0;

  max-width: 1200px;
}

.case-summary-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, .55fr);

  gap: 70px;

  margin-top: 42px;

  align-items: start;
}

.case-summary {
  font-size: clamp(18px, 1.5vw, 22px);

  max-width: 760px;

  color: var(--copy-strong);
}

.case-facts {
  display: grid;

  gap: 18px;

  border-left: 1px solid var(--line);

  padding-left: 26px;
}

.case-fact span {
  display: block;

  font-family: var(--mono);
  font-size: 10px;

  color: var(--muted);

  margin-bottom: 5px;
}

.case-cover {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  padding-block:
    clamp(32px, 5vw, 70px);
}

.case-cover img {
  width: 100%;
  max-height: 720px;

  object-fit: cover;

  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.case-sections {
  padding-top:
    clamp(70px, 9vw, 120px);

  padding-bottom:
    clamp(90px, 11vw, 150px);
}

.case-section {
  display: grid;

  grid-template-columns:
    220px minmax(0, 1fr);

  gap:
    clamp(30px, 6vw, 100px);

  padding: 34px 0;

  border-top:
    1px solid var(--line);
}

.case-section h2 {
  margin: 0;

  font-family: var(--mono);

  font-size: 12px;

  font-weight: 500;

  color: var(--muted);
}

.case-section p {
  margin: 0;

  max-width: 850px;

  font-size:
    clamp(17px, 1.4vw, 20px);

  white-space: pre-line;
}

.case-tools {
  display: flex;
  flex-wrap: wrap;

  gap: 18px 30px;
}

.case-tool {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-weight: 600;
}

.case-tool img {
  width: 27px;
  height: 27px;

  object-fit: contain;

  filter: var(--icon-filter);
}

.case-actions {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 44px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {
  .desktop-nav,
  .resume-link {
    display: none;
  }

  .site-header {
    grid-template-columns:
      1fr auto;
  }

  .menu-button {
    display: block;
  }

  .mobile-nav {
    position: fixed;

    z-index: 19;

    top: 82px;

    left: 0;
    right: 0;

    background: var(--bg);

    border-bottom:
      1px solid var(--line);

    padding:
      22px
      var(--page)
      28px;

    flex-direction: column;

    gap: 18px;

    font-family: var(--mono);

    font-size: 12px;
  }

  .mobile-nav.open {
    display: flex;
  }

  .section-heading-grid,
  .skills-header,
  .hero-lower {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .section-note {
    justify-self: start;
    padding-top: 0;
  }

  .hero-intro {
    max-width: 680px;
  }

  .project-row {
    grid-template-columns:
      90px 1fr;
  }

  .project-image {
    grid-column: 2;
  }

  .hackathon-row {
    grid-template-columns:
      110px 1fr;
  }

  .hackathon-image {
    grid-column: 2;
  }

  .certificate-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .case-summary-grid {
    grid-template-columns: 1fr;
  }

  .case-facts {
    border-left: 0;

    border-top:
      1px solid var(--line);

    padding:
      24px 0 0;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  :root {
    --page: 22px;
  }

  body {
    font-size: 15px;
  }

  .site-header {
    min-height: 70px;
  }

  .mobile-nav {
    top: 70px;
  }

  .hero {
    min-height: auto;
    padding-top: 58px;
  }

  .hero-title {
    font-size:
      clamp(54px, 18vw, 96px);
  }

  .hero-mesh {
    width: 92vw;

    right: -40vw;

    top: 14vh;
  }

  .hero-actions {
    margin-top: 74px;
    gap: 10px;
  }

  .text-link {
    padding: 10px 13px;
  }

  .section-heading-grid h2 {
    font-size:
      clamp(48px, 15vw, 82px);
  }

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

  .portrait-wrap {
    width:
      min(260px, 72vw);
  }

  .skill-group {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .project-row,
  .hackathon-row {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .project-image,
  .hackathon-image {
    grid-column: 1;

    order: -1;
  }

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

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

  .contact-aside {
    border-left: 0;

    border-top:
      1px solid var(--line);

    padding:
      28px 0 0;
  }

  .site-footer {
    grid-template-columns: 1fr;

    align-items: start;
  }

  .site-footer p {
    justify-self: start;

    margin: 0;
  }

  .case-facts {
    grid-template-columns: 1fr;
  }

  .case-section {
    grid-template-columns: 1fr;

    gap: 12px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

/* =========================================================
   LIGHT / DARK THEME
   ========================================================= */

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #050505;
  --ink: #f7f7f7;

  --muted: #a5a5a5;
  --soft: #767676;

  --line: #272727;

  --panel: #101010;
  --panel-2: #171717;
  --card: #0a0a0a;

  --input-bg: #0b0b0b;

  --header-bg:
    rgba(5,5,5,.94);

  --muted-strong: #b6b6b6;
  --copy-strong: #d4d4d4;

  --line-strong: #606060;

  --mesh-dot:
    rgba(255,255,255,.14);

  --mesh-glow:
    rgba(255,255,255,.08);

  --icon-filter:
    grayscale(1)
    brightness(0)
    invert(1)
    contrast(1.1);

  --button-text: #050505;

  /*
    Main buttons automatically
    become white outlined buttons
    in dark mode.
  */
  --button-border: #f7f7f7;
}

body,
.site-header,
.mobile-nav,
.certificate-card,
.contact-form input,
.contact-form textarea {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/*
  Navbar control.
  This is intentionally NOT affected
  by the square main-button design.
*/
.theme-toggle {
  width: 34px;
  height: 34px;

  border:
    1px solid var(--line);

  border-radius: 999px;

  background: transparent;

  color: var(--ink);

  display: grid;
  place-items: center;

  cursor: pointer;

  font-size: 17px;

  transition:
    transform 180ms ease,
    border-color 180ms ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

/* Mobile navbar CV link */

.mobile-nav #mobileResumeLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /*
    Navbar item intentionally has
    no main-button border.
  */
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.mobile-nav #mobileResumeLink[hidden] {
  display: none;
}

/* =========================================================
   TABLET HEADER ACTIONS
   ========================================================= */

@media (max-width: 1120px) {
  .header-actions {
    margin-left: auto;
  }

  .header-actions .theme-toggle {
    display: grid;
  }
}

/* =========================================================
   MOBILE HEADER ACTIONS
   ========================================================= */

@media (max-width: 760px) {
  .header-actions {
    gap: 14px;
  }

  .theme-toggle {
    width: 32px;
    height: 32px;
  }
}