/* Instrument Serif everywhere, with its italic for small details */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* Accent color for the older pages: the same calm green as the redesign */
  --color-accent: #3F6B4F;

  /* Lets form controls (checkboxes, radio buttons, etc.) use it too */
  accent-color: var(--color-accent);

  /* Design tokens for the redesign */
  --ink: #1F2E26;            /* main text, dark buttons (green-black) */
  --muted: #55635A;          /* secondary text (passes 4.5:1 on cream) */
  --border: #E4DECD;         /* card borders, dividers */
  --border-strong: #CFC9B4;  /* outline buttons */
  --soft: #F1ECDD;           /* soft card background, row hover */
  --bg: #FAF6EC;             /* the page: a slight cream white */
  --accent: #3F6B4F;         /* links, primary accent */
  --accent-hover: #2F533C;
  --forest: #27402F;         /* the dark section */
  --on-dark: #FAF6EC;
  --on-dark-muted: #D3DACD;  /* body text on the dark section */
  --on-dark-accent: #B5CFA8; /* eyebrow labels on the dark section */
  --oak: #A9875A;            /* picture frames */
  --mat: #FFFDF7;            /* the mat inside a picture frame */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Instrument Serif", Georgia, serif;
  --max: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
}
html {
  /* Instrument Serif only comes in one weight. This stops the browser from faking
     a bold version, so size is what sets headings apart. */
  font-synthesis: none;

  /* Light only for now. Change to "light dark" when dark colors are added. */
  color-scheme: light;
}

/* In-page links (like "Plaza" in the EIEC entry, or the jump bar) glide down
   to their section instead of jumping. Skipped for people who turn off motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  /* Set line height to 1.5 times the font size
	   and use the OS’s UI font as the website font
	 */
  font: 118%/1.5 var(--font-body);   /* this font runs small, so start a bit bigger */

  /* Cream page and green-black text on every page */
  background: var(--bg);
  color: var(--ink);

  /* Keep lines from getting too long on wide screens */
  max-width: 100ch;
  /* Center the body horizontally */
  margin-inline: auto;
  /* Keep text off the edges of small screens */
  padding: 1em;

}
/* Good defaults for every heading */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;     /* tighter line spacing than body text */
  text-wrap: balance;   /* split wrapped lines into similar lengths */
}

/* Make the page title much bigger than h2 */
h1 {
  font-size: 400%;
}
/* ===== Nav: "JJ" logo + bubble tabs (built in global.js) ===== */
.site-nav {
  display: flex;
  flex-wrap: wrap;                  /* tabs drop below the logo on phones */
  justify-content: space-between;   /* logo on the left, tabs on the right */
  align-items: center;
  gap: 16px;
  /* Space between the nav and the page content */
  margin-bottom: 2em;
  font-family: var(--font-body);
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
}

/* The pill that holds all the tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 28px;
  background: var(--soft);
  border: 1px solid var(--border);
}

.tabs a {
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s;

  &:hover {
    background: var(--border);
  }

  /* The page we're on: a solid tab */
  &.current {
    background: var(--ink);
    color: var(--on-dark);
    font-weight: 600;
  }
}

/* The copy of the nav pinned to the top of the screen (see global.js).
   It sits just above the screen and slides down when you scroll up. */
