/* ============================================================
   AKHIL, minimal v2 (2026-10-17)
   ------------------------------------------------------------
   "keep our portfolio web minimal asf" (10-15), then "more minimal
   and much better" (10-17). Same brand, most of it taken away: void
   ground, warm ink, Clash for headings, General Sans for the rest.
   v2 puts back one thing v1 cut, the halftone ember on the first
   screen (ember.js), and takes the colour off the button so ember
   is spent on two things only: the word "wrong" and that field.
   styles.css and field.js stay in the repo for the old site.
   ============================================================ */

:root {
  color-scheme: dark;
  --void: #0a0a0b;
  --text: #eae6df;
  --soft: #b9b2a9;
  --muted: #8b847b;
  --line: rgb(234 230 223 / 0.12);
  --ember: #ff6a2c;
  --ember-hover: #ff8a4c;
  --accent-text: #ff6a2c;
  /* the button is ink, not ember: on a page that already has an ember
     word and an ember field, a third orange mass is the one too many */
  --btn: #eae6df;
  --btn-hover: #fbf6ee;
  --btn-ink: #0a0a0b;
  /* the sky (10-21): the mountains, the cursor, the selection and the
     arrow you point at. ember stays on "wrong", the dot and the sun */
  --sky: #8fd3ff;
  --sky-rgb: 143 211 255;

  --display: "Clash Display", system-ui, sans-serif;
  --sans: "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 36rem;
}
:root[data-theme="light"] {
  color-scheme: light;
  --void: #f2eee6;
  --text: #16120f;
  --soft: #4a423a;
  --muted: #6b625a;
  --line: rgb(22 18 15 / 0.12);
  --ember: #e8551f;
  --ember-hover: #ff7a3d;
  --accent-text: #b8400f;
  --btn: #16120f;
  --btn-hover: #2e2620;
  --btn-ink: #f2eee6;
  --sky: #2f8fd0;
  --sky-rgb: 47 143 208;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: rgb(var(--sky-rgb) / 0.32);
}

/* ── the cursor ────────────────────────────────────────────── */
/* a sky dart, drawn by the system from an image, so it can never
   go missing: no image, and the browser falls back to its own arrow.
   cursor.js adds the ring that trails it; it never hides this. */
html {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 4.6 25.6 13.3c1.1.5 1 2-.1 2.3l-8.1 2.1-3.4 7.8c-.5 1.1-2 1-2.3-.2Z' fill='%238FD3FF' stroke='%230A0A0B' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 5, auto;
}
a,
button,
summary,
label,
[role="button"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 4.6 25.6 13.3c1.1.5 1 2-.1 2.3l-8.1 2.1-3.4 7.8c-.5 1.1-2 1-2.3-.2Z' fill='%23D6EFFF' stroke='%230A0A0B' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 5, pointer;
}
.ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 30px;
  height: 30px;
  border: 1.5px solid rgb(var(--sky-rgb) / 0.5);
  border-radius: 99px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.ring.is-on {
  opacity: 1;
}
.ring.is-hot {
  background: rgb(var(--sky-rgb) / 0.1);
  border-color: rgb(var(--sky-rgb) / 0.85);
}
.ring.is-held {
  border-color: rgb(var(--sky-rgb) / 0.95);
}
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  background: var(--text);
  color: var(--void);
  padding: 0.4rem 0.8rem;
}

/* ── shell ─────────────────────────────────────────────────── */
.top,
main {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.top {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.75rem);
  padding-block: 1.6rem;
}
.top,
main {
  position: relative;
  z-index: 1;
}
main {
  flex: 1;
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

.mark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.018em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.13em;
  /* everything sits on the left: wordmark, pages, theme */
  margin-right: clamp(0.6rem, 2vw, 1.5rem);
}
.mark i {
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--ember);
  display: block;
}

.links {
  display: flex;
  gap: clamp(0.85rem, 2.4vw, 1.75rem);
  font-size: 0.9rem;
  color: var(--muted);
}
.links a {
  position: relative;
  transition: color 0.2s;
}
.links a:hover,
.links a[aria-current] {
  color: var(--text);
}
/* the page you're on gets the wordmark's dot. Absolutely placed, so
   the nav never shifts between pages */
.links a[aria-current]::after {
  content: "";
  position: absolute;
  right: -0.42em;
  bottom: 0.34em;
  width: 0.24em;
  height: 0.24em;
  border-radius: 50%;
  background: var(--ember);
}

