/* ============================================================
   Design tokens
   ============================================================ */
:root {
   /* Brand / accent */
   --accent: #8b5cf6;
   --accent-rgb: 139, 92, 246;

   /* Core palette */
   --ink: #15120d;
   --ink-rgb: 21, 18, 13;
   --cream: #f4f1ea;
   --cream-rgb: 244, 241, 234;
   --white: #fff;
   --black: #000;

   /* Text */
   --text-body: #4a4438;
   --text-muted: #8a8478;
   --text-muted-dark: #9a937f;
   --text-footer-link: #c9c2ad;

   /* Borders (alpha-driven, see rgba() usages) */
   --border-ink: rgba(var(--ink-rgb), .12);
   --border-ink-strong: rgba(var(--ink-rgb), .15);
   --border-ink-soft: rgba(var(--ink-rgb), .13);
   --border-hero: rgba(var(--ink-rgb), .14);
   --border-tag: rgba(var(--ink-rgb), .16);
   --border-on-dark: rgba(var(--cream-rgb), .3);

   /* Typography */
   --font-display: 'Archivo', sans-serif;
   --font-body: 'Instrument Sans', system-ui, sans-serif;

   /* Motion */
   --transition: .25s ease;
   --transition-slow: .3s ease;

   /* Shape / layout */
   --radius-pill: 999px;
   --content-max: 1340px;
   --content-pad: clamp(18px, 4vw, 56px);
}

/* ============================================================
   Base
   ============================================================ */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   font-family: var(--font-body);
   background: var(--cream);
   color: var(--ink);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

::selection {
   background: rgba(var(--accent-rgb), .22);
}

a {
   color: inherit;
   text-decoration: none;
}