.site-nav-pinned {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  margin: 0;
  padding: 10px clamp(20px, 5vw, 72px);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transform: translateY(-105%);
  transition: transform .25s ease;

  &.shown {
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

/* Phones: smaller tabs so they fit, centered under the logo */
@media (max-width: 480px) {
  .tabs {
    justify-content: center;
    gap: 2px;
  }

  .tabs a {
    padding: 8px 11px;
    font-size: 16px;
  }
}

/* Over the home page's hero photo, the nav turns white and see-through */
.hero {
  .site-nav {
    margin-bottom: 0;
    padding: 28px clamp(20px, 5vw, 72px);
  }

  .logo {
    color: var(--on-dark);
  }

  .tabs {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .28);
  }

  .tabs a {
    color: var(--on-dark);

    &:hover {
      background: rgba(255, 255, 255, .28);
    }

    &.current {
      background: var(--on-dark);
      color: var(--ink);
    }
  }
}

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

/* Theme switcher pinned to the top-right corner */
.color-scheme {
  position: absolute;   /* take it out of the normal flow */
  top: 1rem;
  right: 1rem;
  font-size: 80%;       /* less prominent than the content */
}

form {
  display: grid;                    /* make the form a grid container */
  grid-template-columns: auto 1fr;  /* col 1: as wide as the labels, col 2: the rest */
  gap: 1em;                         /* spacing between rows and columns */
}

form label {
  display: grid;                    /* each label is also a grid... */
  grid-template-columns: subgrid;   /* ...that reuses the form's 2 columns */
  grid-column: 1 / -1;              /* and spans the full row */
}

form button {
  grid-column: 1 / -1;              /* submit button spans the full row too */
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 1em;                      /* space between the cards */
}

.projects article {
  display: grid;                 /* each card is a grid... */
  grid-template-rows: subgrid;   /* ...that uses the parent's rows */
  grid-row: span 3;              /* and takes up 3 rows: h2, img, p */
}

  .projects article > :first-child {
   margin: 0;                     /* remove the default big space around headings */
  }
  /* Year under each project description */
.projects .project-year {
  font-variant-numeric: oldstyle-nums;    /* numbers that blend into the text */
  font-style: italic;
  color: color-mix(in oklch, canvastext, canvas 40%);  /* muted, works in light and dark */
  margin-top: 0;
}
/* Project photos: same shape on every card, cropped rather than stretched */
.projects img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* Pie chart + legend side by side */
.container {
  display: flex;
  align-items: center;      /* pie and legend centered vertically on each other */
  gap: 2em;                 /* space between pie and legend */
  flex-wrap: wrap;          /* on narrow screens, legend drops below the pie */
  margin-block: 2em;
}

#projects-pie-plot {
  flex: 0 0 12em;
  max-width: 20em;
  overflow: visible;

  /* smooth fade in/out for every wedge */
  path {
    transition: 300ms;
    cursor: pointer;          /* hints that wedges are clickable (used in the next step) */
  }

  /* when ANY wedge is hovered, fade out all the OTHER wedges */
  &:has(path:hover) {
    path:not(:hover) {
      opacity: 0.5;
    }
  }
}

.legend {
  flex: 1;                  /* legend takes up all remaining width */
  min-width: 12em;          /* below this it wraps under the pie instead of getting cramped */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
  gap: 1em;
  list-style: none;
  padding: 1em;
  margin: 0;                /* container handles the outer spacing now */
  border: 1px solid color-mix(in oklch, canvastext, canvas 80%);
  border-radius: 0.5em;
}
.legend-item {
  display: flex;
  align-items: center;            /* swatch and text vertically centered */
  gap: 0.4em;                     /* smaller than the legend's 1em gap (proximity) */

  em {
    color: color-mix(in oklch, canvastext, canvas 40%);  /* muted count */
  }
}

.swatch {
  display: inline-block;          /* <span> is inline, so this is needed for width/height */
  width: 1em;
  aspect-ratio: 1 / 1;            /* square */
  background-color: var(--color); /* color comes from the <li>'s style attribute */
  border-radius: 50%;             /* circle; use 0.2em for a rounded square */
}

/* Selected wedge + its legend item */
.selected {
  --color: oklch(60% 45% 0) !important;   /* overrides the inline --color on the <li> */

  &:is(path) {
    fill: var(--color);                    /* recolor the wedge itself */
  }
}

