/* ==========================================================================
   stonewilliam.com
   Transcribed from Figma "Portfolio" → Dev handover (page node 2227:7925).
   Node references are noted against the components they describe.
   Light-only by design; the mocks define no dark theme.
   ========================================================================== */

/* The design specifies SF Pro, which cannot be licensed for the web. Apple
   devices get genuine SF via -apple-system with zero download; everywhere else
   falls back to Inter, self-hosted so there is no third-party font request.
   Variable 400–700, latin subset only (48KB). */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-var-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;
}

:root {
  color-scheme: light;

  /* Colour ---------------------------------------------------------------- */
  --ink: #1d1d1f;
  --muted: #6f6f74;
  /* Brand accent, as designed. Used as a button FILL (with ink text: 7.1:1) and
     as the hero eyebrow text. As text on white it measures 2.25:1 and does not
     meet WCAG AA — kept deliberately, William's call 2026-08-11. */
  --accent: #d7a36e;
  --surface: #f5f5f5; /* the flat grey: About section band, secondary buttons */
  --white: #fff;
  --link: #1570ef;
  --linkedin: #0a66c2;

  /* THE MATERIAL --------------------------------------------------------------
     One translucent fill shared by the nav pill and every card. Because it is
     translucent it resolves differently against each section, which is exactly
     how the design works — verified against Figma:
       over #ffffff → #f7f7f7   (Selected work cards)
       over #f5f5f5 → #eeeeee   (About card)
       over #2d2d2d → #3a3a3a   (Connect card)
     Never hardcode those results; let the material do it. */
  --material: rgb(179 179 179 / 0.1);
  --material-hover: rgb(179 179 179 / 0.18);
  --material-blur: 50px;
  /* The light-catching rim on the glass (the nav pill). */
  --material-edge: inset 2px 3px 3px -3px rgb(255 255 255 / 0.6),
    inset 0 -1px 1px 0 rgb(255 255 255 / 0.25),
    inset 0 1px 1px 0 rgb(255 255 255 / 0.25);

  --panel-from: #414141;
  --panel-mid: #353535;
  --panel-to: #2d2d2d;
  --panel-border: #36363a;

  --chip-bg: rgb(194 194 194 / 0.2);
  --chip-bg-hover: rgb(194 194 194 / 0.35);
  /* Case-study page chips use muted text at 14px; --muted measured 4.19:1 on the
     resolved chip grey, so this shade darker clears AA at 4.65:1. Card chips use
     ink instead (14.9:1) — see .chip--card. */
  --chip-text: #68686d;
  --hairline: rgb(29 29 31 / 0.1);

  /* Type ------------------------------------------------------------------ */
  --font: -apple-system, BlinkMacSystemFont, "Inter var", Inter, system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step-eyebrow: 1.125rem; /* 18px, tracking .17em */
  --step-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* 40 → 64 */
  --step-section: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem); /* 40 → 56 section headings */
  --step-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); /* 24 → 32 case-study headings */
  --step-deck: clamp(1.125rem, 0.9rem + 0.9vw, 1.75rem); /* 18 → 28 hero deck */
  --step-body: clamp(1.0625rem, 0.98rem + 0.35vw, 1.5rem); /* 17 → 24 */
  --step-card-title: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); /* 24 → 32 */
  --step-card-deck: clamp(1.0625rem, 0.95rem + 0.5vw, 1.5rem); /* 17 → 24 */
  --step-ui: 1rem; /* every button and nav link: 16px */
  --step-chip: 0.875rem;

  /* Space ----------------------------------------------------------------- */
  --container: 1336px;
  --measure: 800px; /* prose cap ≈ 70 characters */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --block: 1.5rem; /* the design's 24px rhythm */
  --section-y: clamp(3.5rem, 2rem + 6vw, 5rem); /* 80px at desktop */
  --section-gap: clamp(2rem, 1rem + 3vw, 3.5rem); /* 56px header → content */
  --card-pad: clamp(1.5rem, 0.9rem + 2.4vw, 2rem); /* 24px mobile → 32px desktop */

  --radius-panel: 24px;
  --radius-card: 24px;
  --radius-pill: 100px;

  --nav-offset: 24px;
  --nav-h: 64px;
  --nav-inset: 8px; /* even gap around the CTA; also sets its concentric radius */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the floating pill. */
  scroll-padding-top: calc(var(--nav-h) + var(--nav-offset) * 2);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* Layout ------------------------------------------------------------------- */
