/* Fonts — self-hosted from Google Fonts / Fontsource, all SIL OFL.
   Newsreader (variable weight) for headings and the name,
   Nunito (variable weight) for everything else.
   The two emoji (🔗 on list titles, 🏆 on awards) are Google's Noto Emoji
   artwork as SVG images in assets/emoji/ (Apache 2.0, licence beside
   them), not a font: iPhones can't show the Noto emoji font. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens */

:root {
  /* Dark is the default: warm ink background, yellow accent */
  --bg: #171513;
  --surface: #211e1b;
  --text: #ede8e0;
  --text-secondary: #a89f93;
  --accent: #f5c542;
  /* the soft square behind the trophy on awards */
  --accent-tint: rgb(245 197 66 / 0.13);
  --border: #312d29;
  --border-strong: #46413b;


  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  --radius-sm: 6px;
  --radius-md: 6px;

  --measure: 680px;
  --nav-width: 160px;
  --thumb-width: 200px;
  /* Gap left above a heading when jumping to it with an #anchor link */
  --jump-offset: 40px;

  --transition: 160ms ease;
}

/* Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  /* Keep the scrollbar's space on every page, so short pages that don't
     scroll (blog index, a small category) line up exactly with long ones
     instead of jumping sideways when you move between them. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

ul,
ol {
  padding-left: 1.2em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-48) 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* Links: ink-colored text with a soft accent underline, like a printed page */

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition), color var(--transition);
}

a:hover {
  text-decoration-color: var(--accent);
}

main a:not([class]) {
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

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

/* Type */

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(36px, 6vw, 48px);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-16);
}

h2 {
  font-size: 29px;
  letter-spacing: -0.01em;
  margin: var(--space-64) 0 var(--space-16);
}

h2 a {
  text-decoration: none;
}

h2 a:hover {
  color: var(--accent);
}

h3 {
  font-size: 22px;
  margin: var(--space-32) 0 var(--space-8);
}

p {
  margin: 0 0 var(--space-16);
}

strong {
  font-weight: 700;
}

.meta {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

.eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-12);
}

.abstract,
.bio-text {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 var(--space-24);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

pre {
  font-family: var(--font-mono);
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

/* Nothing on the site is italic, including Markdown *emphasis* */
em,
i,
cite,
dfn,
var,
address {
  font-style: normal;
}

blockquote {
  margin: var(--space-24) 0;
  padding-left: var(--space-16);
  border-left: 2px solid var(--accent);
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text-secondary);
}

/* Skip link and screen-reader text */

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: -100px;
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-16);
}

/* Anchor jumps glide there and leave room above the heading */
html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: var(--jump-offset);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header and main nav. One nav with one look everywhere, the one from the
   phone drawer: big serif links with a hairline under each, the project
   types indented under Projects. From 1040px it sits in a column beside
   the text; narrower, it lives in the burger drawer (JS on) or turns into a
   plain row of small links (JS off). */

.site-header-inner,
main,
.site-footer {
  max-width: calc(var(--measure) + 2 * var(--space-24));
  margin-inline: auto;
  padding-inline: var(--space-24);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  padding-block: var(--space-32);
}

.menu-button {
  display: none;
}

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

/* a hairline between items, none after the last */
.site-nav > ul > li + li {
  border-top: 1px solid var(--border);
}

/* Links are muted so the nav stays quieter than the page; hover and the
   current page brighten to --text. */
.site-nav a {
  position: relative;
  display: block;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-12) 0;
  transition: color var(--transition);
}

.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--text);
}

/* "You are here": a small accent dot hanging in the margin, so the current
   page isn't marked by colour alone. Only the most specific item gets it:
   on a project page the dot sits on its type, and Projects just brightens. */
.site-nav a[aria-current]::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
}

.site-nav li:has(> .nav-sub a[aria-current]) > a::before {
  content: none;
}

.site-nav .nav-sub {
  margin: calc(-1 * var(--space-4)) 0 var(--space-12) var(--space-16);
}

.site-nav .nav-sub a {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  padding: var(--space-4) 0;
}

/* Main column */

main {
  padding-top: var(--space-32);
  padding-bottom: var(--space-64);
}

main:focus {
  outline: none;
}

/* Breadcrumb */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--space-24);
  padding: 0;
  font-size: 15px;
  color: var(--text-secondary);
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin: 0 var(--space-8);
  color: var(--border-strong);
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text);
}

