html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

h1,
.dsp,
p,
a,
span {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 100%;
  color: var(--color-accent);
}

h1,
.dsp {
  display: block;
  font-size: var(--font-large);
  font-weight: 400;
}

/* Each letter is <span class="letter"><span>x</span></span>. Both of those
   are spans, so a selector as loose as `.dsp span` hits the wrapper as well as
   the glyph — and translating the wrapper too shifts every letter right by its
   own width, which overlaps the narrow ones into their neighbours. Address the
   glyph specifically. */
.dsp .letter,
.dsp .letter > span {
  font-size: var(--font-large);
  font-weight: 400;
}

.dsp .letter > span {
  position: relative;
  display: inline-block;
}

/* The letters slide in from the right. The template put that offset in the
   stylesheet unconditionally, so with JavaScript off — or before script.js
   ran — every heading on every page sat pushed out of its own clipping box
   and the site had no visible headings at all. The offset is only applied
   once the script has taken responsibility for animating it back. */
html.js-motion .dsp .letter > span {
  transform: translateX(100%);
}

p,
a {
  font-size: var(--font-regular);
  font-weight: 500;
}

span {
  font-size: var(--font-small);
  font-weight: 500;
}

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

.container {
  width: 100%;
  height: 100%;
  padding: 2em;
}

.letter {
  display: inline-block;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

footer {
  background: var(--color-accent);
  color: var(--color-bg);
}

footer p {
  color: var(--color-bg);
}

footer.light p {
  color: var(--color-accent);
}

footer .container {
  display: flex;
  flex-direction: column;
}

.footer-row:nth-child(2) {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.footer-row:nth-child(2) p {
  font-size: var(--font-small);
}

.footer-row:nth-child(1) {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 8em;
}

.footer-col:nth-child(1) p {
  font-size: var(--font-tiny);
}

.footer-col:nth-child(2) a {
  color: var(--color-bg);
  padding: 1em 1.5em;
  border: 1px dashed var(--color-bg);
  border-radius: 100%;
}

.footer-col:nth-child(3) a,
.footer-col:nth-child(4) a {
  color: var(--color-bg);
  font-size: var(--font-small);
}

.footer-col .magnetic-area {
  margin-top: -20px;
  margin-left: -20px;
  padding: 20px;
  background-color: none;
}

.footer-col .btn {
  width: 150px;
  height: 150px;
  background-color: var(--color-accent);
  border: 1px dashed var(--color-bg);
}

.footer-col .btn p {
  font-size: var(--font-tiny);
  color: var(--color-bg);
}

footer.light {
  background: none;
  padding: 4em 0;
}

footer.light {
  color: var(--color-accent);
}

footer.light .footer-col:nth-child(2) a {
  color: var(--color-accent);
  border: 1px dashed var(--color-accent);
}

footer.light .footer-col:nth-child(3) a,
footer.light .footer-col:nth-child(4) a {
  color: var(--color-accent);
}

footer.light .footer-col .btn {
  background: none;
  border: 1px dashed var(--color-accent);
}

footer.light .footer-col .btn p {
  color: var(--color-accent);
}

.card {
  position: absolute;
  width: 300px;
  transform-origin: center center;
  z-index: 0;
}

.card-1 {
  top: 60%;
  left: 10%;
}

.card-2 {
  top: 40%;
  left: 35%;
}

.card-3 {
  top: 65%;
  left: 65%;
  z-index: 2;
}

@media (max-width: 900px) {
  .footer-row:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 4em;
  }

  .card {
    width: 200px;
  }

  .card-3 {
    left: 50%;
  }
}

/* --- additions -------------------------------------------------------- */

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

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

footer :focus-visible {
  outline-color: var(--color-bg);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100001;
  padding: 0.75em 1.25em;
  background: var(--color-accent);
  color: var(--color-bg);
  transform: translateY(-120%);
  transition: transform 0.2s;
}

.skip-link:focus {
  transform: translateY(0);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One arrow, inline, in place of the whole ionicons web-component library the
   template pulled from unpkg for this single glyph — used 40 times. */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 48;
  vertical-align: -0.125em;
}

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

  /* Never hide a heading behind an animation that will not run. */
  html.js-motion .dsp .letter > span {
    transform: none;
  }
}

/* --- chrome that changed shape ------------------------------------------ */

/* Custom elements are inline by default; these two wrap block chrome. */
site-nav,
site-footer {
  display: block;
}

/* The nav is a real list now. */
nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* The template linked five Codegrid accounts here. They are labels now, so
   the styling that hung off `a` has to name them. */
.footer-col .social-tag {
  display: inline-block;
  color: var(--color-bg);
  font-size: var(--font-regular);
  font-weight: 500;
  text-transform: uppercase;
  padding: 1em 1.5em;
  margin: 0 0.25em 0.5em 0;
  border: 1px dashed var(--color-bg);
  border-radius: 100%;
}

footer.light .footer-col .social-tag {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* The round buttons are links now — they go somewhere, which the template's
   <button href="#"> could not. An anchor does not centre its own content. */
a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}