/* archivo-vietnamese-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/_astro/archivo-vietnamese-wdth-normal.rJmnGBSt.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/_astro/archivo-latin-ext-wdth-normal.7khWdh9v.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/_astro/archivo-latin-wdth-normal.DY7AcnAa.woff2) format('woff2-variations');
  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;
}/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/jetbrains-mono-latin-400-normal.V6pRDFza.woff2) format('woff2'), url(/_astro/jetbrains-mono-latin-400-normal.6-qcROiO.woff) format('woff');
}/* jetbrains-mono-latin-700-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/jetbrains-mono-latin-700-normal.BYuf6tUa.woff2) format('woff2'), url(/_astro/jetbrains-mono-latin-700-normal.D3wTyLJW.woff) format('woff');
}/* rcummings.com — "C2 refined". Values come from the approved mockups in
   docs/design/site-mockups/rcummings.com/ (rads repository). Paper and ink,
   3 px rules, one signal colour with ink text on it, Archivo 125/900 for
   display and JetBrains Mono for everything else. No JavaScript.

   Motion: the name and bio are revealed fast; the scroll-driven reveals, the
   hover fills, and the Levo recording in figures.css. */

:root {
  --ink: #0a0a0a;
  --paper: #f2f2f0;
  --acc: #ff4d00;
  --rule: 3px solid var(--ink);
  --rule-thin: 2px solid var(--ink);
}

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
}

.page {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.5;
}

.cq {
  container: page / inline-size;
  display: flex;
  flex-direction: column;
  border-left: var(--rule);
  border-right: var(--rule);
}

.col {
  container-type: inline-size;
}

/* type */
.disp {
  font-family: 'Archivo Variable', 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
}

.lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h2.lab,
h3.lab {
  margin: 0;
  font-size: 11px;
}

h2.lab.h2s {
  font-size: 13px;
}

.lead {
  margin: 0;
  font-size: 17px;
  max-width: 46ch;
  text-wrap: pretty;
}

.small {
  font-size: 12px;
}

code {
  font-family: inherit;
  font-size: 12px;
}

/* links */
.lnk {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.lnk:hover,
.lnk:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: none;
}