/* Pills (tech stack, awards, tags) */

.metadata-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0 0 var(--space-16);
}

.pill {
  display: inline-block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  text-decoration: none;
}

/* Tech stack on project pages: icon + name, no box, links to the tech's site */
.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  list-style: none;
  margin: var(--space-16) 0 var(--space-24);
  padding: 0;
}

.tech-list a,
.tech-list span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 15px;
  color: var(--text-secondary);
  text-decoration: none;
}

.tech-list a:hover {
  color: var(--accent);
}

.tech-list a:hover .tech-icon {
  transform: translateY(-2px);
}

.tech-icon {
  flex: none;
  width: 24px;
  height: 24px;
  transition: transform var(--transition);
}

.pill-status {
  color: var(--text);
  border-color: var(--accent);
  vertical-align: middle;
}

.pill-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}

.card-title .pill {
  font-family: var(--font-sans);
  font-weight: 400;
}

.pill-tag:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* Post list: one quiet row per post, title left, date right */

.post-list {
  list-style: none;
  margin: var(--space-24) 0 var(--space-48);
  padding: 0;
}

.post-list li {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--border);
}

.post-list li:first-child {
  border-top: 1px solid var(--border);
}

.post-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  text-decoration: none;
}

.post-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
}

.post-row:hover .post-title {
  color: var(--accent);
}

.post-date {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.post-description {
  font-size: 16px;
  color: var(--text-secondary);
  margin: var(--space-4) 0 0;
}

/* Browse blocks (blog index: years and tags) */

.browse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-24);
}

.browse-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--space-8);
}

.tag-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag-index a {
  display: inline-block;
  font-size: 15px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 12px;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.tag-index a:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.tag-index a[aria-current] {
  color: var(--text);
  font-weight: 700;
  border-color: var(--accent);
}

/* Embedded videos: full column width, 16:9, never wider than the screen */

main iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
  margin: var(--space-24) 0;
}

/* Project screenshot */

.project-screenshot {
  margin: var(--space-32) 0;
}

.project-screenshot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* Outbound links */

.outbound-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin: var(--space-32) 0;
}

.button {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: var(--space-8) var(--space-16);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

.button:hover {
  background: var(--surface);
  border-color: var(--text-secondary);
}

/* Bio row under the name, like leerob.com: "Bio" on the left, Short | Long
   on the right, one hairline under the row, the current tab underlined
   right on top of it. */

.bio-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  margin: var(--space-32) 0 var(--space-24);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.4;
}

.bio-tabs-label {
  margin: 0;
  padding-bottom: var(--space-12);
  color: var(--text-secondary);
}

.bio-tabs-nav {
  display: flex;
  gap: var(--space-16);
}

.bio-tabs-nav a {
  display: block;
  padding-bottom: var(--space-12);
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.bio-tabs-nav a:hover {
  color: var(--text);
}

.bio-tabs-nav a[aria-current] {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* Bio text under the tabs, short and long (font is set with .abstract above) */
.bio-text {
  margin-bottom: var(--space-32);
}

.bio-text p {
  margin: 0 0 var(--space-24);
}

.bio-text p:last-child {
  margin-bottom: 0;
}

/* Profile links (About) */

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  font-size: 16px;
  margin: 0 0 var(--space-32);
}

.profile-links a {
  color: var(--text-secondary);
}

.profile-links a:hover {
  color: var(--accent);
}

/* Entry list (About: experience, education, awards, etc.) */

.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-list > li {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--border);
}

.entry-list > li:first-child {
  border-top: 1px solid var(--border);
}

.entry-list p {
  margin: 0;
}

.entry-title {
  font-weight: 700;
}

.entry-highlights {
  margin: var(--space-8) 0 0;
  color: var(--text-secondary);
  font-size: 17px;
}

.entry-highlights li {
  margin-bottom: var(--space-4);
}

/* Hackathon wins on the full bio: one row per win, like the post list.
   Trophy, then the award and the project; the university and the year on
   the right. The whole row links to the project. */

.win-list {
  list-style: none;
  margin: var(--space-16) 0 var(--space-12);
  padding: 0;
}

.win-list li + li {
  border-top: 1px solid var(--border);
}

.win-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--space-12);
  align-items: start;
  padding: var(--space-12) 0;
  color: var(--text);
  text-decoration: none;
}