/* Search box on the Projects page */
.searchBar {
  display: block;
  width: 100%;
  font: inherit;               /* same font as the rest of the page */
  padding: 0.6em 0.8em;
  margin-block: 1em 2em;
  border: 1px solid color-mix(in oklch, canvastext, canvas 80%);
  border-radius: 0.5em;
  box-sizing: border-box;      /* padding doesn't push it wider than 100% */
}
/* ===== Home page ===== */
/* Everything is nested under .home (a class on <body>), so other pages don't change */
.home {
  /* Undo the narrow centered column from the body rule: the hero is full width */
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);

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

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

  .wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .eyebrow {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* Buttons (pill shaped) */
  .btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
  }

  .btn-dark {
    background: var(--ink);
    color: var(--on-dark);

    &:hover {
      opacity: .9;
    }
  }

  .btn-outline {
    border: 1px solid var(--border-strong);
    color: var(--ink);

    &:hover {
      background: var(--soft);
    }
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Everything after the hero gets a solid background,
     so it slides up over the photo as you scroll */
  main,
  .hello-band {
    position: relative;
    background: var(--bg);
  }

  /* 1. Hero: full-screen photo with the name on top */
  .hero {
    position: relative;
    height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--on-dark);

    /* Darkens the photo so the white text is readable */
    &::after {
      content: "";
      position: fixed;
      inset: 0 0 auto;
      height: 100lvh;
      z-index: -1;
      background: rgba(20, 32, 24, .38);
    }

    /* Keep the nav and text above the dark layer */
    > *:not(.hero-bg) {
      position: relative;
      z-index: 1;
    }
  }

  /* position: fixed pins the photo to the screen, so it stays still while the page
     scrolls. z-index: -1 puts it behind everything. 100lvh keeps it tall enough
     when a phone's address bar hides. */
  .hero-bg {
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;
    width: 100%;
    height: 100lvh;
    max-width: none;
    object-fit: cover;
    object-position: center 40%;
    animation: drift 14s cubic-bezier(.2, .7, .2, 1) forwards;
  }

  .hero-text {
    margin-top: auto;   /* pushes the text to the bottom of the hero */
    padding: 0 clamp(20px, 5vw, 72px) 72px;
    animation: rise 1.2s .3s cubic-bezier(.2, .7, .2, 1) both;

    h1 {
      margin: 0;
      font-weight: 400;
      font-size: clamp(76px, 13vw, 200px);
      line-height: 1.12;   /* enough room that the J in Justin clears the J in James */
      letter-spacing: -.02em;
    }

    p {
      margin: 24px 0 0;
      font-size: 23px;
      max-width: 520px;
      line-height: 1.5;
      color: rgba(255, 255, 255, .92);
    }
  }

  /* 2. Intro: circle headshot + short text */
  .intro {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    align-items: center;
    padding-block: 96px 48px;
  }

  .headshot {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--mat);
    box-shadow: 0 10px 30px rgba(31, 46, 38, .16);
    flex: 0 0 auto;
  }

  .intro-text {
    flex: 1 1 420px;
    min-width: 0;

    .lead {
      margin: 0 0 28px;
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 500;
      line-height: 1.35;
    }
  }

  /* 3. Proof strip: four real numbers */
  .proof {
    border-block: 1px solid var(--border);
    margin-top: 48px;

    .wrap {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 24px;
      padding-block: 36px;
    }
  }

  .stat-num {
    margin: 0;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
  }

  .stat-label {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 18px;
  }

  /* 4. Featured projects: a list of rows */
  .featured {
    padding-block: 96px 64px;
  }

  .section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      font-size: 40px;
      font-weight: 700;
      letter-spacing: -.02em;
    }

    a {
      font-weight: 600;
      font-size: 18px;
      color: var(--accent);

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

  .project-list {
    border-top: 1px solid var(--border);
  }

  .project-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    align-items: baseline;
    padding: 24px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    text-decoration: none;
    transition: background .2s;

    &:hover {
      background: var(--soft);
    }
  }

  .project-year {
    flex: 0 0 64px;
    color: var(--muted);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
  }

  .project-title {
    flex: 1 1 320px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
  }

  .project-skills {
    flex: 0 1 280px;
    color: var(--muted);
    font-size: 18px;
  }

  /* 5. Outside of work: the dark section */
  .life {
    background-color: var(--forest);
    /* Film grain: a small tile of light and dark specks, repeated. The specks
       balance out, so the green stays the same color and only gains texture. */
    background-image: url("images/web/site/grain.png");
    color: var(--on-dark);
    margin-top: 64px;
    padding-block: 96px;
    overflow-x: clip;   /* the frames run off the sides of the screen */

    .eyebrow {
      color: var(--on-dark-accent);
    }

    h2 {
      margin: 0 0 48px;
      font-size: 48px;
      font-weight: 700;
      letter-spacing: -.02em;
      max-width: 720px;
      line-height: 1.1;
    }

    h3 {
      margin: 0 0 12px;
      font-size: 28px;
      font-weight: 700;
    }

    p {
      color: var(--on-dark-muted);
      font-size: 20px;
      line-height: 1.65;
    }
  }

  .life-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-bottom: 72px;

    > * {
      flex: 1 1 380px;
      min-width: 0;
    }
  }

  .abroad-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 14px;
    }

    img:first-child {
      grid-column: 1 / -1;
      height: 260px;
    }
  }

  .video-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;

    a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .1);
      color: var(--on-dark);
      text-decoration: none;
      font-weight: 500;

      &:hover {
        background: rgba(255, 255, 255, .18);
      }
    }

    /* Film title with its description underneath */
    strong {
      display: block;
      font-weight: 600;
    }

    small {
      display: block;
      margin-top: 4px;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.45;
      color: var(--on-dark-muted);
    }
  }

  /* Landmarks: a row of picture frames that slides forever */
  .marquee {
    margin-top: 8px;

    /* Stop sliding while someone is looking at or tabbing through the frames */
    &:hover .marquee-track,
    &:focus-within .marquee-track {
      animation-play-state: paused;
    }
  }

  /* The arrows sit beside the row, not inside it, so hovering one
     doesn't trigger the pause above */
  .marquee-wrap {
    position: relative;
  }

  .marquee-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--mat);
    color: var(--ink);
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transition: background .2s;

    &:hover {
      background: var(--soft);
    }

    &.prev {
      left: clamp(8px, 2vw, 24px);
    }

    &.next {
      right: clamp(8px, 2vw, 24px);
    }
  }

  .marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    padding-block: 8px;
    animation: slide 280s linear infinite;
  }

  /* Oak border + white mat, with the caption on the mat */
  .frame {
    /* Spacing is a margin, not a gap: it keeps the two halves of the track
       exactly equal, which the loop depends on */
    margin-right: 24px;
    padding: 10px 10px 8px;
    border: 6px solid var(--oak);
    border-radius: 3px;
    background: var(--mat);
    color: var(--ink);
    font: inherit;
    cursor: zoom-in;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
    transition: transform .2s;

    &:hover {
      transform: translateY(-4px);
    }

    img {
      width: auto;
      max-width: none;
      height: 220px;
    }

    span {
      display: block;
      margin-top: 8px;
      font-size: 16px;
      color: var(--muted);
    }
  }

  /* Headings for the parts below Barcelona */
  .life .section-title {
    margin: 72px 0 12px;
  }

  .section-text {
    max-width: 720px;
    margin: 0 0 28px;
  }

  /* Photos you can click to see bigger */
  .zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 14px;
      transition: transform .2s;
    }

    &:hover img {
      transform: scale(1.015);
    }

    span {
      display: block;
      margin-top: 8px;
      font-size: 17px;
      color: var(--on-dark-muted);
    }
  }

  .film {
    width: 100%;
    border-radius: 14px;
    background: #000;
  }

  /* Mont Blanc collage: a mix of big and small tiles. Rows are a fixed height,
     and "dense" lets smaller photos fill any gaps. The sizes below add up to
     full rows, so no holes are left. */
  .collage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
    grid-auto-flow: dense;
    gap: 12px;

    /* Big tiles: 2 wide, 2 tall */
    .zoom:nth-child(1),
    .zoom:nth-child(6) {
      grid-row: span 2;
      grid-column: span 2;
    }

    /* Tall tiles */
    .zoom:nth-child(2),
    .zoom:nth-child(4),
    .zoom:nth-child(8) {
      grid-row: span 2;
    }

    .zoom:nth-child(9) img {
      object-position: center 75%;
    }

    /* Wider screens: 5 columns, and two tiles become wide */
    @media (min-width: 800px) {
      grid-template-columns: repeat(5, 1fr);

      .zoom:nth-child(7),
      .zoom:nth-child(9) {
        grid-column: span 2;
      }
    }
  }

  /* Jack of all trades: one column per sport, two tiles in each */
  .trades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;

    h4 {
      margin: 0 0 10px;
      font: 400 22px var(--font-display);
    }

    video,
    .zoom {
      width: 100%;
      aspect-ratio: 3 / 4;
      margin-bottom: 12px;
    }

    video {
      display: block;
      object-fit: cover;
      border-radius: 14px;
      background: #000;
    }
  }

  /* For the community: photos with captions */
  .community {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;

    img {
      height: 300px;
    }
  }

  /* Bigger view of a Landmarks photo */
  .lightbox {
    max-width: min(92vw, 1100px);
    padding: 12px;
    border: 0;
    border-radius: 6px;
    background: var(--mat);
    color: var(--ink);

    &::backdrop {
      background: rgba(20, 32, 24, .88);
    }

    img {
      max-height: 78vh;
      width: auto;
      margin-inline: auto;
    }

    p {
      margin: 10px 4px 2px;
      font-size: 18px;
      color: var(--muted);
    }
  }

  .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(31, 46, 38, .8);
    color: var(--on-dark);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  /* 6. Quote + Say hello */
  .quote {
    max-width: 880px;
    margin: 0 auto;
    padding: 112px var(--gutter) 64px;
    text-align: center;

    blockquote {
      margin: 0;
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 500;
      line-height: 1.35;
    }

    figcaption {
      margin-top: 12px;
      color: var(--muted);
    }
  }

  .hello {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-block: 48px 80px;
    border-top: 1px solid var(--border);

    h2 {
      margin: 0;
      font-size: 40px;
      font-weight: 700;
    }
  }
}