.inv {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.inv:hover,
.inv:focus-visible {
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

.inv.big {
  font-weight: 700;
  font-size: 17px;
  align-self: flex-start;
  padding: 4px 0;
}

.nound {
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 18px;
  border: var(--rule);
  background: var(--acc);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-sizing: border-box;
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: none;
}

.btn.ghost {
  background: transparent;
}

.btn.ghost:hover,
.btn.ghost:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

/* buttons on an ink panel (404) */
.btn--dark {
  border-color: var(--paper);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

.btn--dark.ghost {
  color: var(--paper);
}

.btn--dark.ghost:hover,
.btn--dark.ghost:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

.rel {
  position: relative;
}

/* header */
.top {
  display: flex;
  flex-wrap: wrap;
  border-top: var(--rule);
  border-bottom: var(--rule);
}

.topcell {
  flex: 1 1 25%;
  box-sizing: border-box;
  padding: 13px 16px;
  border-right: var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topcell:last-child {
  border-right: 0;
  justify-content: flex-end;
  text-align: right;
}

a.topcell {
  text-decoration: none;
}

.mark {
  flex: 0 0 auto;
}

/* graphics */
.hazard {
  height: 20px;
  border-bottom: var(--rule);
  background: repeating-linear-gradient(-45deg, var(--ink) 0 12px, var(--acc) 12px 24px);
  background-size: 34px 34px;
}

.barcode {
  height: 28px;
  border-bottom: var(--rule);
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 3px,
    transparent 3px 5px,
    var(--ink) 5px 6px,
    transparent 6px 10px,
    var(--ink) 10px 15px,
    transparent 15px 17px,
    var(--ink) 17px 18px,
    transparent 18px 23px
  );
}

.rulercol {
  flex: 0 0 28px;
  border-right: var(--rule);
  background-image: linear-gradient(var(--ink) 0 1px, transparent 1px),
    linear-gradient(var(--ink) 0 1px, transparent 1px);
  background-size: 9px 8px, 18px 40px;
  background-repeat: repeat-y, repeat-y;
  background-position: right top, right top;
}

.ht {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--paper) 0 33%, transparent 37%);
  background-size: 9px 9px;
  -webkit-mask-image: var(--ht-mask);
  mask-image: var(--ht-mask);
}

/* the second screen sits a few degrees off the first, so the two interfere */
.moire {
  inset: -30%;
  transform: rotate(7deg);
  opacity: 0.85;
}

.wedge {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  border: var(--rule);
}

.wedge span {
  display: block;
  height: 38px;
  border-right: var(--rule-thin);
  background-size: 8px 8px;
}

.wedge span:last-child {
  border-right: 0;
}

.wedge span:nth-child(1) {
  background: var(--paper);
}

.wedge span:nth-child(2) {
  background-image: radial-gradient(circle, var(--ink) 0 0.8px, transparent 0.9px);
}

.wedge span:nth-child(3) {
  background-image: radial-gradient(circle, var(--ink) 0 1.2px, transparent 1.3px);
}

.wedge span:nth-child(4) {
  background-image: radial-gradient(circle, var(--ink) 0 1.6px, transparent 1.7px);
}

.wedge span:nth-child(5) {
  background-image: radial-gradient(circle, var(--ink) 0 2px, transparent 2.1px);
}

.wedge span:nth-child(6) {
  background-image: radial-gradient(circle, var(--ink) 0 2.4px, transparent 2.5px);
}

.wedge span:nth-child(7) {
  background-image: radial-gradient(circle, var(--ink) 0 2.9px, transparent 3px);
}

.wedge span:nth-child(8) {
  background-image: radial-gradient(circle, var(--ink) 0 3.4px, transparent 3.5px);
}

.wedge span:nth-child(9) {
  background-image: radial-gradient(circle, var(--ink) 0 4.2px, transparent 4.3px);
}

.wedge span:nth-child(10) {
  background: var(--ink);
}

.acq {
  animation: acq 1.1s cubic-bezier(0.45, 0, 0.55, 1) 0.1s both;
}

@keyframes acq {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* hero */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  border-bottom: var(--rule);
}

.hero-text {
  flex: 999 1 520px;
  min-width: 0;
  box-sizing: border-box;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
}

.hero-text--entry {
  gap: 40px;
}

.meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.h1 {
  margin: 0;
  font-size: clamp(42px, 14cqi, 220px);
  line-height: 0.8;
  letter-spacing: -0.045em;
}

.h1--entry {
  font-size: clamp(42px, 13.4cqi, 200px);
}

.lede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px 32px;
  border-top: var(--rule);
  padding-top: 18px;
}

.lede--entry {
  align-items: start;
}

.lede-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.bio {
  margin: 0;
  font-size: 17px;
  max-width: 56ch;
  text-wrap: pretty;
}

.mail {
  align-self: flex-start;
  padding: 6px 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.vlabel {
  flex: 0 0 34px;
  box-sizing: border-box;
  writing-mode: vertical-rl;
  border-left: var(--rule);
  border-right: var(--rule);
  padding: 16px 0;
  display: flex;
  align-items: center;
  margin-right: -3px;
  white-space: nowrap;
}

/* the project figure in an entry page's hero */
.hero-fig {
  flex: 1 1 400px;
  max-width: 540px;
  border-left: var(--rule);
  background: var(--ink);
}

.hero-fig .figcap {
  color: var(--paper);
  border-top: 2px solid var(--paper);
}

/* section heads */
.sechead-big {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 24px 20px;
  border-bottom: var(--rule);
}

.sechead-l {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sechead-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  max-width: 46ch;
}

.h2 {
  margin: 0;
  font-size: clamp(48px, 10cqi, 168px);
  line-height: 0.8;
  letter-spacing: -0.045em;
}

.h3 {
  margin: 0;
  font-size: clamp(34px, 7cqi, 112px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

/* interests */
.interests {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  border-bottom: var(--rule);
}

.interest {
  box-sizing: border-box;
  padding: 24px;
  border-right: var(--rule);
  margin-right: -3px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.interest-h {
  margin: 0;
  font-size: 30px;
  line-height: 1;
}

.interest ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule);
}

.interest li {
  padding: 9px 0;
  border-bottom: var(--rule-thin);
  font-size: 15px;
}

.interest li:last-child {
  border-bottom: 0;
}

/* selected work */
.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 340px), 46%);
  border-bottom: var(--rule);
}