.theme {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--muted);
  transition: color 0.2s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.theme:hover {
  color: var(--text);
}
.theme svg {
  width: 1rem;
  height: 1rem;
  grid-area: 1 / 1;
}
.theme__moon,
:root[data-theme="light"] .theme__sun {
  display: none;
}
:root[data-theme="light"] .theme__moon {
  display: block;
}

/* ── type ──────────────────────────────────────────────────── */
h1 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
  word-spacing: 0.06em;
  line-height: 1.04;
  text-wrap: balance;
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.9rem);
  margin-top: clamp(4rem, 14vh, 9rem);
  max-width: 18ch;
}
p,
li,
dd {
  text-wrap: pretty;
}
h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--ember);
}
.note {
  margin-top: 1.4rem;
  max-width: var(--measure);
  color: var(--soft);
  font-size: 1.12rem;
}
.prose {
  margin-top: 2.2rem;
  max-width: var(--measure);
  color: var(--soft);
}
.prose p + p {
  margin-top: 1.1em;
}
.prose strong,
.prose b {
  color: var(--text);
  font-weight: 500;
}
.prose a,
.inline {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s;
}
.prose a:hover,
.inline:hover {
  text-decoration-color: var(--ember);
}

/* ── home ──────────────────────────────────────────────────── */
/* the first screen is one composition: the line, the answer, the
   button, and the proof on the floor. the ember sits behind it,
   full-bleed, and stops at the fold. */
.stage {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
}
/* the mountains (mountains.js): the sky is the page colour at the top
   and the nearest ridge is the page colour at the bottom, so the
   scene needs no mask to sit in the page */