/* the trophy's square is as tall as the award and project lines beside it */
.win-row .award-icon {
  align-self: center;
}

.win-main,
.win-side {
  display: flex;
  flex-direction: column;
}

.win-side {
  align-items: flex-end;
  text-align: right;
  padding-left: var(--space-12);
}

.win-award {
  font-weight: 700;
  line-height: 26px;
  /* if a long award wraps on a phone, two even lines, never "Add-" / "On" */
  text-wrap: balance;
  transition: color var(--transition);
}

.win-school {
  line-height: 26px;
}

.win-project,
.win-year {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-secondary);
}

.win-row:hover .win-award {
  color: var(--accent);
}

.entry-list .win-more {
  margin-top: var(--space-4);
}

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

  .win-side {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
    align-items: baseline;
    text-align: left;
    padding-left: 0;
  }

  .win-school {
    font-size: 15px;
    line-height: 22px;
    color: var(--text-secondary);
  }

  .win-year::before {
    content: "· ";
  }
}

/* Callout (Note / Tip / Looking for) */

.callout {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-16) var(--space-24);
  margin: var(--space-24) 0;
}

.callout-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}

.callout p:last-child {
  margin-bottom: 0;
}

.see-more {
  margin: calc(-1 * var(--space-24)) 0 var(--space-48);
  font-weight: 600;
}

.see-more a::after {
  content: " →";
}

/* Project list: one project per row. From 601px the thumbnail sits on the
   left with the title, the award line and the description beside it, and a
   hairline between rows, like the post list. On phones each project stacks:
   image, then the text under it. */

.card-grid {
  margin: var(--space-24) 0 var(--space-48);
}

.card {
  display: block;
  text-decoration: none;
}

.card + .card {
  margin-top: var(--space-32);
}

/* Cover image: the card and its frame stay still; on hover the image zooms
   a little inside the frame and the title turns accent. Scoped to the
   cover so the tech icons aren't affected. */
.card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.card-media picture {
  display: block;
}

.card-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 300ms ease;
}

.card:hover .card-media img,
.card:focus-visible .card-media img {
  transform: scale(1.04);
}

/* Hackathon award (award.html): one unit everywhere. On the left, Google's
   🏆 centred in a soft yellow square as tall as the two lines beside it:
   the award in bold, then university · event · year, muted. Nothing sits
   on the screenshot and nothing moves on its own. */
.award {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-12);
  align-items: center;
  margin: var(--space-4) 0 var(--space-8);
}

/* The square: 48px = the 26px award line + the 22px line under it (bio and
   project pages); project lists use 44px for their two 22px lines. The
   padding is the space around the cup, which is about half as tall. */
.award-icon {
  display: block;
  width: 48px;
  height: 48px;
  padding: 11px;
  background: var(--accent-tint);
  border-radius: var(--radius-sm);
}

.award-text {
  margin: 0;
}

.award-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
  color: var(--text);
  text-wrap: balance;
}

.award-where {
  display: block;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-secondary);
  /* on a phone: "Princeton University ·" / "HackPrinceton · 2025", not the
     year alone on the second line */
  text-wrap: balance;
}

/* Each part is one unit: when the line is full the next part moves down
   whole, so lines break between parts. A part only breaks inside when it
   alone is wider than the line (a long university on a small phone),
   rather than running off the page. */
.award-part {
  display: inline-block;
}

/* On a project page it gets its own box, in the callout style */
.award-large {
  column-gap: var(--space-16);
  align-items: center;
  margin: 0 0 var(--space-24);
  padding: var(--space-16) var(--space-24) var(--space-16) var(--space-16);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.award-large .award-name {
  font-size: 18px;
  line-height: 26px;
}


.card:hover h3,
.card:focus-visible h3 {
  color: var(--accent);
}

/* Google's 🔗 after a project or post title (link-title.html): says "this
   is a link" and nudges up and right on hover */
.title-end {
  white-space: nowrap;
}

.link-emoji {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.3em;
  vertical-align: -0.07em;
  transition: transform var(--transition);
}

.card:hover .link-emoji,
.card:focus-visible .link-emoji,
.post-row:hover .link-emoji,
.post-row:focus-visible .link-emoji {
  transform: translate(2px, -2px);
}

.card-title {
  font-size: 21px;
  margin: var(--space-12) 0 var(--space-4);
}

/* Award in project lists: the trophy's square beside two lines, the award
   title, then university · year. If the title wraps on a narrow phone,
   the square stays centred on the block. */
.award-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-12);
  align-items: center;
  margin: 0 0 var(--space-8);
}