/* In Figma the 1336px is the CONTENT width — cards, the nav pill and section
   headers all span exactly 1336 and the page margin sits outside that. So the
   gutter is added to max-width rather than eaten out of it, otherwise every
   panel renders 96px narrow at desktop. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--surface {
  background: var(--surface);
}

/* Pages that sit under the back row start 56px down, not 80px (2227:8106). */
.section--tight {
  padding-top: var(--section-gap);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* Icons -------------------------------------------------------------------- */
.icon {
  flex: none;
}

.icon--chevron {
  width: 10.5px;
  height: 18px;
}

/* Explicit, because the reset's `height: auto` would otherwise derive it. */
.icon--arrow {
  width: 17px;
  height: 14px;
}

.icon--flip {
  transform: rotate(180deg);
}

/* Typography --------------------------------------------------------------- */
.eyebrow {
  font-size: var(--step-eyebrow);
  font-weight: 500;
  letter-spacing: 0.17em; /* Figma 3.06px / 18px */
  text-transform: uppercase;
  color: var(--accent);
}

.h1 {
  font-size: var(--step-h1);
  font-weight: 700;
  line-height: 1.031; /* Figma 66px / 64px */
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Section headings — "Selected work", "About me", "Want to connect?" (56px). */
.section-title {
  font-size: var(--step-section);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.deck {
  font-size: var(--step-deck);
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  text-wrap: pretty;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem; /* Figma 12px, for the icon buttons */
  padding: 1rem 1.5rem; /* 16px 24px */
  font-size: var(--step-ui);
  font-weight: 500;
  line-height: 1.2; /* gives the designed 51px button height at 16px text */
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

/* Feedback on press, not release — apple-design §1. */
.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--ink);
  border-color: #2d2d2d;
  color: var(--white);
}

.btn--primary:hover {
  background: #000;
}

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
}

.btn--secondary:hover {
  background: #ebebeb;
}

/* The card CTA on the home carousel: outlined, transparent (Figma 2227:7974). */
.btn--outline {
  background: transparent;
  border-color: #2d2d2d;
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--material-hover);
}

.btn--linkedin {
  background: var(--linkedin);
  border-color: var(--linkedin);
  color: var(--white);
}

.btn--linkedin:hover {
  background: #0b5aa8;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--block);
}

/* Chips -------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.25rem 1rem;
  font-size: var(--step-chip);
  line-height: 1;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 0;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Card chips are shorter and use ink text (Figma 2227:7963 vs 2227:9003). */
.chip--card {
  min-height: 0;
  height: 28px;
  color: var(--ink);
}

/* Filter chips keep the same background whether or not they're active. Active is
   signalled by a tick, bold weight and ink text — not by inverting to a dark fill. */
.chip--button {
  gap: 0.5rem; /* Figma 8px, between the tick and the label */
  transition: background-color 0.18s ease, color 0.18s ease;
}

.chip--button:hover {
  background: var(--chip-bg-hover);
}

.chip__tick {
  display: none;
  line-height: 0;
}

.chip--button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
}

.chip--button[aria-pressed="true"] .chip__tick {
  display: block;
}

/* The designed dark artefact panel ----------------------------------------
   Panels export from Figma complete — gradient, composition and corner radius
   are already in the image. The gradient below is only the backdrop shown
   while the image loads, so there is no flash of white. */
.panel {
  overflow: hidden;
  aspect-ratio: 1336 / 472;
  background: radial-gradient(
    ellipse at center,
    var(--panel-from) 0%,
    var(--panel-mid) 55%,
    var(--panel-to) 100%
  );
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
}

.panel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.figure__caption {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: var(--measure);
}

/* Nav — a floating pill, not a bar (Figma 2227:7927 / 2227:7928) ----------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: var(--nav-offset);
  pointer-events: none; /* the wrapper is empty space; only the pill is clickable */
}

/* The pill sits inside .container so its edges line up with the cards and
   section headers at every viewport width, not just at the design width. */
/* The CTA's gap must be equal on all four sides, or its curve reads as
   off-centre against the pill's. With a 64px fully-rounded pill (32px effective
   radius) and an 8px inset, the CTA needs a 24px radius to stay concentric —
   which is exactly what a fully-rounded 48px pill gives. Hence --nav-inset.
   The left padding stays 16px so the wordmark keeps lining up with card text. */
