/* src/_styles/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}
ul[role=list],
ol[role=list] {
  list-style: none;
}
body {
  min-height: 100vh;
  line-height: 1.5;
}
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}
img,
picture {
  max-width: 100%;
  display: block;
}
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}
textarea:not([rows]) {
  min-height: 10em;
}
:target {
  scroll-margin-block: 5ex;
}
button {
  border: none;
}

/* src/_styles/variables.css */
:root {
  --step--2: clamp(1.0417rem, 0.8475rem + 0.971vw, 1.6rem);
  --step--1: clamp(1.25rem, 0.9891rem + 1.3043vw, 2rem);
  --step-0: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);
  --step-1: clamp(1.8rem, 1.3391rem + 2.3043vw, 3.125rem);
  --step-2: clamp(2.16rem, 1.5526rem + 3.037vw, 3.9063rem);
  --step-3: clamp(2.592rem, 1.7952rem + 3.984vw, 4.8828rem);
  --step-4: clamp(3.1104rem, 2.0693rem + 5.2054vw, 6.1035rem);
  --step-5: clamp(3.7325rem, 2.377rem + 6.7772vw, 7.6294rem);
  --step-6: clamp(4.479rem, 2.7198rem + 8.7961vw, 9.5367rem);
  --step-7: clamp(5rem, 11.5vw, 12.5rem);
  --purple-50: #EAEBFF;
  --purple-100: #D9DAFF;
  --purple-200: #BABAFF;
  --purple-300: #9490FF;
  --purple-400: #7764FF;
  --purple-500: #6A41FF;
  --purple-600: #6120FF;
  --purple-700: #5815ED;
  --purple-800: #4714BF;
  --purple-900: #3B1A95;
  --purple-950: #13082D;
  --orange-50: #FFF5ED;
  --orange-100: #FFE9D5;
  --orange-200: #FED0AA;
  --orange-300: #FEAE74;
  --orange-400: #FC813B;
  --orange-500: #FA5A0D;
  --orange-600: #EB450A;
  --orange-700: #C3310A;
  --orange-800: #9B2811;
  --orange-900: #7D2411;
  --orange-950: #430F07;
  --acid-50: #F9FBEA;
  --acid-100: #F3F7C9;
  --acid-200: #E9EF99;
  --acid-300: #E3E558;
  --acid-400: #DCDA33;
  --acid-500: #CDC226;
  --acid-600: #B29C1C;
  --acid-700: #8D731C;
  --acid-800: #765C1D;
  --acid-900: #654D1E;
  --acid-950: #39290E;
  --neutral-50: #F6F8F8;
  --neutral-100: #EDF1F2;
  --neutral-200: #DCE5E8;
  --neutral-300: #C7D5D8;
  --neutral-400: #B1C0C8;
  --neutral-500: #9DACB7;
  --neutral-600: #8190A1;
  --neutral-700: #73818F;
  --neutral-800: #5F6A74;
  --neutral-900: #50595F;
  --neutral-950: #2F3437;
  --bg-main: var(--purple-950);
  --bg-alt: var(--orange-500);
  --txt-main: var(--purple-50);
  --txt-secondary: var(--purple-400);
  --txt-accent: var(--orange-500);
  --txt-accent-alt: var(--acid-300);
  --border-main: var(--purple-500);
  --container-bg: var(--orange-900);
  --gradient-light-stop: var(--orange-300);
  --gradient-dark-stop: var(--orange-400);
  --illustration-fill: black;
  --space-3xs: clamp(0.375rem, 0.288rem + 0.4348vw, 0.625rem);
  --space-2xs: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
  --space-xs: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-s: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);
  --space-m: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-l: clamp(3rem, 2.3043rem + 3.4783vw, 5rem);
  --space-xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
  --space-2xl: clamp(6rem, 4.6087rem + 6.9565vw, 10rem);
  --space-3xl: clamp(9rem, 6.913rem + 10.4348vw, 15rem);
  --space-4xl: clamp(12rem, 9.2174rem + 13.913vw, 20rem);
  --space-3xs-2xs: clamp(0.375rem, 0.0707rem + 1.5217vw, 1.25rem);
  --space-2xs-xs: clamp(0.75rem, 0.3587rem + 1.9565vw, 1.875rem);
  --space-xs-s: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
  --space-s-m: clamp(1.5rem, 0.7174rem + 3.913vw, 3.75rem);
  --space-m-l: clamp(2.25rem, 1.2935rem + 4.7826vw, 5rem);
  --space-l-xl: clamp(3rem, 1.4348rem + 7.8261vw, 7.5rem);
  --space-xl-2xl: clamp(4.5rem, 2.587rem + 9.5652vw, 10rem);
  --space-2xl-3xl: clamp(6rem, 2.8696rem + 15.6522vw, 15rem);
}

