@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-next-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-next-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-next-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-next-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next Fallback: Arial";
  src:
    local("Arial"), local("ArialMT"), local("Liberation Sans"),
    local("LiberationSans"), local("Helvetica");
  font-weight: 400;
  font-style: normal;
  ascent-override: 98.7991%;
  descent-override: 31.7282%;
  line-gap-override: 0%;
  size-adjust: 99.5961%;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next Fallback: Arial";
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
    local("LiberationSans-Bold"), local("Helvetica Bold"),
    local("Helvetica-Bold");
  font-weight: 700;
  font-style: normal;
  ascent-override: 98.8077%;
  descent-override: 31.7309%;
  line-gap-override: 0%;
  size-adjust: 99.5874%;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next Fallback: Arial";
  src:
    local("Arial Italic"), local("Arial-ItalicMT"),
    local("Liberation Sans Italic"), local("LiberationSans-Italic"),
    local("Helvetica Oblique"), local("Helvetica-Oblique");
  font-weight: 400;
  font-style: italic;
  ascent-override: 98.7991%;
  descent-override: 31.7282%;
  line-gap-override: 0%;
  size-adjust: 99.5961%;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next Fallback: Roboto";
  src: local("Roboto Regular"), local("Roboto-Regular");
  font-weight: 400;
  font-style: normal;
  ascent-override: 98.5827%;
  descent-override: 31.6587%;
  size-adjust: 99.8147%;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next Fallback: Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 700;
  font-style: normal;
  ascent-override: 93.0783%;
  descent-override: 29.891%;
  size-adjust: 105.7175%;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next Fallback: Roboto";
  src: local("Roboto Italic"), local("Roboto-Italic");
  font-weight: 400;
  font-style: italic;
  ascent-override: 95.8773%;
  descent-override: 30.7899%;
  size-adjust: 102.6312%;
}

@font-face {
  font-family: "JetBrains Mono Fallback: Courier New";
  src:
    local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"),
    local("LiberationMono"), local("Roboto Mono Regular"),
    local("RobotoMono-Regular");
  ascent-override: 102.0166%;
  descent-override: 30.0049%;
  size-adjust: 99.9837%;
}


@layer reset, theme, base, features;


/* ============================================================
   reset
   ============================================================ */

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


/* ============================================================
   theme — color
   ============================================================ */

@layer theme {
  :root {
    color-scheme: light dark;
    --dark: #181818;
    --dark-tone1: #2B2B2B;
    --dark-tone2: #454545;
    --light-tone2: #AFAFAF;
    --light-tone1: #D6D6D6;
    --light: #F7F7F7;

    --orange: #E14C26;
    --yellow: #EBAD21;
    --slate: #A2B1AF;
    --green: #AFA94D;
    --blue-green: #02A378;
    --blue: #81CBDC;
    --highlight: #F76D6473;

    --bg: light-dark(var(--light), var(--dark));
    --fg: light-dark(var(--dark), var(--light));
    --surface: light-dark(var(--light-tone1), var(--dark-tone1));
    --muted: light-dark(var(--dark-tone2), var(--light-tone2));

    background-color: var(--bg);
    color: var(--fg);
    scrollbar-color: var(--muted) var(--bg);
  }

  ::selection {
    background-color: var(--highlight);
  }
}


/* ============================================================
   base — fonts, sizing, spacing, bare-element defaults
   ============================================================ */