.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  height: var(--nav-h);
  padding: var(--nav-inset);
  padding-left: 16px;
  overflow: hidden;
  background: var(--material);
  backdrop-filter: blur(var(--material-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(180%);
  border-radius: var(--radius-pill);
  box-shadow: var(--material-edge);
}

/* Brand and links sit in one row with no gap — each item's own 16px of
   padding does the spacing, matching the Figma frame. */
.nav__group {
  display: flex;
  align-items: center;
  min-width: 0;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  font-family: "Helvetica Neue", var(--font);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.17em; /* Figma 2.72px / 16px */
  /* Uppercased as presentation so screen readers still announce the real name. */
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: 16px;
  font-size: var(--step-ui);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease;
}

/* Height derived from the pill so the concentric relationship holds if either
   the pill height or the inset changes. */
.nav__pill .btn {
  height: calc(var(--nav-h) - var(--nav-inset) * 2);
  padding-block: 0;
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--ink);
  background: var(--material-hover);
}

/* Hero (Figma 2227:7940) --------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--block);
  text-align: center;
  /* Asymmetric in the design: 112px above, 80px below. */
  padding-block: clamp(3rem, 1.5rem + 5vw, 7rem) var(--section-y);
}

.hero .h1 {
  max-width: 558px; /* Figma 557.8px */
}

.hero .deck {
  max-width: 46ch;
}

.hero .btn-row {
  justify-content: center;
  padding-top: var(--block);
}

/* Section header (Figma 2227:7952) ---------------------------------------- */
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: 4px;
  margin-bottom: var(--section-gap);
}

/* "View all work" — flat grey pill with a chevron, ink text. */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  height: 51px;
  padding: 8px 24px;
  font-size: var(--step-ui);
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}

.pill-link:hover {
  background: #ebebeb;
}

.section--surface .pill-link {
  background: var(--material);
}

/* Work card (Figma 2227:7958) ---------------------------------------------
   Note: the first carousel card's title measures 462px and its deck 419px in
   Figma, but those are hug-to-content widths from hard-wrapped text — the second
   card in the same carousel runs both at the full 620px column. Do not turn them
   back into max-widths; the text should fill its column. */
.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-pad);
  align-items: center;
  padding: var(--card-pad);
  background: var(--material);
  border-radius: var(--radius-card);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--block);
  align-items: flex-start;
}

.card__title {
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.card__title a {
  text-decoration: none;
}

.card__deck {
  font-size: var(--step-card-deck);
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  text-wrap: pretty;
}

/* The CTA sits in its own 24px-topped block in the design. Both card CTAs are
   outlined buttons — "Read case study" on the carousel, "N min read" + arrow on
   All-work (Figma 2227:7974 / 2227:8145) — with a 16px gap, not the .btn 12px. */
.card__cta {
  padding-top: var(--block);
}

.card__cta .btn {
  gap: 1rem;
}

.card .panel {
  aspect-ratio: 620 / 472;
  width: 100%;
}

/* Carousel (Figma 2227:7957 + 2227:8026) ---------------------------------- */
.carousel {
  display: grid;
  gap: var(--section-gap);
}

/* Slides are container-width, and the next card peeks past the right edge.
   The track is a full-width sibling of .container rather than a child, so the
   peek can extend into the page margin — clipping it at the gutter would show
   only a ~48px sliver instead of the designed one. Its own inset re-aligns the
   slides with the container's content edge at every width, and because that
   inset is a percentage of the parent it never trips over scrollbar width the
   way a 100vw full-bleed would. */
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--block);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-bottom: 0.25rem;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  scroll-snap-align: start;
  min-width: 0;
}

/* Spacer · dots (centred) · arrows — matching the designed 88 / 1fr / 88. */
.carousel__controls {
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  align-items: center;
}

.carousel__dots {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  height: 36px;
  padding-inline: 16px;
  margin: 0;
  list-style: none;
  background: var(--material);
  border-radius: var(--radius-pill);
}

.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: rgb(29 29 31 / 0.25);
  transition: background-color 0.18s ease, width 0.18s ease;
}

.carousel__dot[aria-current="true"] {
  width: 24px;
  background: var(--ink);
}

.carousel__arrows {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 1rem;
}

