@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  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;
}

@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  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;
}

@font-face {
  font-family: Newsreader;
  src: url('/fonts/newsreader-latin-ext-wght-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  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;
}

@font-face {
  font-family: Newsreader;
  src: url('/fonts/newsreader-latin-wght-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  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: dark;
  --background: #0d1014;
  --card: #171b20;
  --line: rgba(255, 255, 255, .13);
  --text: #f5f2f1;
  --muted: #a6a6ae;
  --accent: #e6a2c8;
}

* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }

body {
  margin: 0;
  min-width: 320px;
  height: 100dvh;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
  font-family: Manrope, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.site-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4.2vw, 72px);
}

.site-shell::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 78%;
  height: 390px;
  background: radial-gradient(ellipse at top, rgba(111, 62, 104, .22), transparent 70%);
  content: '';
  pointer-events: none;
}

.site-header {
  flex: 0 0 72px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.brand {
  text-decoration: none;
  font-size: clamp(30px, 3vw, 39px);
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: 1;
}

.brand span { color: var(--accent); }

.header-note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #c0bbc5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .23em;
  white-space: nowrap;
}

.header-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(230, 162, 200, .65);
}

main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  flex: 0 0 auto;
  padding: 27px 0 29px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .27em;
}

.eyebrow-line { width: 28px; height: 1px; background: currentColor; }

h1 {
  margin: 0;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -.077em;
  line-height: .98;
  white-space: nowrap;
}

h1 em {
  color: var(--accent);
  font-family: Newsreader, Georgia, serif;
  font-size: 1.13em;
  font-weight: 400;
  letter-spacing: -.065em;
  white-space: nowrap;
}

.intro-copy {
  max-width: 310px;
  margin: 0 4px 2px 0;
  color: #b0afb8;
  font-size: 13px;
  line-height: 1.65;
}

.projects {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 24px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  margin-bottom: 13px;
  color: #b4b2bb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
}

.section-heading h2 { margin: 0; font: inherit; }
.section-heading span { color: #747680; letter-spacing: .15em; }

.project-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 68px) / 5);
  grid-template-rows: minmax(0, 1fr);
  gap: 17px;
  padding-top: 12px;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.project-grid::-webkit-scrollbar { display: none; }

.project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--card);
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .13);
  scroll-snap-align: start;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

a.project-card:hover,
a.project-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(230, 162, 200, .63);
  box-shadow: 0 24px 44px rgba(0, 0, 0, .28), 0 0 0 1px rgba(230, 162, 200, .12);
}

a.project-card:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.project-card--soon { border-color: rgba(243, 155, 102, .38); }

.card-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #26232e;
}

.card-art::after {
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(9, 11, 15, .2));
  content: '';
  pointer-events: none;
}

.card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

a.project-card:hover .card-art img,
a.project-card:focus-visible .card-art img { transform: scale(1.055); }

.card-art--fidesz img { object-position: 36% center; }
.card-art--gta img { object-position: 43% center; }
.card-art--rim img { object-position: 47% center; }

.soon-badge {
  position: absolute;
  z-index: 1;
  top: 15px;
  right: 15px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px 10px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: rgba(13, 16, 20, .84);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  backdrop-filter: blur(9px);
}