.award-card .award-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
}

.award-card-text {
  margin: 0;
}

.award-card-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  color: var(--text);
  text-wrap: balance;
}

.award-card-where {
  display: block;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-secondary);
}

/* like .award-part: the year moves down whole if the line is full */
.award-card-school,
.award-card-year {
  display: inline-block;
}

.card-description {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

@media (min-width: 601px) {
  .card {
    display: grid;
    grid-template-columns: var(--thumb-width) minmax(0, 1fr);
    /* any spare height from a tall thumbnail goes under the description */
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-24);
    padding: var(--space-24) 0;
    border-top: 1px solid var(--border);
  }

  .card:last-child {
    border-bottom: 1px solid var(--border);
  }

  .card + .card {
    margin-top: 0;
  }

  .card-media {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
  }

  .card-title {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .award-card {
    grid-column: 2;
    grid-row: 2;
  }

  .card-description {
    grid-column: 2;
    grid-row: 3;
    margin-bottom: 0;
  }
}

.card .meta {
  font-size: 14px;
}

/* Gallery grid (Arts): dense square crops */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-12);
  margin: var(--space-24) 0 var(--space-48);
}

.gallery-item {
  display: block;
  text-decoration: none;
}

.gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: opacity var(--transition);
}

.gallery-item:hover img {
  opacity: 0.85;
}

.gallery-title {
  display: block;
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: var(--space-8);
}

.gallery-item:hover .gallery-title {
  color: var(--text);
}

/* Figures */

.figure,
.art-figure {
  margin: var(--space-32) 0;
}

.figure img,
.art-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

figcaption {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: var(--space-8);
  text-align: center;
}

/* Art details (medium, tools, date) */

.art-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-16);
  margin: 0 0 var(--space-32);
  padding: var(--space-16) 0;
  border-block: 1px solid var(--border);
}

.art-details dt {
  font-size: 14px;
  color: var(--text-secondary);
}

.art-details dd {
  margin: 0;
}

/* See also */

.see-also {
  margin-top: var(--space-64);
  padding-top: var(--space-24);
  border-top: 1px solid var(--border);
}

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

.see-also li {
  padding: var(--space-4) 0;
}

/* Prev / next */

.prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.prev-next-link {
  display: block;
  padding: var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}

.prev-next-link:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}

.prev-next-link.next {
  grid-column: 2;
  text-align: right;
}

.prev-next-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Footer */

.site-footer {
  padding-block: var(--space-32) var(--space-48);
  font-size: 15px;
  color: var(--text-secondary);
}

.site-footer::before {
  content: "";
  display: block;
  border-top: 1px solid var(--border);
  margin-bottom: var(--space-24);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-credit {
  color: inherit;
}

.footer-links a:hover {
  color: var(--text);
}

.site-footer p {
  margin: 0;
}

/* Photo grid (About): first photo large, the rest beside it, like leerob.com */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 160px;
  gap: var(--space-12);
  margin: var(--space-32) 0 var(--space-48);
}

.photo-grid-1 {
  grid-template-columns: 1fr;
  grid-auto-rows: 320px;
}

.photo-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 260px;
}

.photo-grid-3 .photo:first-child,
.photo-grid-4 .photo:first-child,
.photo-grid-5 .photo:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.photo-grid-4 .photo:last-child {
  grid-column: span 3;
}

.photo-grid-5 .photo:last-child {
  grid-column: span 2;
}

.photo picture,
.photo img {
  width: 100%;
  height: 100%;
}