@layer base {
  :root {
    --font-sans:
      "Atkinson Hyperlegible Next", "Atkinson Hyperlegible Next Fallback: Arial",
      "Atkinson Hyperlegible Next Fallback: Roboto", sans-serif;
    --font-mono:
      "JetBrains Mono", "JetBrains Mono Fallback: Courier New", monospace;
    --radius-code: 0.20em / 0.24em;

    font-size: 112.5%;
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-wrap: break-word;
    scrollbar-gutter: stable;
  }

  @media (resolution < 2dppx) {
    :root {
      --border-width: 2px;
      --border-color: var(--muted);
    }
  }

  @media (resolution >= 2dppx) {
    :root {
      --border-width: 1.5px;
      --border-color: var(--fg);
    }
  }

  body {
    margin: 0 auto;
    max-width: calc(700px + 2rem);
    padding-inline: 1rem;
  }

  body > header,
  body > main,
  body > footer {
    padding-block: 1rem;
    container-type: inline-size;
  }

  body > header {
    padding-block-start: 2rem;
  }

  img, svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  a {
    color: var(--fg);
  }

  code {
    font-family: var(--font-mono);
  }

  main :is(h1, h2, h3, h4, h5, h6, p, blockquote, pre, figure, ul, ol) {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  main :is(h2, h3, h4, h5, h6) {
    margin-top: 2rem;
    font-weight: 700;
    line-height: calc(4 / 3);
  }

  main h1 { font-size: 2rem; margin-top: 0; font-weight: 700; line-height: calc(4 / 3); }
  main h2 { font-size: calc(5rem / 3); }
  main h3 { font-size: calc(13rem / 9); }
  main h4 { font-size: calc(11rem / 9); }
  main h5 { font-size: calc(10rem / 9); }
  main h6 { font-size: 1rem; }
}


/* ============================================================
   features — each block is independently toggleable
   ============================================================ */

/* ---- feature: code chrome ---- */
@layer features {
  /* padding/radius tuned to a capital letter's cap-height/width ratio */
  main :not(pre) > code {
    font-size: 0.8889em;
    padding: 0.08em 0.20em;
    background-color: var(--surface);
    border-radius: var(--radius-code);
  }

  main pre {
    font-size: 0.8889rem;
  }

  main pre > code {
    display: block;
    padding: 0.88em 1em;
    overflow-x: auto;
    background-color: var(--surface);
    border-radius: var(--radius-code);
  }
}

/* ---- feature: lists as indented paragraphs ---- */
@layer features {
  main :is(ul, ol) {
    padding-left: 1em;
  }

  main :is(ul, ol) li {
    list-style: none;
    text-indent: -1em;
  }

  @supports (text-indent: 1em hanging) {
    main :is(ul, ol) {
      padding-left: 0;
    }

    main :is(ul, ol) li {
      text-indent: 1em hanging;
    }
  }

  main :is(ul, ol):not(.h-card-list, .h-card-list *) li > :not(ul):not(ol) {
    display: inline;
  }

  main :is(ul, ol):not(.h-card-list, .h-card-list *) li:not(:first-child) {
    margin-top: 0.5rem;
  }

  main :is(ul, ol) :is(ul, ol) {
    margin-top: 0.5rem;
    margin-bottom: 0;
  }
}

/* ---- feature: blockquotes ---- */
@layer features {
  main blockquote {
    border-left: var(--border-width) solid var(--border-color);
    padding: 0.5rem 1rem;
    margin-left: 0;
  }

  main blockquote > :last-child {
    margin-bottom: 0;
  }
}

/* ---- feature: highlight ---- */
@layer features {
  main mark {
    background-color: var(--highlight);
  }
}

/* ---- feature: horizontal rule ---- */
@layer features {
  main hr {
    border: none;
    border-top: var(--border-width) solid var(--border-color);
    margin: 2rem 0;
  }
}

/* ---- feature: heading anchors ---- */
@layer features {
  main .heading-link {
    text-decoration: none;
  }
}

/* ---- feature: figures ---- */
@layer features {
  main figure {
    margin-inline: 0;
  }

  main figure img {
    width: 100%;
    background-color: var(--surface);
  }

  @container (min-width: 700px) {
    main figure img {
      image-rendering: pixelated;
    }
  }
}

/* ---- feature: article footer date ---- */
@layer features {
  main .h-entry > footer {
    clear: both;
  }

  main footer time {
    display: block;
    text-align: right;
  }
}

/* ---- feature: site header ---- */
@layer features {
  header {
    --logo-gap: 12px;
    --crumb-gap: 8.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: calc(4 / 3);
  }

  header h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
    font-size: inherit;
  }

  header img {
    height: 3rem;
    width: auto;
  }

  header a {
    display: inline;
  }

  header .home-link {
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
    text-decoration: none;
  }

  header .home-link span {
    text-decoration: underline;
  }

  header .menu-link {
    display: none;
  }

  header .menu-link::after {
    content: "↓" / "";
    margin-inline-start: 0.15em;
  }

  @container (min-width: 700px) {
    header .menu-link {
      display: inline;
    }
  }
}

/* ---- feature: bold underline weight ---- */
@layer features {
  :is(header a, header .home-link span, strong, b) {
    text-decoration-thickness: 3px;
  }
}

/* ---- feature: breadcrumb ---- */
@layer features {
  header nav[aria-label="Breadcrumb"] ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  header nav[aria-label="Breadcrumb"] li:not(:first-child)::before {
    content: "/" / "";
    margin-inline: var(--crumb-gap);
  }
}

/* ---- feature: site footer ---- */
@layer features {
  body > footer {
    border-top: var(--border-width) solid var(--border-color);
  }

  footer > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  footer nav {
    display: none;
  }

  @container (min-width: 700px) {
    footer nav {
      display: block;
    }
  }

  footer nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* ---- feature: about card ---- */
@layer features {
  main .p-author .u-photo {
    float: right;
    width: 160px;
    height: 160px;
    margin: 0 0 0.5rem 1rem;
  }
}

/* ---- feature: member cards ---- */
@layer features {
  /* Indent each wrapped row by a slight 1em (matching the list hanging indent),
     but never past centered. mod(100cqi + gap, card-pitch) is the row's free
     space; half of it is the centered offset, so min() caps the indent there. */
  main .h-card-list ul {
    --card-pitch: calc(70px + 9.25rem); /* 70px photo + 0.75rem + 7rem text + 1.5rem gap */
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0;
    padding-inline-start: min(1em, mod(100cqi + 1.5rem, var(--card-pitch)) / 2);
  }

  main .h-card-list li {
    flex: none;
  }

  /* Fixed tracks: a 70px photo and a 7rem text column (measured to hold the
     widest name, "Priya Natarajan"), so the card never shrinks — no squished
     photo, no reflowed text. */
  main .h-card-list .h-card {
    display: grid;
    grid-template-columns: 70px 7rem;
    column-gap: 0.75rem;
    align-items: center;
  }

  main .h-card-list .u-photo,
  main .h-card-list .h-card:not(:has(.u-photo))::before {
    grid-row: 1 / span 3;
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }

  main .h-card-list .u-photo {
    object-fit: cover;
  }

  main .h-card-list .h-card:not(:has(.u-photo))::before {
    content: "";
    background-color: var(--surface);
  }

  main .h-card-list :is(.p-name, .p-org, .p-role) {
    white-space: nowrap;
  }

  main .h-card-list .p-role,
  main .h-card-list .p-org {
    font-size: 0.85rem;
    color: var(--muted);
  }
}

/* ---- feature: site mark ---- */
@layer features {
  .site-mark {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    margin: 2rem 0 0;
  }
}