/* src/_styles/utils.css */
.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
  border: 0 !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 1px !important;
  white-space: nowrap !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(caption):not(:focus, :focus-within) {
  position: absolute !important;
}
.visually-hidden *,
.visually-hidden-focusable:not(:focus, :focus-within) * {
  overflow: hidden !important;
}
.spread-link {
  color: inherit;
  text-decoration: none;
}
.spread-link:after {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 15;
}
.u-key-value {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3xs);
}
.u-key-value p {
  margin: 0;
}
.u-flex-col {
  display: flex;
  flex-direction: column;
}

/* src/_styles/typography.css */
@font-face {
  font-family: "PPMori";
  src: url(../_assets/fonts/PPMori-Book.woff2) format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "PPMori";
  src: url(../_assets/fonts/PPMori-Regular.woff2) format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Carol";
  src: url(../_assets/fonts/carol-gothic_regular.woff2) format("woff2");
  font-weight: 400;
}
:root {
  --font-alt: "Carol", serif;
  --hero-title-spacing: -2%;
}
body {
  font-weight: 300;
}
h1 {
  font-weight: 300;
}
h2,
h3 {
  font-weight: 400;
}
h2:not([class]) {
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
  color: var(--txt-accent);
}
h2:not([class]):first-child {
  margin-top: 0;
}
p:not([class]) {
  font-size: var(--step--1);
  margin-bottom: var(--space-s);
}
a:not([class]):hover {
  text-decoration: none;
  color: var(--txt-accent-alt);
}
.hero-title {
  font-family: var(--font-alt);
  font-size: var(--step-7);
  line-height: 90%;
  color: var(--txt-accent);
  text-shadow: 0px 4px var(--bg-main);
  letter-spacing: var(--hero-title-spacing);
}
.t-page-title {
  color: var(--txt-accent);
  font-size: var(--step-4);
  line-height: 90%;
  font-weight: 300;
}
.t-page-subtitle {
  color: var(--txt-main);
  font-size: var(--step-3);
}
.t-section-title {
  font-size: var(--step-3);
  color: var(--txt-accent);
  margin-bottom: var(--space-m);
}
.t-para-highlight {
  font-size: var(--step-1);
  line-height: 130%;
}
.t-long-title {
  font-size: var(--step-1);
}
.t-small {
  font-size: var(--step--2);
}
.t-secondary {
  color: var(--txt-secondary);
}
.t-center {
  text-align: center;
}
.t-medieval > p::first-letter,
.t-medieval > a::first-letter,
.t-medieval > span::first-letter,
.t-medieval::first-letter {
  font-family: var(--font-alt);
  text-transform: uppercase;
  font-size: 1.1em;
}

/* src/_styles/layout.css */
@media screen and (min-width: 800px) {
  .l-grid-main {
    display: grid;
    grid-template-columns: calc(50vw - 680px) repeat(8, 1fr) calc(50vw - 680px);
    & > * {
      grid-column: 2 / 10;
    }
  }
  .l-thirds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-s) var(--space-xs);
  }
  .l-inner-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }
  .l-subgrid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
  .l-full {
    grid-column: 2 / 10;
  }
  .l-full--bleed {
    grid-column: -1 / 1;
  }
  .l-span-2 {
    grid-column: span 2;
  }
  .l-span-4 {
    grid-column: span 4;
  }
  .l-span-6 {
    grid-column: span 6;
  }
  .l-content-right-inset {
    grid-column: 3 / 10;
  }
  .l-subgrid-content-right > *:not(.l-content-right-inset) {
    grid-column: 4 / 10;
  }
}