.photo img {
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* Small screens */

@media (max-width: 600px) {
  .site-header-inner,
  main,
  .site-footer {
    padding-inline: var(--space-16);
  }

  .site-header-inner {
    padding-block: var(--space-16) var(--space-8);
  }

  /* Without JS the links stay on the left and wrap if they must */

  main {
    padding-top: var(--space-24);
  }

  h2 {
    font-size: 27px;
    margin-top: var(--space-48);
  }

  .abstract,
  .bio-text {
    font-size: 20px;
  }

  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 130px;
  }

  .photo-grid-1 {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .photo-grid-4 .photo:last-child {
    grid-column: span 2;
  }

  .photo-grid-5 .photo:last-child {
    grid-column: auto;
  }

  .photo-grid-3 .photo:first-child,
  .photo-grid-4 .photo:first-child,
  .photo-grid-5 .photo:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .post-row {
    flex-direction: column;
    gap: var(--space-4);
  }

  .prev-next {
    grid-template-columns: 1fr;
  }

  .prev-next-link.next {
    grid-column: 1;
  }
}

/* Below 1040px. JS on: a burger at the top right opens the nav as a drawer
   from the right. JS off: the nav is a plain row of small links. */

.nav-overlay {
  display: none;
}

@media (max-width: 1039px) {
  html:not(.js) .site-nav > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-16);
  }

  html:not(.js) .site-nav > ul > li {
    border: 0;
  }

  html:not(.js) .site-nav a::before {
    content: none;
  }

  html:not(.js) .site-nav a {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    padding: var(--space-4) 0;
  }

  html:not(.js) .site-nav a:hover {
    color: var(--text);
  }

  html:not(.js) .site-nav a[aria-current] {
    color: var(--text);
    font-weight: 600;
  }

  html:not(.js) .site-nav .nav-sub {
    display: none;
  }

  .js .site-header-inner {
    flex-wrap: nowrap;
  }

  .js .menu-button {
    position: relative;
    z-index: 60;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
  }

  .menu-icon {
    position: relative;
    width: 20px;
    height: 14px;
  }

  .menu-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
      opacity 200ms ease, top 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .menu-icon span:nth-child(1) { top: 0; }
  .menu-icon span:nth-child(2) { top: 6px; }
  .menu-icon span:nth-child(3) { top: 12px; }

  .menu-open .menu-icon span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
  }
  .menu-open .menu-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.3);
  }
  .menu-open .menu-icon span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
  }

  /* The drawer */
  .js .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 50;
    width: min(80vw, 320px);
    margin: 0;
    padding: 88px var(--space-24) var(--space-32);
    overflow-y: auto;
    background: var(--bg);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 360ms;
  }

  .js.menu-open .site-nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0s;
  }

  .js .site-nav > ul > li {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 240ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .js.menu-open .site-nav > ul > li {
    opacity: 1;
    transform: none;
  }

  .js.menu-open .site-nav > ul > li:nth-child(1) { transition-delay: 80ms; }
  .js.menu-open .site-nav > ul > li:nth-child(2) { transition-delay: 130ms; }
  .js.menu-open .site-nav > ul > li:nth-child(3) { transition-delay: 180ms; }
  .js.menu-open .site-nav > ul > li:nth-child(4) { transition-delay: 230ms; }

  .js .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(20 16 12 / 0.35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  .js.menu-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .menu-open body {
    overflow: hidden;
  }
}

/* 1040px and up: the nav is a column on the left that stays put while the
   page scrolls; the nav and the text column are centered together. */

@media (min-width: 1040px) {
  body {
    display: grid;
    grid-template-columns:
      minmax(var(--space-24), 1fr)
      var(--nav-width)
      var(--space-32)
      minmax(0, calc(var(--measure) + 2 * var(--space-24)))
      minmax(var(--space-24), 1fr);
    grid-template-areas:
      ". nav . main ."
      ". nav . footer .";
    align-items: start;
  }

  .site-header {
    grid-area: nav;
    position: sticky;
    top: 0;
  }

  /* Same fonts as the drawer, scaled down for a column that is always on
     screen: 22px links (h3 size, below the 29px h2), 16px types. */
  .site-nav a {
    font-size: 22px;
    padding: var(--space-8) 0;
  }

  .site-nav .nav-sub {
    margin: calc(-1 * var(--space-4)) 0 var(--space-8) var(--space-16);
  }

  .site-nav .nav-sub a {
    font-size: 16px;
  }

  .site-header-inner {
    display: block;
    max-width: none;
    margin: 0;
    /* 8px less than main's top padding, so the top of "About" lines up with
       the top of the h1 (or the breadcrumb on inner pages) */
    padding: calc(var(--space-96) - var(--space-8)) 0 var(--space-32);
  }

  .page-frame {
    grid-area: main;
    min-width: 0;
  }

  .site-footer {
    grid-area: footer;
    width: 100%;
  }

  main {
    padding-top: var(--space-96);
  }
}