/* Hero photo slowly zooms out when the page opens */
@keyframes drift {
  from { transform: scale(1.12) translateY(12px); }
  to { transform: scale(1.02) translateY(0); }
}

/* Hero text fades in and rises */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Landmarks frames slide left by half the track (one full set of frames) */
@keyframes slide {
  to { transform: translateX(-50%); }
}

/* Turn off the motion for people who ask their device to reduce it */
@media (prefers-reduced-motion: reduce) {
  .home .hero-bg,
  .home .hero-text,
  .home .marquee-track {
    animation: none;
  }

  /* Without the sliding, let people swipe through the frames instead */
  .home .marquee {
    overflow-x: auto;
  }
}

/* Don't let the page scroll behind the bigger view of a photo */
html:has(.lightbox[open]) {
  overflow: hidden;
}
/* ===== Portfolio page ===== */
/* Everything is nested under .portfolio (a class on <body>), so other pages don't change */
.portfolio {
  /* Undo the narrow centered column from the body rule, like the home page */
  max-width: none;
  margin: 0;
  padding: 0;

  .wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Links jump below the sticky bar instead of hiding under it */
  [id] {
    scroll-margin-top: 80px;

    /* ...and below the pinned nav too, when it's showing */
    :root.nav-shown & {
      scroll-margin-top: calc(80px + var(--pinned-h, 0px));
    }
  }

  /* Email, LinkedIn and GitHub in the green header: small pills on the dark background */
  .head-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;

    a {
      display: inline-block;
      padding: 6px 16px;
      border: 1px solid color-mix(in oklch, var(--on-dark), transparent 60%);
      border-radius: 999px;
      color: var(--on-dark);
      font-size: 17px;
      text-decoration: none;

      &:hover {
        background: color-mix(in oklch, var(--on-dark), transparent 88%);
      }
    }
  }

  /* "Let's connect!" band at the bottom: same look as the home page's */
  .hello {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-block: 48px 80px;
    border-top: 1px solid var(--border);

    h2 {
      margin: 0;
      font-size: 40px;
      font-weight: 400;
    }
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 18px;
    text-decoration: none;
  }

  .btn-dark {
    background: var(--ink);
    color: var(--on-dark);

    &:hover {
      opacity: .9;
    }
  }

  .btn-outline {
    border: 1px solid var(--border-strong);
    color: var(--ink);

    &:hover {
      background: var(--soft);
    }
  }

  /* Header: the same grainy forest green as "Outside of work" */
  .page-head {
    position: relative;
    background-color: var(--forest);
    background-image: url("images/web/site/grain.png");
    color: var(--on-dark);
    padding-bottom: 56px;

    h1 {
      margin: 32px 0 0;
      font-size: clamp(72px, 12vw, 160px);
      font-weight: 400;
      letter-spacing: -.02em;
    }

    p {
      margin: 12px 0 0;
      max-width: 620px;
      font-size: 23px;
      color: var(--on-dark-muted);
    }
  }

  /* Sticky row of links to each section. Swipes sideways on phones. */
  .jump-links {
    position: sticky;
    top: 0;
    z-index: 2;
    transition: top .25s ease;

    /* While the pinned site nav is showing, sit just below it instead of under it */
    :root.nav-shown & {
      top: var(--pinned-h, 0px);
    }
    display: flex;
    gap: 4px;
    /* Lines the words up with the page content, allowing for each link's own padding */
    padding: 10px max(calc(var(--gutter) - 14px), calc((100% - var(--max)) / 2 - 14px));
    overflow-x: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--border);

    a {
      flex: none;
      padding: 6px 14px;
      border-radius: 999px;
      color: var(--ink);
      font-size: 17px;
      text-decoration: none;
      transition: background .2s, opacity .2s;

      &:hover {
        background: var(--soft);
      }

      &.dim {
        opacity: .35;
      }
    }

    /* "Experience" and "Projects": the part labels, in green */
    .jump-part {
      color: var(--accent);
    }

    /* A thin line between the groups of links */
    .jump-sep {
      flex: none;
      align-self: center;
      width: 1px;
      height: 1.2em;
      margin-inline: 6px;
      background: var(--border-strong);
    }
  }

  /* Part headings (Experience, Projects): bigger than a section, with a green rule above */
  .part-head {
    padding-block: 96px 8px;

    h2 {
      margin: 0;
      padding-top: 16px;
      border-top: 3px solid var(--accent);
      font-size: clamp(48px, 7vw, 72px);
      font-weight: 400;
      line-height: 1.05;
    }

    p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 22px;
    }
  }

  /* Skills: the pills drawn by portfolio.js */
  .skills {
    padding-block: 64px 32px;

    h2 {
      margin: 0 0 8px;
      font-size: 48px;
      font-weight: 400;
    }
  }

  .skills-help {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    min-height: 2em;
    margin: 0 0 16px;
    color: var(--muted);

    button {
      padding: 2px 14px;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      background: none;
      color: var(--ink);
      cursor: pointer;
    }
  }

  /* Skill pills: one row per group, label on the left, pills wrapping on the right */
  #skill-groups {
    display: grid;
    gap: 10px;
  }

  .skill-group {
    display: grid;
    grid-template-columns: 9em minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 16px;

    @media (max-width: 600px) {
      grid-template-columns: minmax(0, 1fr);
    }

    h3 {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  .skill-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 8px 3px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--mat);
    color: var(--ink);
    font: inherit;
    font-size: 17px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;

    &:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* How many places the skill shows up in: a small number in a circle */
    .count {
      min-width: 1.4em;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--soft);
      color: var(--muted);
      font-size: 14px;
      text-align: center;
    }

    /* The clicked skill: solid green */
    &.selected {
      border-color: var(--accent);
      background: var(--accent);
      color: var(--on-dark);

      .count {
        background: color-mix(in oklch, var(--on-dark), transparent 80%);
        color: var(--on-dark);
      }
    }
  }

  /* Parts of the page hidden by the skill filter (portfolio.js) */
  .filtered-out {
    display: none !important;
  }

  /* "Python ×" chip at the start of the sticky section links: clears the filter */
  .jump-filter {
    flex: none;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-dark);
    font: inherit;
    font-size: 17px;
    cursor: pointer;

    &:hover {
      background: var(--accent-hover);
    }
  }

  .also {
    margin: 16px 0 0;
    color: var(--muted);
  }

  /* One section: details on the left, the story on the right */
  .entry {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 16px 56px;
    padding-block: 64px;
    border-top: 1px solid var(--border);
    transition: opacity .25s;

    &.dim {
      opacity: .3;
    }

    @media (max-width: 800px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .entry-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-meta {
    h2 {
      margin: 0 0 10px;
      font-size: 36px;
      font-weight: 400;
      line-height: 1.1;
    }

    .role {
      margin: 0;
    }

    .dates {
      margin: 2px 0 14px;
      color: var(--muted);
      font-style: italic;
    }
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      padding: 2px 12px;
      border-radius: 999px;
      background: color-mix(in oklch, var(--accent), var(--bg) 88%);
      color: var(--accent-hover);
      font-size: 16px;
    }
  }

  .entry-body {
    min-width: 0;

    > :first-child {
      margin-top: 0;
    }

    h3 {
      margin: 32px 0 6px;
      font-size: 26px;
      font-weight: 400;
    }

    p {
      margin: 0 0 12px;
    }

    li {
      margin-bottom: 10px;
    }

    code {
      font-family: inherit;
      font-style: italic;
    }

    /* This font has no bold, so color marks the lead-in words */
    strong {
      color: var(--accent);
      font-weight: 400;
    }

    .lead {
      font-size: 30px;
      line-height: 1.25;
    }

    /* Plain text links (like "Plaza" in the EIEC entry): accent green,
       and :visited keeps the same color so clicked links don't turn purple */
    a:not([class]),
    a:not([class]):visited {
      color: var(--accent);
    }

    a:not([class]):hover {
      color: var(--accent-hover);
    }
  }

  /* Coursework: subject groups sit side by side, and stack on phones */
  .coursework {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
    gap: 20px 32px;
    margin-bottom: 16px;

    h4 {
      margin: 0 0 8px;
      font-size: 20px;
      font-weight: 400;
      color: var(--accent);
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      margin-bottom: 6px;
      line-height: 1.3;
    }

    /* Course code on its own small line above the title */
    .code {
      display: block;
      font-size: 15px;
      letter-spacing: .04em;
      color: var(--muted);
    }

    /* One short line under a course: what I built or learned in it */
    .note {
      display: block;
      margin-top: 2px;
      font-size: 16px;
      color: var(--muted);
    }

    /* "now" pill for classes this quarter */
    .now {
      margin-left: 4px;
      padding: 0 8px;
      border-radius: 999px;
      background: color-mix(in oklch, var(--accent), var(--bg) 88%);
      color: var(--accent-hover);
      font-size: 14px;
    }
  }

  /* Text still to replace: easy to spot, so it can't go live by accident */
  .filler {
    padding: 8px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: var(--soft);
    color: var(--muted);
    font-style: italic;
  }

  .entry-photo {
    display: block;
    width: 100%;
    margin-top: 20px;
    border-radius: 14px;
  }

  /* Photo with a small caption underneath (e.g. the EIEC photos) */
  .photo-fig {
    margin: 0;

    figcaption {
      margin-top: 8px;
      font-size: .9em;
      color: var(--muted);
    }
  }

  /* Pill link under a section's tags, e.g. "Visit plazacampus.com" */
  .visit {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-dark);
    text-decoration: none;
    transition: background .2s;

    &:hover {
      background: var(--accent-hover);
    }
  }

  /* "Built with" list: layer name on the left, tools on the right */
  .stack-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 24px;
    margin: 0 0 12px;

    dt {
      color: var(--muted);
      font-size: 15px;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.9;
    }

    dd {
      margin: 0;
    }

    @media (max-width: 500px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;

      dd {
        margin-bottom: 8px;
      }
    }
  }

  /* Architecture diagram: full width, swipes sideways on phones */
  .arch {
    grid-column: 1 / -1;
    margin: 8px 0;

    figcaption {
      margin-top: 10px;
      color: var(--muted);
    }
  }

  .arch-scroll {
    overflow-x: auto;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--soft);
  }

  .arch svg {
    display: block;
    width: 100%;
    min-width: 860px;
    height: auto;

    .bx { fill: var(--mat); stroke: var(--ink); stroke-width: 1.1; }
    .bx-db { fill: var(--bg); stroke: var(--ink); stroke-width: 1.1; }
    .band { fill: none; stroke: var(--muted); }
    .dash { fill: none; stroke: var(--muted); stroke-dasharray: 4 4; }
    .out { fill: var(--mat); stroke: var(--accent); stroke-width: 2; }
    .ln { fill: none; stroke: var(--ink); stroke-width: 1.3; }
    .ln-acc { fill: none; stroke: var(--accent); stroke-width: 2; }
    .halo { fill: none; stroke: var(--soft); stroke-width: 7; }
    .rule { stroke: var(--border-strong); }
    .mk { fill: var(--ink); }
    .mk-acc { fill: var(--accent); }
    .t { font-size: 16px; fill: var(--ink); }
    .t-acc { font-size: 18px; fill: var(--accent); }
    .s { font-size: 13.5px; fill: var(--muted); }
    .st { font-size: 14px; fill: var(--ink); }
    .h { font-size: 13px; letter-spacing: .12em; fill: var(--muted); }
    .lb { font-size: 13px; fill: var(--muted); }
  }

  .entry-body-after {
    grid-column: 2;

    @media (max-width: 800px) {
      grid-column: 1;
    }
  }

  .result-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 8px;

    .stat-num {
      margin: 0;
      font-size: 40px;
    }

    .stat-label {
      color: var(--muted);
      font-size: 18px;
    }
  }

  /* "Show more" toggles (<details>): a pill-shaped summary that opens the rest */
  .more {
    margin: 16px 0;

    summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 16px;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      color: var(--accent);
      cursor: pointer;
      list-style: none;   /* hide the default triangle... */

      &::-webkit-details-marker {
        display: none;    /* ...in Safari too */
      }

      /* Our own arrow, which turns when the toggle is open */
      &::after {
        content: "›";
        transition: transform .2s;
      }

      &:hover {
        background: var(--soft);
      }
    }

    &[open] summary {
      margin-bottom: 16px;

      &::after {
        transform: rotate(90deg);
      }
    }
  }

  /* Class and personal projects */
  .project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
    /* Each card keeps its own height, so opening one card's toggle
       doesn't stretch the cards next to it */
    align-items: start;

    article {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--mat);
      transition: opacity .25s;

      /* The skill filter fades single cards, the same way it fades sections */
      &.dim {
        opacity: .3;
      }
    }

    /* The award line under a competition's title */
    .card-award {
      color: var(--accent);
    }

    /* A photo (not a chart) inside a card: cropped to the same shape every time */
    img.card-photo {
      aspect-ratio: 4 / 3;
      object-fit: cover;
      object-position: center 40%;
      border: 0;
    }

    /* "How we did it" toggle inside a card: smaller and tighter than on the page */
    .more {
      margin: 0;

      ul {
        margin: 0 0 10px;
        padding-left: 1.1em;
      }

      li {
        margin-bottom: 6px;
      }

      p + p {
        margin-top: 8px;
      }
    }

    .team {
      color: var(--muted);
    }

    h3 {
      margin: 0;
      font-size: 26px;
      font-weight: 400;
      line-height: 1.15;
    }

    p {
      margin: 0;
    }

    .project-year {
      color: var(--muted);
      font-style: italic;
    }

    /* Optional chart or screenshot inside a card */
    img {
      display: block;
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }

    /* "View on GitHub" link pinned to the bottom of the card */
    .filler,
    .card-link {
      margin-top: auto;
    }

    .card-link,
    .card-link:visited {
      color: var(--accent);
    }

    .card-link:hover {
      color: var(--accent-hover);
    }
  }
}