html, body {
  margin: 0;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
}

body {
  background: oklch(0.985 0.012 85);
}

a {
  color: oklch(0.5 0.17 260);
  text-decoration: underline;
}

a:hover {
  color: oklch(0.4 0.17 260);
}

.nav-link {
  text-decoration: none;
}

/* Shared heading size so "Sean Gunn" (home) reads the same height as
   "Things", "About", and "Contact" on their pages. */
.page-heading {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  color: oklch(0.18 0 0);
  letter-spacing: -0.015em;
}

@media (max-width: 767px) {
  .page-heading {
    font-size: clamp(30px, 9vw, 40px);
  }
}

/* Positions each page's intro block (heading + whatever immediately
   follows it) at the same spot "Sean Gunn" sits at on the home page:
   90px in from the left, 220px below the nav on desktop/tablet, or
   flush top-left under the nav on mobile. Margin (not top/left offset)
   does the positioning so later siblings — a grid, a card list —
   still flow normally beneath it instead of stacking underneath a
   visually-shifted-but-not-actually-moved box. position:relative is
   only here so z-index has something to apply to. */
.page-intro {
  position: relative;
  z-index: 1;
  margin: 220px 0 0 90px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 767px) {
  .page-intro {
    margin: 0;
    padding: 40px 24px 0;
    gap: 12px;
  }
}

/* --- Things grid --- */

.thing-card__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: oklch(0.4 0 0);
  transition: opacity 0.15s ease;
}

.thing-card__toggle:hover {
  opacity: 0.6;
}

html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

/* Below this, drop the bento grid (its span/row mix doesn't fit a single
   narrow column cleanly) for a plain centered scroll list of uniform
   cards instead. */
@media (max-width: 640px) {
  #things-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  #things-grid > div {
    width: 100% !important;
    max-width: 320px !important;
    height: 420px !important;
    flex: none !important;
  }

  /* The uniform sizing above only applies to cards resting in the list.
     Once a card is expanded (JS switches it to position:fixed, inset to
     the viewport), it needs to fill the screen instead of staying
     clamped to the list's card size. */
  #things-grid > div.thing-card--expanded {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
  }
}