.badge-spark { color: #ffad6b; font-size: 15px; line-height: 0; }

.art-arrow {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(15, 16, 22, .4);
  color: #fff;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  backdrop-filter: blur(8px);
  transition: background .3s ease, color .3s ease;
}

a.project-card:hover .art-arrow,
a.project-card:focus-visible .art-arrow { background: #fff; color: #16171a; }

.image-wordmark {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.image-wordmark--dubz {
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(27px, 3.1vw, 49px);
  font-weight: 800;
  letter-spacing: -.08em;
  text-shadow: -3px 3px 0 #e677ba, 3px -3px 0 #58b1f9, 0 5px 18px #070817;
  white-space: nowrap;
}

.image-wordmark--gta {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  color: rgba(255, 245, 249, .65);
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(126px, 15vw, 230px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.08em;
  padding-right: .08em;
  line-height: 1;
  text-shadow: 0 8px 20px rgba(38, 10, 45, .3);
}

.image-wordmark--rim {
  top: 33%;
  left: 49%;
  transform: translate(-50%, -50%) rotate(-8deg);
  color: #302323;
  font-size: clamp(29px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -.085em;
  white-space: nowrap;
}

.image-wordmark--rim span { color: #a63345; }

.card-content {
  display: flex;
  flex: 0 0 238px;
  flex-direction: column;
  min-height: 0;
  padding: 17px 16px 16px;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  color: #999aa3;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
}

.project-icon {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .25);
}

.card-content h3 {
  margin: 11px 0 0;
  font-size: clamp(20px, 1.55vw, 25px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1.15;
}

.card-description {
  margin: 8px 0 9px;
  color: #bdbdc4;
  font-size: 12px;
  line-height: 1.5;
}

.card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #e7c0d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
}

.card-action span { font-size: 19px; font-weight: 400; line-height: .6; }
.card-action--muted { color: #d4a478; }
.fable-version { color: #ffd4ac; text-decoration: none; }
.fable-version:hover { color: #fff; }
.fable-version:focus-visible { outline: 2px solid #ffd4ac; outline-offset: 3px; }
.fable-caption { display: block; margin-top: 5px; color: #aeb3bd; font-size: 10px; }
.card-action--muted span { opacity: .55; }

.projects { padding-bottom: 8px; }
  .card-art img[src="/images/kozter.jpg"] { object-position: center top; }
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carousel-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 42px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #766071;
  border-radius: 10px;
  background: #30242e;
  color: #f5e6f0;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0;
  cursor: pointer;
}
.carousel-controls button span { color: inherit; letter-spacing: inherit; }
.carousel-controls #next-project { background: #e6a2c8; color: #20171e; border-color: #e6a2c8; }
.carousel-controls button:hover:not(:disabled) { filter: brightness(1.15); }
.carousel-controls button:disabled { opacity: .35; cursor: default; }
.carousel-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#carousel-status { min-width: 43px; text-align: center; color: #c9c4cf; font-size: 10px; letter-spacing: .1em; }
@media (max-width: 590px) {
  .section-heading { gap: 8px; letter-spacing: .12em; font-size: 9px; }
  .carousel-controls { gap: 6px; }
  .carousel-controls button { min-width: 34px; padding: 0 9px; font-size: 10px; }
  .carousel-controls .previous-label { display: none; }
  #carousel-status { min-width: 36px; font-size: 9px; }
}
@media (max-width: 1300px) {
  .project-grid { grid-auto-columns: calc((100% - 17px) / 2); }
  .card-content { flex-basis: 214px; }
  .image-wordmark--dubz { font-size: clamp(42px, 6vw, 70px); }
  .image-wordmark--rim { font-size: clamp(43px, 5.4vw, 65px); }
  .image-wordmark--gta { font-size: clamp(160px, 24vw, 260px); }
}

@media (max-width: 720px) {
  .site-header { flex-basis: 64px; min-height: 64px; }
  .header-note { font-size: 8px; letter-spacing: .13em; }
  .intro { padding: 20px 0 22px; }
  h1 { white-space: normal; font-size: clamp(44px, 8.5vw, 60px); }
  .intro-copy { display: none; }
  .project-grid { gap: 15px; }
}

@media (max-width: 590px) {
  .site-shell { padding: 0 20px; }
  .header-note { display: none; }
  .intro { padding: 21px 0 23px; }
  .eyebrow { margin-bottom: 8px; }
  h1 { font-size: clamp(46px, 12vw, 60px); line-height: .94; }
  h1 em { display: block; }
  .section-heading { margin-bottom: 9px; }
  .project-grid { grid-auto-columns: 100%; }
  .card-content { flex-basis: 204px; }
  .card-content h3 { font-size: 25px; }
  .image-wordmark--dubz { font-size: clamp(48px, 13vw, 72px); }
  .image-wordmark--rim { font-size: clamp(47px, 11vw, 68px); }
  .image-wordmark--gta { font-size: clamp(160px, 52vw, 260px); }
}

@media (max-height: 680px) {
  .site-header { flex-basis: 58px; min-height: 58px; }
  .intro { padding-top: 14px; padding-bottom: 15px; }
  .projects { padding-bottom: 4px; }
  .card-content { flex-basis: 188px; padding-top: 12px; padding-bottom: 12px; }
  .card-meta, .project-icon { min-height: 34px; width: 34px; height: 34px; }
  .card-content h3 { margin-top: 7px; }
  .card-description { margin-top: 5px; font-size: 11px; }
  .card-action { padding-top: 8px; }
}

@media (max-width: 360px) {
  .intro { padding: 12px 0 14px; }
  .eyebrow { display: none; }
  h1 { font-size: 41px; }
  .section-heading { margin-bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

.vityabonk-version { color: var(--accent); text-decoration: none; }
.vityabonk-version:hover { color: #fff; }
.vityabonk-version:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vityabonk-version + .fable-version { margin-top: 10px; }
.card-art--mesterlovesz img { object-position: center 20%; }