.work-text {
  min-width: 0;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.work-fig {
  min-width: 0;
  border-left: var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* a project without a picture: text alone */
.work--text {
  grid-template-columns: minmax(0, 1fr);
}

/* the invitation to write, on every entry page */
.reach {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-bottom: var(--rule);
}

.work-fig .figcap {
  margin-top: auto;
}

.work-spec {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  border-top: var(--rule);
  font-size: 14px;
}

.work-spec > span {
  padding: 9px 0;
  border-bottom: var(--rule-thin);
}

.work-spec > .lab {
  padding: 10px 0;
}

.work-spec > span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.tag {
  display: inline-block;
  border: var(--rule-thin);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 6px 6px 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}

.tagrow .tag {
  border-color: var(--paper);
}

/* elsewhere */
.elsewhere {
  display: flex;
  flex-wrap: wrap;
  border-bottom: var(--rule);
  background: var(--ink);
  color: var(--paper);
}

.else-intro {
  flex: 1 1 280px;
  min-width: 0;
  box-sizing: border-box;
  padding: 24px;
  border-right: 3px solid var(--paper);
  margin-right: -3px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.else-links {
  flex: 2 1 400px;
  min-width: 0;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.else-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 10px 0;
  border-bottom: 2px solid var(--paper);
}

.else-link:last-child {
  border-bottom: 0;
}

.mark-h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fig-end {
  margin-top: auto;
}

/* rows (other work, on entry pages) */
.rows {
  display: flex;
  flex-direction: column;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 40px;
  gap: 20px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: var(--rule);
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(var(--acc), var(--acc)) no-repeat 0 0 / 0% 100%;
  transition: background-size 0.45s cubic-bezier(0.75, 0, 0.2, 1);
}

.row.colhead {
  padding: 10px 24px;
  background: none;
}

a.row:hover,
a.row:focus-visible {
  background-size: 100% 100%;
  outline: none;
}

.row .arrow {
  font-size: 26px;
  font-weight: 700;
  opacity: 0;
  transform: translate(-14px, 14px);
  transition:
    transform 0.3s cubic-bezier(0.75, 0, 0.2, 1),
    opacity 0.2s;
}

a.row:hover .arrow,
a.row:focus-visible .arrow {
  opacity: 1;
  transform: none;
}

.row .name {
  font-weight: 700;
  font-size: 18px;
}

/* footer */
.foot {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wedge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 14px 24px;
  border-bottom: var(--rule);
}

.wedge-row .lab {
  flex: 0 0 auto;
}

.wedge-row .wedge {
  flex: 1 1 320px;
  min-width: 0;
}

.footline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 24px;
}

.footline--rule {
  border-bottom: var(--rule);
}

.wordmark {
  font-size: 9cqi;
  line-height: 0.74;
  letter-spacing: -0.06em;
  white-space: nowrap;
  padding-top: 12px;
  margin-bottom: -0.1em;
  color: var(--acc);
  -webkit-text-stroke: 3px var(--ink);
}

/* entry page */
.sechead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: var(--rule);
}

.spec {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  border-bottom: var(--rule);
}

.spec > .k {
  padding: 18px 24px;
  border-right: var(--rule);
}

.spec > .v {
  margin: 0;
  padding: 16px 24px;
  font-size: 16px;
  max-width: 72ch;
  text-wrap: pretty;
}

.spec > .v p {
  margin: 0 0 10px;
}

.spec > .v p:last-child {
  margin-bottom: 0;
}

.spec > .v ul {
  margin: 0;
  padding-left: 1.2em;
}

/* 404 */
.nosignal {
  --ht-mask: radial-gradient(ellipse at 50% 50%, #000 0 15%, rgba(0, 0, 0, 0.5) 35%, transparent 70%);
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  box-sizing: border-box;
  border-bottom: var(--rule);
}

.noise {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(242, 242, 240, 0.14) 0 1px, transparent 1px 3px);
  animation: roll 1.1s steps(3) infinite;
}

@keyframes roll {
  to {
    background-position: 0 9px;
  }
}

.stuck {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: 14%;
  background: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.body404 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.h404 {
  margin: 0;
  font-size: clamp(120px, 32cqi, 460px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--acc);
  -webkit-text-stroke: 3px var(--paper);
}

.boxed {
  margin: 0;
  font-size: 17px;
  max-width: 46ch;
  text-wrap: pretty;
  background: var(--ink);
  padding: 10px 14px;
  border: 3px solid var(--paper);
}

/* scroll-driven, with a fallback that shows everything at once */
@keyframes wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ksp {
  from {
    clip-path: inset(50% 0 50% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@supports (animation-timeline: view()) {
  .rv {
    animation: wipe linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  .ksp {
    animation: ksp steps(12, end) both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}

/* phone: container 760 px and under */
@container page (max-width: 760px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    padding: 16px;
  }

  .row .arrow,
  .colhead,
  .vlabel,
  .rulercol {
    display: none !important;
  }

  .topcell {
    flex-basis: 50% !important;
  }

  .topcell:nth-child(2) {
    border-right: 0;
    justify-content: flex-end;
    text-align: right;
  }

  .hero-fig {
    max-width: none !important;
    border-left: 0 !important;
    border-top: var(--rule);
  }

  .interest,
  .else-intro {
    border-right: 0 !important;
    margin-right: 0 !important;
    border-bottom: var(--rule);
  }

  .else-intro {
    border-bottom-color: var(--paper);
  }

  .interest:last-child {
    border-bottom: 0;
  }

  .work {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-fig {
    border-left: 0;
    border-top: var(--rule);
  }

  .sechead-r {
    align-items: flex-start;
    text-align: left;
  }

  .spec {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec > .k {
    border-right: 0;
    padding-bottom: 0;
  }

  .spec > .v {
    padding-top: 6px;
  }
}

/* everything stops */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* Project pictures: one real screenshot or short recording per project, in an ink panel.
   A phone screen stands upright and fits the panel's height. A web page fills
   the panel's width. A recording loops muted; under reduced motion only its still shows. */

.shot {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
}

.shot-panel {
  position: relative;
  flex: 1 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* beside the hero text or the home module text, the picture fills the column and the caption sits at its foot */
.hero-fig .shot,
.work-fig .shot {
  height: 100%;
}

.shot-panel img {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--paper);
  background: var(--ink);
}

/* a phone: the panel is 4:5 and the screen stands in it, whole */
.shot--phone .shot-panel {
  aspect-ratio: 4 / 5;
}

.shot--phone .shot-panel img {
  position: absolute;
  top: 6%;
  left: 50%;
  height: 88%;
  width: auto;
  transform: translateX(-50%);
  border-radius: 18px;
}

/* a web page: the picture spans the panel */
.shot--web .shot-panel {
  padding: 6%;
  display: flex;
  align-items: center;
}

.shot--web .shot-panel img,
.shot--web .shot-panel video {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 2px solid var(--paper);
  background: var(--ink);
}

/* a recording plays; its still is the poster and the reduced-motion fallback */
.shot-still {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .shot-video {
    display: none !important;
  }

  .shot-still {
    display: block !important;
  }
}

.figcap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 2px solid var(--paper);
}

.figcap span:last-child {
  text-align: right;
}

/* on a phone-width page the panel is square and the screen is wider, so its text stays legible */
@media (max-width: 640px) {
  .shot--phone .shot-panel {
    aspect-ratio: 1 / 1;
  }

  .shot--phone .shot-panel img {
    top: 7%;
    height: auto;
    width: 66%;
  }
}

/* the recording's description, for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}