/* src/_styles/nav.css */
.top-nav {
  padding-top: var(--space-s);
  font-size: var(--step--2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.top-nav > a {
  text-decoration: none;
}

/* src/_styles/footer.css */
footer {
  background-color: var(--bg-alt);
  position: relative;
  overflow: hidden;
  min-height: 15vh;
  padding: var(--space-s);
  padding-bottom: var(--space-2xl);
  margin-top: var(--space-2xl);
}
footer svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: translateY(50%);
  fill: url(#SwordGradient);
  opacity: .5;
  transition: all 300ms;
  pointer-events: none;
}
footer:target svg {
  transition-delay: 500ms;
  transform: translateY(40%) rotate(-2deg);
  opacity: 1;
}
footer a {
  color: inherit;
}
footer p {
  position: relative;
  max-width: 750px;
  z-index: 10;
}
.hero--error + footer {
  margin-top: 0;
}
@media screen and (min-width: 720px) {
  footer {
    grid-column: 1 / 11 !important;
  }
  footer:hover svg {
    transform: translateY(40%) rotate(-2deg);
    opacity: 1;
  }
}
@media screen and (min-width: 1200px) {
  footer {
    display: flex;
    justify-content: space-between;
  }
  footer p {
    margin-right: var(--space-s);
  }
}

/* src/_styles/hero.css */
.hero {
  padding: var(--space-m) 0 0 0;
}
.hero__title {
  position: relative;
  z-index: 10;
}
.hero__img {
  max-height: 500px;
  position: relative;
  overflow: visible;
}
.hero__img > img:nth-child(1) {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 500px;
  object-fit: cover;
  border: 2px solid var(--txt-accent);
  border-bottom-width: 8px;
}
.hero__img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-alt);
  mix-blend-mode: darken;
}
.hero__img > img:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  height: 120%;
  width: auto;
  z-index: 5;
  filter: url(#edge-noise-animated);
}
.hero__subtitle {
  margin-bottom: var(--space-xl);
  margin-top: var(--space-2xs);
  display: flex;
  flex-wrap: wrap;
}
.hero__subtitle {
  position: relative;
}
.hero__intro {
  max-width: 1040px;
}
.hero__paragraph {
  margin-top: var(--space-2xs);
  max-width: 1040px;
}
.hero--error {
  min-height: 500px;
}
.hero--error > svg {
  position: relative;
  bottom: -10rem;
}
@media screen and (min-width: 800px) {
  .hero {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
  .hero__img {
    max-height: 40vh;
  }
  .hero__title {
    text-align: center;
  }
  .hero__subtitle {
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .hero__subtitle:after {
    content: "";
    border: 1px solid var(--neutral-300);
    position: relative;
    width: auto;
    flex-grow: 1;
  }
  .hero__subtitle > span:last-of-type {
    order: 2;
  }
  .hero--error {
    display: block;
    position: relative;
  }
  .hero--error > h1,
  .hero--error > a {
    max-width: 640px;
  }
  .hero--error > svg {
    position: absolute;
    right: 0%;
    top: 50%;
    bottom: auto;
    transform: translateY(-40%);
    z-index: -1;
    max-height: 70vh;
  }
}

/* src/_styles/projects.css */
.projects {
  padding-top: var(--space-2xl);
  background-color: var(--bg-main);
  background-image: url(../_assets/illustrations/barbed-wire-01.png), url(../_assets/illustrations/barbed-wire-02.png);
  background-repeat: no-repeat, no-repeat;
  background-size: 250%, 250%;
  background-position: 0 0, 0 bottom;
  background-blend-mode: soft-light;
}
.project {
  position: relative;
}
.project--highlight {
  margin-bottom: var(--space-xl);
}
.project:not(.project--highlight) {
  margin-bottom: var(--space-m);
}
.project__frame {
  --bg-img-1: url(../_assets/backgrounds/bg-1.jpg);
  --bg-img-2: url(../_assets/backgrounds/bg-2.jpg);
  --bg-img-3: url(../_assets/backgrounds/bg-3.jpg);
  background-image:
    linear-gradient(
      0deg,
      rgba(19, 8, 45, 0) 40%,
      rgba(24, 21, 32, 1) 100%),
    linear-gradient(
      0deg,
      #FA5A0D88 0%,
      #FA5A0D88 100%),
    var(--current-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  border: 1px solid var(--neutral-600);
  padding: var(--space-2xs);
  padding-bottom: 0;
  margin-bottom: var(--space-2xs);
  position: relative;
  display: flex;
  justify-content: space-between;
}
.project:not(.project--highlight) > .project__frame {
  align-items: center;
  justify-content: center;
}
.project__frame:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../_assets/svg/star.svg) 0 / .5rem;
  mix-blend-mode: soft-light;
  opacity: .3;
  transition: opacity 300ms;
}
.project__frame > .star-deco {
  position: absolute;
  fill: var(--neutral-500);
  stroke: var(--bg-main);
  stroke-width: 1px;
  width: 2rem;
  height: 2rem;
  transition: fill 300ms;
}
.project__frame > .star-deco:nth-of-type(1) {
  top: -.5px;
  left: -.5px;
  transform: translate(-50%, -50%);
}
.project__frame > .star-deco:nth-of-type(2) {
  top: -.5px;
  right: -.5px;
  transform: translate(50%, -50%);
}
.project__frame > .star-deco:nth-of-type(3) {
  bottom: -.5px;
  right: -.5px;
  transform: translate(50%, 50%);
}
.project__frame > .star-deco:nth-of-type(4) {
  bottom: -.5px;
  left: -.5px;
  transform: translate(-50%, 50%);
}
.project--highlight > .project__frame,
.project__frame--gallery {
  display: flex;
  gap: var(--space-2xs);
}
.project__frame--gallery {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
.project__preview,
.project__frame > img {
  transition: opacity 600ms;
  z-index: 5;
}
.project--highlight > .project__frame > .project__preview:last-child {
  display: none;
}
.project__frame--gallery > img {
  max-width: 90%;
  scroll-snap-align: center;
}
.project__title {
  transition: color 300ms;
}
.project__title > svg {
  display: inline-block;
  transform: scale(1.2) translateY(-.1em);
  margin-left: .5rem;
  fill: currentColor;
  transition: transform 300ms;
}
@media screen and (min-width: 800px) {
  .projects {
    padding-top: var(--space-3xl);
    background-size: contain, contain;
  }
  .project:not(.project--highlight) {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-xs);
  }
  .project__frame {
    padding: var(--space-s);
    padding-bottom: 0;
  }
  .project:not(.project--highlight) > .project__frame {
    margin-bottom: 0;
  }
  .project--highlight > .project__frame,
  .project__frame--gallery {
    justify-content: space-between;
    overflow-x: visible;
  }
  .project--highlight .project__preview,
  .project__frame--gallery > img {
    width: 50%;
    min-width: 0;
  }
  .project--highlight > .project__frame > .project__preview:last-child {
    display: block;
  }
  .project:hover .star-deco {
    fill: var(--txt-accent-alt);
    filter: url(#edge-noise-animated);
  }
  .project:hover > .project__frame:after {
    opacity: 1;
  }
  .project:hover > .project__title {
    color: var(--txt-accent-alt);
  }
  .project:hover > .project__title > svg {
    transform: scale(1.2) translateY(-.1em) translateX(.1em);
  }
  .project__client {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: space-between;
    padding-bottom: var(--space-s);
  }
  .project__client__logo {
    margin: 0;
  }
  .project__client__name {
    margin-top: auto;
    margin-bottom: 0;
  }
}
.project__header {
  padding: var(--space-m) 0;
}
.project__intro {
  margin-top: var(--space-m);
}
.project__meta {
  margin-bottom: var(--space-s);
}
.project__content > .project__frame {
  background-color: var(--container-bg);
}
@media screen and (min-width: 720px) {
  .project__meta {
    margin-bottom: 0;
  }
  .project__images {
    display: flex;
    gap: var(--space-xs);
  }
  .project__content > .project__frame {
    align-items: center;
    padding: var(--space-2xs);
  }
}
.project__header {
  background-color: var(--bg-main);
  background-image: var(--illu);
  background-blend-mode: soft-light;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

/* src/_styles/banner.css */
.banner {
  font-size: var(--step--1);
  padding: var(--space-2xs);
  border: 1px solid var(--container-border);
  color: var(--container-txt);
}
.banner__title {
  font-size: var(--step--2);
  color: var(--txt-secondary);
}

/* src/_styles/logos.css */
.logos-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-s);
  list-style: none;
}
.logo {
  height: 64px;
  display: grid;
  place-items: center;
}
.logo > img {
  max-width: 128px;
}
@media screen and (min-width: 800px) {
  .logos {
    grid-column: 3 / -3;
  }
  .logos > .t-section-title {
    grid-column: 2 / 10;
  }
}

/* src/_styles/misc-links.css */
.misc-list {
  border-top: 1px solid var(--border-main);
}
.misc__item {
  list-style: none;
  border-bottom: 1px solid var(--border-main);
}
.misc__item a {
  display: block;
  padding: var(--space-xs) 0;
}
.misc__item__sublist {
  padding-left: var(--space-s);
}
@media screen and (min-width: 800px) {
  .misc__item--sublist {
    display: flex;
    justify-content: space-between;
  }
  .misc__item__sublist {
    padding-left: 0;
    display: flex;
    list-style: none;
    gap: var(--space-2xs);
  }
}

/* src/_styles/nice-websites.css */
.nice-sites {
  list-style: none;
}
.nice-site {
  position: relative;
}
.nice-site__name {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}
.nice-site__name > a {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nice-site__name > img {
  width: 40px;
  aspect-ratio: 1/1;
}
.nice-site__image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid var(--border-main);
}
.nice-site__image > img {
  width: 100%;
  aspect-ratio: 1/1;
}
.nice-site:hover > .nice-site__image {
  border: 1px solid var(--txt-accent-alt);
}
.nice-site:hover > .nice-site__name {
  color: var(--txt-accent-alt);
}
@media screen and (min-width: 800px) {
  .nice-site__name > img {
    width: 60px;
  }
}

/* src/_styles/main.css */
html {
  scroll-behavior: smooth;
  font-size: 90%;
}
body {
  background-color: var(--bg-main);
  color: var(--txt-main);
  font-family: PPMori, sans-serif;
  font-size: var(--step-0);
  padding: 0 1rem;
}
section {
  padding-bottom: var(--space-2xl);
}
@media screen and (min-width: 1400px) {
  body {
    padding: 0;
  }
}