.carousel__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--radius-pill);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.carousel__arrow .icon--chevron {
  width: 9px;
  height: auto;
}

.carousel__arrow:hover:not(:disabled) {
  background: #ebebeb;
  color: var(--ink);
}

.carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* About card (Figma 2227:8050) -------------------------------------------- */
/* 616 + 40 + 616 = 1272. The About gap is 40px where the work card's is 32px —
   they genuinely differ in the design. */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 0.6rem + 2.8vw, 2.5rem);
  align-items: center;
  padding: var(--card-pad);
  background: var(--material);
  border-radius: var(--radius-card);
}

.about__portrait {
  width: 100%;
  border-radius: var(--radius-panel);
  aspect-ratio: 620 / 472;
  object-fit: cover;
}

/* Back row — 16px above and below a 51px pill, the designed 83px band. */
.back-row {
  padding-block: 16px;
}

/* Case study page --------------------------------------------------------- */

.case-head {
  display: flex;
  flex-direction: column;
  gap: var(--block);
}

/* 56px between the title and the hero image (Figma 2227:8996 → 2227:8998):
   32px here plus the 24px .case-head gap. */
.case-head .h1 {
  margin-bottom: 2rem;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Case study body rhythm ---------------------------------------------------
   Markdown renders a FLAT list of h2/p/ul/figure — there are no section
   wrappers — so spacing is driven entirely by top-margins on siblings. A flex
   `gap` here would land between a heading and its own first paragraph, and in
   flexbox margins add to the gap rather than collapsing, which is how this
   previously reached 112px where the design has 24px.

   Measured from Figma 2227:8995: 56px between sections, 24px within one. */
.case-body {
  padding-top: var(--section-gap); /* 56px from the tags to the first heading */
  padding-bottom: var(--section-y);
}

.case-body > * + * {
  margin-top: var(--block); /* 24px — the within-section rhythm */
}

.case-body > h2 {
  margin-top: var(--section-gap); /* 56px — a new section starts */
}

.case-body > h2:first-child {
  margin-top: 0;
}

.case-body h2 {
  font-size: var(--step-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.case-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

/* Full container width, as designed. That is a long measure (~116 characters at
   24px), so the leading is raised well above the mocks' ~1.2 to keep the return
   sweep trackable — the standard trade for a wide column. */
.case-body p,
.case-body ul,
.case-body ol {
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
}

.case-body ul,
.case-body ol {
  padding-left: 1.5em;
}

.case-body li + li {
  margin-top: 0.5em;
}

.case-body strong {
  color: var(--ink);
  font-weight: 600;
}

.case-body hr {
  display: none;
}

/* All-work list ----------------------------------------------------------- */
.work-list {
  display: flex;
  flex-direction: column;
  gap: var(--block);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 24px below the title, 56px above the cards (Figma 2227:8107 / 2227:8128). */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--block);
  margin-bottom: var(--section-gap);
}

.work-item[hidden] {
  display: none;
}

.filter-empty {
  color: var(--muted);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 860px) {
  .card,
  .about {
    grid-template-columns: 1fr;
  }

  .card__media,
  .about__media {
    order: -1;
  }

  .card__title,
  .card__deck {
    max-width: none;
  }

  /* The mobile card image is 313x238 — the same 620/472 crop, not a wide panel. */
  .card .panel {
    aspect-ratio: 620 / 472;
  }
}

@media (max-width: 640px) {
  /* The mobile frame (2227:8668) drops the wordmark and keeps the tabs plus the
     CTA — which is also what stops the pill overflowing at 393px. It also sits
     16px from the top rather than 24px, with a 12px inset and a 40px CTA. */
  :root {
    --nav-offset: 16px;
    --nav-inset: 12px;
  }

  .nav__brand {
    display: none;
  }

  .nav__pill {
    padding-left: var(--nav-inset);
  }

  .nav__pill .btn {
    padding-inline: 16px;
  }

  .nav__link {
    padding-inline: 12px;
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .carousel__dots {
    grid-column: 1;
    justify-self: start;
  }

  .carousel__arrows {
    grid-column: 2;
  }
}

/* Accessibility preferences — apple-design §14 ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav__pill {
    background: #f2f2f2;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card,
  .about,
  .carousel__dots {
    background: #f2f2f2;
  }
}

@media (prefers-contrast: more) {
  .nav__pill,
  .card,
  .about {
    border: 1px solid currentColor;
  }
}