.page {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

/* ============================================================
   Pills / buttons
   ============================================================ */
.pill {
   border-radius: var(--radius-pill);
   font-weight: 600;
}

.pill--ghost-dark {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: .86rem;
   color: var(--ink);
   background: var(--white);
   border: 1.5px solid var(--border-ink-strong);
   padding: 11px 18px;
   transition: transform var(--transition);
}

.pill--ghost-dark:hover {
   transform: translateY(-1px);
}

.pill--solid {
   white-space: nowrap;
   font-size: .86rem;
   color: var(--cream);
   background: var(--ink);
   padding: 12px 22px;
   transition: transform var(--transition), background var(--transition);
}

.pill--solid:hover {
   transform: translateY(-1px);
   background: var(--black);
}

.pill--solid-lg {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-size: .95rem;
   color: var(--cream);
   background: var(--ink);
   padding: 15px 28px;
   margin-top: 22px;
   transition: transform var(--transition), background var(--transition);
}

.pill--solid-lg:hover {
   transform: translateY(-2px);
   background: var(--black);
}

.pill--footer-solid {
   font-size: .92rem;
   color: var(--ink);
   background: var(--cream);
   padding: 13px 24px;
   transition: transform var(--transition);
}

.pill--footer-solid:hover {
   transform: translateY(-2px);
}

.pill--footer-ghost {
   font-size: .92rem;
   color: var(--cream);
   border: 1.5px solid var(--border-on-dark);
   padding: 12px 22px;
   transition: border-color var(--transition);
}

.pill--footer-ghost:hover {
   border-color: var(--cream);
}

/* ============================================================
   Eyebrow / section labels
   ============================================================ */
.eyebrow {
   font-size: .82rem;
   font-weight: 600;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.eyebrow--strong {
   font-weight: 700;
}

.eyebrow--block {
   margin-bottom: 20px;
}

.eyebrow--on-dark {
   color: var(--text-muted-dark);
}

/* ============================================================
   Nav
   ============================================================ */
.nav {
   position: sticky;
   top: 0;
   z-index: 50;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px clamp(12px, 4vw, 56px);
   background: rgba(var(--cream-rgb), .7);
   backdrop-filter: blur(12px) saturate(160%);
   -webkit-backdrop-filter: blur(12px) saturate(160%);
   border-bottom: 1px solid var(--border-ink);
   box-shadow: var(--border-ink),
}

.nav-menu {
   display: flex;
   flex-direction: column;
   gap: 5px;
   width: 30px;
   cursor: pointer;
}

.nav-menu-bar {
   height: 2.5px;
   width: 100%;
   background: var(--ink);
   border-radius: 2px;
}

.nav-menu-bar--short {
   width: 70%;
}

.nav-brand {
   display: flex;
   align-items: center;
   gap: 9px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.nav-brand-dot {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: conic-gradient(from 30deg, var(--accent), #ec88c8, #5ec8c0, var(--accent));
}

.nav-brand-name {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.3rem;
   letter-spacing: -.02em;
}

.nav-pills {
   display: flex;
   align-items: center;
   gap: 10px;
}

.nav-pill-arrow {
   font-size: .8rem;
}

.card-link-arrow {
   font-size: 1rem;
   font-family: var(--font-body);
}

/* ============================================================
   Layout
   ============================================================ */
.main {
   flex: 1;
   max-width: var(--content-max);
   width: 100%;
   margin: 0 auto;
   padding: 0 var(--content-pad);
}

/* ---- Hero ---- */
.hero {
   /*border-top: 1px solid var(--border-hero);*/
}

.hero-inner {
   position: relative;
}

.projects-grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 32px;
   row-gap: 48px;
   align-items: start;
}

/* ---- Project card ---- */
.project {
   position: relative;
}

.project::before,
.project::after {
   content: "";
   position: absolute;
   top: 0;
   height: max(720px, 100%);
   width: 1px;
   background: linear-gradient(
      to bottom,
      rgba(var(--ink-rgb), .3),
      transparent
   );
   pointer-events: none;
}

.project::before {
   left: 0;
}

.project::after {
   right: 0;
}

.project--appkit {
   --card-color: #5b4bd6;
   --card-ratio: 7/6;
}

.project--runic {
   --card-color: #1f6f6b;
   --card-ratio: 11/12;
}

.project--tiberio {
   --card-color: #c2702b;
   --card-ratio: 7/5;
}

.project--home {
   --card-color: #2f5fb0;
   --card-ratio: 3/4;
}

.card {
   display: block;
   position: relative;
   overflow: hidden;
   aspect-ratio: var(--card-ratio);
   background: var(--card-color);
   color: var(--white);
   padding: 18px;
   transition: transform var(--transition-slow);
   margin-top: 1.5rem;
}

.card:hover {
   transform: translateY(-4px);
}

.card-tag {
   font-size: .72rem;
   font-weight: 600;
   letter-spacing: .2em;
   text-transform: uppercase;
   opacity: .85;
}

.card-ghost {
   position: absolute;
   right: -10px;
   bottom: -46px;
   font-family: var(--font-display);
   font-weight: 900;
   font-size: 13rem;
   line-height: 1;
   opacity: .13;
}

.card-title {
   position: absolute;
   left: 18px;
   bottom: 16px;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.9rem;
   letter-spacing: -.02em;
}

.card-title--sm {
   font-size: 1.7rem;
   line-height: 1;
}

.card-stat {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.2rem;
   letter-spacing: -.01em;
   margin-top: 18px;
   padding: 0 12px 3px 12px;
}

.card-stat-sub {
   font-family: var(--font-body);
   font-weight: 500;
   font-size: .92rem;
   color: var(--text-muted);
}

.card-meta {
   display: flex;
   align-items: center;
   gap: 9px;
   margin-top: 12px;
   border-top: 1px solid var(--border-ink);
   padding: 12px 12px;
}

.card-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--card-color);
}

.card-meta-label {
   font-weight: 600;
   font-size: .92rem;
}

.card-desc {
   font-size: .95rem;
   line-height: 1.55;
   color: var(--text-body);
   margin-top: 6px;
   text-wrap: pretty;
   padding: 0 12px;
}

/* ---- Name row ---- */
.namerow {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: clamp(32px, 5vw, 72px);
   margin-top: clamp(28px, 5vw, 75px);
   padding-bottom: clamp(8px, 2vw, 28px);
}

.name {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: clamp(2.6rem, 8.4vw, 7.5rem);
   line-height: .86;
   letter-spacing: -.045em;
   text-transform: uppercase;
   color: var(--ink);
   min-width: 0;
   overflow-wrap: anywhere;
}

.hero-bio {
   max-width: 27ch;
   flex-shrink: 0;
}

.hero-bio-text {
   font-size: clamp(1rem, 1.5vw, 1.18rem);
   line-height: 1.55;
   color: var(--text-body);
   text-wrap: pretty;
}

.bio-link {
   color: #2f5fb0;
   font-weight: 600;
   text-decoration: none;
   text-underline-offset: 3px;
   text-decoration-thickness: 2px;
   transition: color var(--transition);
}

.bio-link:hover {
   color: var(--ink);
}

/* ---- Who I am ---- */
.who {
   padding: clamp(28px, 5vw, 60px) 0;
   border-top: 1px solid var(--border-hero);
   margin-top: clamp(20px, 4vw, 40px);
}

.who-grid {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: clamp(28px, 5vw, 80px);
   align-items: start;
}

.who-accent {
   width: 48px;
   height: 3px;
   background: var(--accent);
   margin-top: 16px;
}

.who-lead {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(1.4rem, 2.8vw, 2.2rem);
   line-height: 1.25;
   letter-spacing: -.018em;
   color: var(--ink);
   text-wrap: pretty;
}

.who-body {
   font-size: clamp(1.02rem, 1.5vw, 1.18rem);
   line-height: 1.65;
   color: var(--text-body);
   margin-top: 24px;
   max-width: 62ch;
   text-wrap: pretty;
}

/* ---- Also building ---- */
.also {
   padding: 0 0 clamp(48px, 7vw, 96px);
}

.tag-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 12px;
}

.tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: clamp(1rem, 1.6vw, 1.25rem);
   color: var(--ink);
   border: 1.5px solid var(--border-tag);
   padding: 11px 20px;
   border-radius: var(--radius-pill);
   transition: border-color var(--transition), color var(--transition);
}

.tag:hover {
   border-color: var(--accent);
   color: var(--accent);
}

.tag-sub {
   font-size: .85rem;
   opacity: .6;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
   background: var(--ink);
   color: var(--cream);
}

.footer-inner {
   max-width: var(--content-max);
   margin: 0 auto;
   padding: clamp(56px, 8vw, 96px) var(--content-pad);
}

.footer-title {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: clamp(2rem, 6vw, 4.6rem);
   line-height: .96;
   letter-spacing: -.035em;
   text-transform: uppercase;
   max-width: 16ch;
   text-wrap: balance;
}

.footer-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: clamp(40px, 6vw, 72px);
}

.footer-links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.footer-meta {
   font-size: .86rem;
   color: var(--text-muted-dark);
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
}

.footer-impressum {
   color: var(--text-footer-link);
   text-decoration: underline;
   text-underline-offset: 3px;
   transition: color var(--transition);
}

.footer-impressum:hover {
   color: var(--cream);
}

/* ============================================================
   Impressum / legal page
   ============================================================ */
.nav-back {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: .86rem;
   font-weight: 600;
   color: var(--ink);
   background: var(--white);
   border: 1.5px solid var(--border-ink-strong);
   padding: 11px 18px;
   border-radius: var(--radius-pill);
   transition: transform var(--transition);
}

.nav-back:hover {
   transform: translateY(-1px);
}

.nav-back-arrow {
   font-size: .9rem;
}

.legal {
   padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 8vw, 104px);
}

.legal-eyebrow {
   margin-bottom: 18px;
}

.legal-title {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: clamp(2.6rem, 8vw, 6rem);
   line-height: .9;
   letter-spacing: -.04em;
   text-transform: uppercase;
   color: var(--ink);
}

.legal-accent {
   width: 48px;
   height: 3px;
   background: var(--accent);
   margin: 22px 0 clamp(36px, 5vw, 56px);
}

.legal-grid {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: clamp(28px, 5vw, 80px);
   align-items: start;
}

.legal-block + .legal-block {
   margin-top: clamp(32px, 4vw, 48px);
}

.legal-heading {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(1.2rem, 2vw, 1.6rem);
   letter-spacing: -.015em;
   color: var(--ink);
   margin-bottom: 12px;
}

.legal-text {
   font-size: clamp(1rem, 1.4vw, 1.12rem);
   line-height: 1.65;
   color: var(--text-body);
   max-width: 64ch;
   text-wrap: pretty;
}

.legal-text + .legal-text {
   margin-top: 16px;
}

.legal-link {
   color: var(--accent);
   text-decoration: underline;
   text-underline-offset: 3px;
   transition: color var(--transition);
}

.legal-link:hover {
   color: var(--ink);
}

/* Display-reverses obfuscated text written backwards in the source */
.reverse {
   unicode-bidi: bidi-override;
   direction: rtl;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px) {
   .projects-grid {
      grid-template-columns: 1fr 1fr;
   }

   .project {
      padding-top: 0;
      border-left: none;
      padding-left: 0;
      padding-right: 0;
   }

   .namerow {
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
   }

   .who-grid {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   .legal-grid {
      grid-template-columns: 1fr;
      gap: 28px;
   }
}

@media (max-width:1100px) {
   .namerow {
      flex-direction: column;
      align-items: flex-start;
      gap: 26px;
   }

   .hero-bio {
      max-width: 48ch;
   }
}

@media (max-width:600px) {
   .projects-grid {
      grid-template-columns: 1fr;
      row-gap: 16px;
   }

   .project {
      --card-ratio: 4/1 !important;
   }

   .card {
      margin-top: 0;
      padding: 14px;
   }

   .project::before,
   .project::after {
      height: 100%;
   }

   .card-stat {
      margin-top: 12px;
      font-size: 1.05rem;
   }

   .card-desc {
      margin-top: 8px;
   }

   .nav-brand {
      position: static;
      transform: none;
      margin-right: 15px;
   }

   .footer-row {
      flex-direction: column;
      gap: 14px;
      align-items: flex-start;
   }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {

   .projects-grid {
      grid-template-columns: 1fr 1fr;
      column-gap: 16px;
      row-gap: 16px;
   }

   .project {
      --card-ratio: 3/1 !important;
   }

   .card {
      margin-top: 0;
      padding: 14px;
   }

   .project::before,
   .project::after {
      height: 100%;
   }

   .card-stat {
      margin-top: 12px;
      font-size: 1.05rem;
   }

   .card-desc {
      margin-top: 8px;
   }

   .nav-brand {
      position: static;
      transform: none;
      margin-right: 15px;
   }

   .footer-row {
      flex-direction: column;
      gap: 14px;
      align-items: flex-start;
   }
}