.scene {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.scene.is-lit {
  opacity: 1;
}
.ember {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ember.is-lit {
  opacity: 1;
}
.home {
  padding-bottom: clamp(3rem, 8vh, 5rem);
}
.hero {
  margin: 0;
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  display: flex;
  flex-direction: column;
}
.hero__body {
  margin-block: auto;
  padding-block: clamp(2.5rem, 8vh, 5rem) clamp(2rem, 6vh, 4rem);
}
.hero h1 {
  margin-top: 0;
  font-size: clamp(2.3rem, 1.15rem + 4.4vw, 4.6rem);
  max-width: none;
  text-wrap: initial;
}
.hero h1 span {
  display: block;
}
/* too narrow for the three set lines: let it wrap on its own so
   "be" never sits alone on a line */
@media (max-width: 420px) {
  .hero h1 span {
    display: inline;
  }
}
.hero .note {
  margin-top: 1.6rem;
  max-width: 36rem;
}
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.4rem;
  padding-block: 1.4rem 1.8rem;
  border-top: 1px solid var(--line);
  max-width: 30rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.proof b {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-right: 0.3em;
}

/* the page arrives once, top to bottom, and then holds still */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.9rem);
  }
}
.hero h1 span,
.hero .note,
.hero .cta,
.hero .fine,
.hero .proof {
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero h1 span:nth-child(2) {
  animation-delay: 0.07s;
}
.hero h1 span:nth-child(3) {
  animation-delay: 0.14s;
}
.hero .note {
  animation-delay: 0.24s;
}
.hero .cta {
  animation-delay: 0.32s;
}
.hero .fine {
  animation-delay: 0.38s;
}
.hero .proof {
  animation-delay: 0.5s;
}

/* ── the one button ────────────────────────────────────────── */
.cta {
  margin-top: 2.2rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.82rem 1.35rem;
  border-radius: 99px;
  background: var(--btn);
  color: var(--btn-ink);
  font-weight: 500;
  font-size: 0.94rem;
  transition: background 0.25s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btn:hover {
  background: var(--btn-hover);
}
.btn svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s;
}
.btn:hover svg {
  transform: translateX(3px);
}
.fine {
  margin-top: 0.9rem;
  font-size: 0.84rem;
  color: var(--muted);
}

/* ── sections + rows ───────────────────────────────────────── */
section {
  margin-top: clamp(3.5rem, 9vh, 5.5rem);
}
h2 {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.facts {
  list-style: none;
  max-width: 40rem;
  display: grid;
  gap: 1rem;
  color: var(--soft);
  font-size: 1.12rem;
}
.facts b {
  color: var(--text);
  font-weight: 500;
}
.rows {
  list-style: none;
  max-width: 44rem;
  font-size: 1rem;
}
.rows li + li {
  border-top: 1px solid var(--line);
}
.row {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: 0.25rem 1.5rem;
  padding-block: 0.85rem;
  align-items: baseline;
}
.row__t {
  color: var(--text);
  font-weight: 500;
}
.row__d {
  color: var(--muted);
}
.row__go {
  color: var(--muted);
  font-style: normal;
  transition: color 0.2s, transform 0.2s;
}
a.row:hover .row__go {
  color: var(--sky);
  transform: translate(2px, -2px);
}
a.row:hover .row__t {
  color: var(--text);
}
/* writing: the title takes the room, the date sits right */
.rows--dated .row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.rows--dated .row__d {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
/* writing: date and kind on the left, title and its one line right */
.rows--posts .row {
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  grid-template-areas:
    "d t go"
    "k x go";
  gap: 0.2rem 1.5rem;
  padding-block: 1.05rem;
}
.rows--posts .row__d {
  grid-area: d;
  font-variant-numeric: tabular-nums;
}
.rows--posts .row__k {
  grid-area: k;
  color: var(--muted);
  font-size: 0.86rem;
  opacity: 0.75;
}
.rows--posts .row__t {
  grid-area: t;
}
.rows--posts .row__x {
  grid-area: x;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 34rem;
}
.rows--posts .row__go {
  grid-area: go;
}
/* point at one row and the rest of its list steps back */
a.row {
  transition: opacity 0.25s;
}
@media (hover: hover) {
  .rows:has(a.row:hover) a.row:not(:hover) {
    opacity: 0.42;
  }
}

/* about: the photo is a 2:3 studio portrait, so it gets a 4:5 frame
   anchored on the face instead of a circle that cuts the head off */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: clamp(3rem, 10vh, 6rem);
}
.about h1 {
  margin-top: 0;
}
.portrait {
  width: min(15rem, 62vw);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 14px;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.6s ease;
}
.portrait:hover {
  filter: none;
}
@media (min-width: 900px) {
  .about {
    grid-template-columns: 1fr 17rem;
    gap: 4rem;
    align-items: start;
  }
  .portrait {
    order: 2;
    width: 100%;
  }
}

/* home, under the first screen: the whole site as one index. Label
   in the left column, the list in the right, small type throughout,
   so a buyer who never clicks a nav link still sees all of it */
.index {
  margin-top: clamp(4rem, 12vh, 7rem);
  display: grid;
  gap: clamp(3rem, 8vh, 4.5rem);
  max-width: 52rem;
}
.ix {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.ix h2 {
  margin: 0;
  padding-top: 0.85rem;
}
.ix .rows {
  max-width: none;
}
.ix .spec {
  padding-top: 0;
}
/* the stack reads like the lists around it: same columns, same rules */
.spec {
  max-width: 44rem;
  display: grid;
}
.spec div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.25rem 1.5rem;
  padding-block: 0.85rem;
}
.spec div + div {
  border-top: 1px solid var(--line);
}
.spec dt {
  color: var(--text);
  font-weight: 500;
}
.spec dd {
  color: var(--muted);
}

/* work: the receipts read as numbers first, the sentence under each */
.nums {
  list-style: none;
  max-width: 50rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 3rem;
}
.nums li {
  display: grid;
  gap: 0.55rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.nums b {
  word-spacing: 0.04em;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.nums span {
  color: var(--soft);
  font-size: 0.98rem;
  max-width: 21rem;
}

/* 404: the line, the way back, and the light */
.lost h1 {
  margin-top: clamp(6rem, 24vh, 14rem);
}
.lost__go {
  margin-top: 2rem;
}

/* values */
.back {
  display: inline-block;
  margin-top: clamp(2.5rem, 8vh, 5rem);
  font-size: 0.9rem;
  color: var(--muted);
}
.back:hover {
  color: var(--text);
}
.back + h1 {
  margin-top: 1rem;
}
.values {
  list-style: none;
  counter-reset: v;
  max-width: 40rem;
  margin-top: 2.6rem;
  display: grid;
  gap: 1.15rem;
}
.values li {
  counter-increment: v;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  color: var(--soft);
}
.values li {
  scroll-margin-top: 30vh;
  transition: color 0.4s;
}
/* arriving from About's "rule six" lights that rule */
.values li:target {
  color: var(--text);
}
.values li:target::before {
  color: var(--ember);
}
.values li::before {
  content: counter(v, decimal-leading-zero);
  color: var(--muted);
  font-size: 0.86rem;
  padding-top: 0.2em;
  font-variant-numeric: tabular-nums;
}

/* ── writing ───────────────────────────────────────────────── */
.article-shell > * {
  max-width: 42rem;
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: clamp(2.5rem, 8vh, 5rem);
  font-size: 0.9rem;
  color: var(--muted);
}
.article-back:hover {
  color: var(--text);
}
.article-kicker {
  margin-top: 2rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.article-title {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
  word-spacing: 0.06em;
  text-wrap: balance;
  line-height: 1.06;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem);
  margin-top: 0.6rem;
}
.article-title em {
  font-style: normal;
}
.article-dek {
  margin-top: 1.1rem;
  color: var(--soft);
  font-size: 1.15rem;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.article-byline b {
  font-weight: 500;
  color: var(--soft);
}
.article-body {
  margin-top: 3rem;
  color: var(--soft);
  font-size: 1.1rem;
  line-height: 1.72;
}
.article-body > * + * {
  margin-top: 1.25em;
}
.article-body .lead {
  color: var(--text);
  font-size: 1.22rem;
}
.article-body h2 {
  margin: 2.6rem 0 0;
  word-spacing: 0.06em;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.article-body h3 {
  margin: 2rem 0 0;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--text);
}
.article-body strong {
  color: var(--text);
  font-weight: 500;
}
.article-body a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
}
.article-body a:hover {
  text-decoration-color: var(--ember);
}
.article-body ul,
.article-body ol {
  padding-left: 1.2rem;
}
.article-body li + li {
  margin-top: 0.6em;
}
.article-body blockquote {
  padding-left: 1.2rem;
  border-left: 2px solid var(--ember);
  color: var(--text);
  font-size: 1.2rem;
}
.pull {
  padding-block: 0.4rem;
}
.pull__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.pull__label {
  color: var(--muted);
  font-size: 1rem;
}
.article-end {
  display: none;
}
/* the end of every article: one invitation, the same ink button as the
   hero, so a reader who got this far has somewhere to go */
.article-cta {
  margin-top: 4.5rem;
}
.article-cta p {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2rem);
  letter-spacing: -0.018em;
  word-spacing: 0.06em;
  line-height: 1.15;
  text-wrap: balance;
  max-width: 22ch;
}
.article-cta .btn {
  margin-top: 1.4rem;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.post-nav__item--next {
  text-align: right;
}
.post-nav__dir {
  font-size: 0.86rem;
  color: var(--muted);
}
.post-nav__t {
  margin-top: 0.2rem;
  font-weight: 500;
}
.post-nav__item:hover .post-nav__t {
  color: var(--ember);
}

/* ── between pages ───────────────────────────────────────── */
@view-transition {
  navigation: auto;
}
.top {
  view-transition-name: top;
}
::view-transition-old(root) {
  animation: vt-out 0.16s ease both;
}
::view-transition-new(root) {
  animation: vt-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes vt-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ── the rail ──────────────────────────────────────────────── */
/* on a wide screen the header leaves the top and pins to the left
   edge: wordmark, the pages stacked under it, the theme at the foot.
   Below 900px it goes back to the top bar. */
@media (min-width: 900px) {
  body {
    padding-left: 11rem;
  }
  .top {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    width: 11rem;
    max-width: none;
    margin: 0;
    padding: 2.4rem 0 2.4rem 2.4rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .mark {
    margin: 0 0 2.6rem;
  }
  .links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }
  .theme {
    margin-top: auto;
    margin-left: -0.35rem;
  }
}

/* ── phone ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .links {
    font-size: 0.86rem;
  }
  .row {
    grid-template-columns: 1fr auto;
  }
  .row__d {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .spec div {
    grid-template-columns: 1fr;
  }
  .ix {
    grid-template-columns: 1fr;
  }
  .ix h2 {
    padding-top: 0;
  }
  .rows--dated .row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rows--posts .row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "d go"
      "t t"
      "x x";
  }
  .rows--posts .row__k {
    display: none;
  }
  .rows--posts .row__d {
    font-size: 0.84rem;
  }
  .rows--posts .row__t {
    margin-top: 0.15rem;
  }
  .links a[aria-current]::after {
    right: -0.36em;
  }
  .nums {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .post-nav {
    grid-template-columns: 1fr;
  }
  .post-nav__item--next {
    text-align: left;
  }
}
@media (max-width: 380px) {
  .links {
    gap: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}