@import url('https://fonts.googleapis.com/css?family=Archivo+Black');

*, *::before, *::after {
    box-sizing: border-box;
}

*:focus,
*:focus-visible {
    outline: none;
}

button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
.ss-main:focus,
.ss-main:focus-visible,
.glider-prev:focus,
.glider-prev:focus-visible,
.glider-next:focus,
.glider-next:focus-visible,
.glider-dot:focus,
.glider-dot:focus-visible {
    box-shadow: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
}

/* Persistent button chrome (not a focus ring) stays on keyboard focus. */
.content-link:focus,
.content-link:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.21);
}

:root {
    --page-gutter: clamp(16px, 4vw, 24px);
    /* --fold-h: space the first screen occupies in the document flow.
       --hero-h: painted height of the video layer. It tracks the LARGE viewport
       (URL bar retracted) so the clouds still cover once the bar slides away. */
    --fold-h: 100svh;
    --hero-h: 100lvh;
    --hero-overscan: 1;
}

html {
    margin: 0;
    height: 100%;
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    height: auto;
    /* Prevent horizontal scroll on mobile without breaking scroll animations */
    overflow-x: clip; /* 'clip' doesn't create a scroll container like 'hidden' does */
}

body {
    margin: 0;
    height: 100%;
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    height: auto;
}

body {
    /*font-family: 'Archivo Black', sans-serif;*/
    font-family: "Work Sans", sans-serif;
    background-color: #2c2c2c;
    /*background: radial-gradient(ellipse at center, #29382c 0%, #0c100d 100%);*/
    color: #fff;
}

.justify-start {
    justify-content: start !important;
}

.justify-end {
    justify-content: end !important;
}

.align-end {
    align-items: end !important;
}

.text-align-center {
    text-align: center;
}

svg.back-to-top {
    fill: rgba(255, 255, 255, 0.92);
    width: 2.5rem;
    height: auto;
    cursor: pointer;
}

h2.credit-el {
    text-align: center;
}

h2.credit-el a {
    color: #2c2c2c; 
}

h2.credit-el + p {
    text-align: center;
}

.mw-1000 {
    max-width: 1000px;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    min-height: 100%;
  }
  
  .noise-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    overflow: hidden;
    z-index: 0;
    
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: radial-gradient(ellipse at center, #5c5c5c00 0%,rgba(0,0,0,0.75) 100%);
    }
  }
  
  .noise {
    position: absolute;
    top: -500px;
    right: -500px;
    bottom: -500px;
    left: -500px;
    background: transparent url('/assets/images/noise.png') 0 0;
    background-size: 320px 320px;
      opacity: .35;
      animation: noise 1s steps(8,end) infinite both;
  }
  
  @keyframes noise {
    0% {
      transform: translateX(0px,0px); }
    10% {
      transform: translate(-100px, 100px);
    }
    20% {
      transform: translate(150px, -100px);
    }
    30% {
      transform: translate(-100px,100px);
    }
    40% {
      transform: translate(100px, -150px);
    }
    50% {
      transform: translate(-100px, 200px);
    }
    60% {
      transform: translate(-200px, -100px);
    }
    70% {
      transform: translateY(50px, 100px);
    }
    80% {
      transform: translate(100px, -150px);
    }
    90% {
      transform: translate(0px, 200px);
    }
    100% {
      transform: translate(-100px, 100px);
    }
  }
  
.content-wrapper {
    z-index: 1;
    background-color: #2c2c2c;
}

.mw-o {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: var(--page-gutter);
}

.mw-o .mw-o,
.mw-o .mw-i {
    padding-inline: 0;
}

.fold {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: var(--fold-h, 100svh);
    min-height: 100vh;
    min-height: 100svh;
    min-height: var(--fold-h, 100svh);
    /* The video layer is intentionally taller than the fold so the strip revealed
       by a retracting URL bar stays covered. Clipping only the horizontal axis
       keeps that overflow paintable; .hero-video contains the wide frame itself. */
    overflow-x: clip;
    overflow-y: visible;
}

.fold-intro {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 63rem;
    margin: 0 auto;
    padding: 5.5rem var(--page-gutter) 2rem;
    background: transparent;
    text-align: center;
}

.fold .content--intro {
    padding-top: 0;
    padding-bottom: 0;
}

.fold-intro > h1 {
    margin: 0;
    line-height: normal;
}

.fold-intro__lede {
    margin: 0.2em 0 0;
    /* Match .text-xl on about.title — one continuous Archivo Black block. */
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(24px, 5vw, 42px);
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    color: #fff;
}

.nowrap {
    white-space: nowrap;
}

.team-section {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4rem var(--page-gutter) 3rem;
    background-color: #2c2c2c;
    display: flex;
    justify-content: center;
}

.developers-card {
    position: relative;
    width: min(100%, 62rem);
    border-radius: 4px;
    padding: 2.4rem 2.75rem 2.2rem;
    color: #fff;
    background-color: #2c2c2c;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 2px 6px 16px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(0, 0, 0, 0.1);
    transform: rotate(0.4deg);
}

.developers-card__face {
    position: static;
}

.developers-card__title {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    text-align: left;
}

.developers-card__toggle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.developers-card__toggle:focus,
.developers-card__toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.developers-card__toggle[aria-expanded="false"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 2.4rem 2.75rem 1.15rem;
}

.developers-card__toggle[aria-expanded="true"] {
    position: relative;
    min-height: 5.25rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.15rem;
}

.developers-card__toggle[aria-expanded="false"] ~ .founders-row {
    padding-top: 3.35rem;
    padding-bottom: 2.15rem;
}

.developers-card__hint {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-family: 'Work Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.78);
}

.developers-card__hint-collapse {
    display: none;
}

.developers-card__toggle[aria-expanded="true"] .developers-card__hint-expand {
    display: none;
}

.developers-card__toggle[aria-expanded="true"] .developers-card__hint-collapse {
    display: inline;
}

.developers-card__toggle:hover .developers-card__hint,
.developers-card__toggle:hover .developers-card__caret {
    color: #fff;
}

.developers-card__caret {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.72);
    transition: transform 260ms ease, color 160ms ease;
}

.developers-card__toggle[aria-expanded="true"] .developers-card__caret {
    transform: rotate(180deg);
}

.developers-details {
    overflow: hidden;
    transition: max-height 340ms ease, opacity 240ms ease;
}

.developers-details--collapsed {
    max-height: 0;
    opacity: 0;
}

.founders-row {
    display: flex;
    gap: 1.35rem 2.25rem;
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.founders-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.founders-group__label {
    margin: 0 0 0.45rem;
    font-family: 'Work Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.founders-group__people {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

.founder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    min-width: 6.75rem;
    max-width: 8.5rem;
    margin: 0;
}

.founder__face {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 2px;
    filter: grayscale(1);
}

.founder__face img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.founder figcaption {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.founder figcaption strong {
    display: block;
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
}

.founder figcaption span {
    color: rgba(255, 255, 255, 0.72);
    font-family: 'Work Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.25;
}

.team-bios {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    text-align: left;
}

.team-bios__person {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

.team-bios__person strong {
    display: block;
    color: #fff;
    font-weight: 800;
    margin-bottom: 0.1rem;
}

.team-bios__motto {
    display: block;
    margin-top: 0.35rem;
    color: #fff;
    font-style: italic;
    font-weight: 600;
}

.team-bios__heart {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin-left: 0.2em;
    vertical-align: -0.18em;
    color: #8b5cf6;
    line-height: 1;
}

.team-bios__heart svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.developers-card__collaborators {
    margin: 1.1rem 0 0;
    font-family: 'Work Sans', sans-serif;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
}

.team-closing {
    margin: 3.25rem 0 0.35rem;
    font-family: 'Work Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .developers-details,
    .developers-card__caret {
        transition: none;
    }
}

@media screen and (max-width: 720px) {
    .developers-card {
        width: 100%;
        padding: 1.1rem 1rem 1rem;
        transform: none;
    }

    .developers-card__toggle[aria-expanded="false"] {
        padding: 1.1rem 1rem 0.85rem;
    }

    .developers-card__toggle[aria-expanded="true"] {
        min-height: 4.5rem;
    }

    .developers-card__toggle[aria-expanded="false"] ~ .founders-row {
        padding-top: 2.75rem;
        padding-bottom: 1.85rem;
    }

    .founders-row {
        gap: 1.1rem 1.35rem;
    }

    .founders-group__label {
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        margin-bottom: 0.35rem;
    }

    .founder {
        min-width: 5.5rem;
        max-width: 7rem;
    }

    .founder__face,
    .founder__face img {
        width: 64px;
        height: 64px;
    }

    .team-bios,
    .developers-card__collaborators {
        text-align: center;
    }
}

.brand-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    width: 100%;
}

.brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    width: max-content;
    max-width: 180px;
}

.site-logo {
    display: block;
    flex: none;
    width: max-content;
    max-width: 180px;
}

.site-logo__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 32px;
    object-fit: contain;
}

.together-marquee {
    --marquee-gap: 0.55rem;
    --marquee-inset-left: 5px;
    --marquee-inset-right: 2px;
    overflow: visible;
    width: 100%;
    height: 12px;
    margin: 0.2rem 0 0;
    padding: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background: none;
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 12px;
    color: #fff;
}

.together-marquee__clip {
    overflow: hidden;
    width: auto;
    max-width: none;
    height: 12px;
    margin-left: var(--marquee-inset-left);
    margin-right: var(--marquee-inset-right);
}

/* BEGIN MARQUEE_EDGE_BLUR — delete this block to revert */
.together-marquee__clip {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2px, #000 calc(100% - 2px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2px, #000 calc(100% - 2px), transparent);
}
/* END MARQUEE_EDGE_BLUR */

.together-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    height: 12px;
    will-change: transform;
    animation: together-marquee 42s linear infinite;
}

.together-marquee__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--marquee-gap);
    margin: 0;
    padding: 0;
    padding-right: var(--marquee-gap);
    white-space: nowrap;
    font-weight: 300;
    line-height: 12px;
}

.together-marquee__group [data-seconds-between-us] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    min-width: 100%;
    height: 100vh;
    height: 100lvh;
    height: var(--hero-h, 100lvh);
    min-height: 100vh;
    min-height: 100lvh;
    min-height: var(--hero-h, 100lvh);
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background: #111;
}

.hero-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%) scale(var(--hero-overscan, 1));
    -webkit-transform: translate(-50%, -50%) scale(var(--hero-overscan, 1));
    transform-origin: center center;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

.hero-video::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.48) 0%,
        rgba(0, 0, 0, 0.18) 38%,
        rgba(0, 0, 0, 0.32) 100%
    );
}

@media (max-width: 900px) {
    :root {
        /* Portrait crops the 2:1 frame left/right, so a little overscan costs
           nothing visually and absorbs subpixel rounding during URL bar moves. */
        --hero-overscan: 1.04;
    }

    .hero-video {
        position: absolute;
        clip-path: none !important;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        width: 100%;
        min-width: 100%;
        height: var(--hero-h, 100lvh);
        min-height: var(--hero-h, 100lvh);
    }
}

@keyframes together-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* BEGIN MARQUEE_CRISP — delete this block to revert */
.together-marquee.marquee--crisp {
    font-size: 9px;
    font-weight: 400;
    height: 12px;
    line-height: 12px;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.together-marquee.marquee--crisp .together-marquee__clip,
.together-marquee.marquee--crisp .together-marquee__track,
.together-marquee.marquee--crisp .together-marquee__group {
    height: 12px;
    line-height: 12px;
    font-weight: 400;
    backface-visibility: visible;
}

.together-marquee.marquee--crisp .together-marquee__track {
    will-change: auto;
    animation-name: together-marquee-crisp;
}

@keyframes together-marquee-crisp {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* END MARQUEE_CRISP */

@media (prefers-reduced-motion: reduce) {
    .together-marquee__track {
        animation: none;
    }
}

@media screen and (max-width: 720px) {
    .brand-bar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.2rem;
    }

    .navbar {
        width: 100%;
        justify-content: center;
    }

    .navbar ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.header-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 9999;
    width: 100%;
    margin: 0;
    padding-bottom: 0.4rem;
    transform: none;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.content-wrapper > main,
.content-wrapper > footer {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    background-color: #2c2c2c;
}

.content-wrapper > main.mw-o,
.content-wrapper > footer.mw-o {
    max-width: none;
}

.content-wrapper > main > *,
.content-wrapper > footer > * {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: max(var(--page-gutter), calc((100% - 1200px) / 2));
    background-color: #2c2c2c;
}

.content-wrapper > main > .wrap {
    padding-inline: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.content-wrapper > main > .wrap > *,
.content-wrapper > main > .content,
.content-wrapper > main > .project-slider-section,
.content-wrapper > main > .wrap .content {
    background-color: #2c2c2c;
}

.header-wrapper.navbar-hidden {
    transform: none;
}

.header-wrapper.scrolled,
.header-wrapper.bg-solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #2c2c2c;
}

.mw-i {
    max-width: 1000px;
    margin: 0 auto;
    padding-inline: var(--page-gutter);
}

.navbar {
    display: flex;
    justify-content: end;
    padding-top: 0;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.navbar ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 3px 10px;
}

footer .navbar-nav {
    margin-bottom: 2px;
}

footer svg {
    margin-left: 1.5rem;
}

.navbar-nav span, .navbar-nav a {

    padding-bottom: 1px;
    position: relative;
    cursor: pointer;
}

.navbar-nav span:hover:after, .navbar-nav a:hover:after {
    display: flex;
    content: "";
    position: absolute;
    
    left: 8%;
    right: 8%;
    height: 1px;
    bottom: 0;
    border-bottom: 1px solid white;
}

.navbar ul li:last-of-type {
    margin-right: 20px;
}

.row {
    display: flex;
}

.no-link-decoration {
    text-decoration: none;
    color: inherit;
}

.underline-decoration {
    text-decoration: underline;
    color: inherit;
}

.content-wrapper .section:first-child {
    padding-top: 30%;
}



/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 5000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #2c2c2c;
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: #ffffff;
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}


.frame__heading p {
    margin: 0;
}

.frame__credits {
grid-area: credits;
}

.frame__author {
display: flex;
gap: 1.5rem;
grid-area: author;
}

.content {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.content--perspective {
perspective-origin: 50% 0%;
perspective: 1000px;
}

.content--sticky {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding-inline: var(--page-gutter);
    position: sticky;
    top: 0;
    --offset: 0px;
    top: var(--offset);
    height: calc(100vh - var(--offset));
}

@media screen and (min-width: 721px) {
    .content-wrapper > main > .wrap {
        max-width: 1200px;
        width: 100%;
        margin-inline: auto;
        padding-inline: 0;
    }

    .content--sticky {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

.content--grid,
.content--grid .content__inner {
display: grid;
overflow: hidden;
grid-column-gap: 5vw;
grid-row-gap: 2vh;
align-content: center;
/* If the rows still do not fit, align to the start rather than centring, so
   overflow is never split across the top and bottom edges at once. */
align-content: safe center;
grid-template-areas: 'content-img' 'content-title' 'content-text';
justify-items: center;
}

.content--grid:has(.content__inner) {
display: block;
padding: 0;
}

.content__inner {
width: 100%;
height: 100%;
border-radius: 0 0 2rem 2rem;
}

.content--card {
display: flex;
flex-direction: column;
height: 80vh;
width: 95vw;
max-width: 500px;
aspect-ratio: 0.8;
top: 10vh;
margin: auto;
border-radius: 14px;
gap: 3vh;
text-align: center;
margin-bottom: 5vh;
}

h2.content-title {
    /* Caps at the original 3rem on desktop, but scales down on narrow screens
       where a 48px title would otherwise take three lines and most of the panel. */
    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.1;
    margin-block-end: 0.18em;
    min-width: 0;
    /* Backstop only. Project names must stay readable, so this is set above
       what the longest current title needs on a 320px screen (three lines). */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.content--half {
display: flex;
flex-direction: column;
gap: 3vh;
text-align: center;
}

.content--half:nth-child(odd) {
margin-left: auto;
}

.content__img {
grid-area: content-img;
width: 50%;
max-width: 300px;
height: auto;
object-fit: contain;
}

.content__img--large {
width: 60%;
height: auto;
object-fit: contain;
}

.content__img--small {
height: 35%;
width: auto;
object-fit: contain;
}

/* Sticky project icons: never trust the SVG's intrinsic size (Web Development
   is ~87px; the others are 500–950px). Cap to the same box used on desktop. */
.content--sticky .content__img {
    max-width: min(11.25rem, 100%);
    max-height: min(11.25rem, 28vh);
    height: auto;
    object-fit: contain;
}

/* Stacked layout (below ~1008px, including half-FHD ~960px): Web Development's
   card is the size reference, and its icon is ~87px. Scale every project icon
   down to that neighborhood so they cannot overflow the panel. */
@media screen and (max-width: 62.9375em) {
    .content--sticky .content__img {
        width: auto;
        max-width: clamp(5.4375rem, 10vw, 7.5rem);
        max-height: clamp(5.4375rem, 10vw, 7.5rem);
        height: auto;
        object-fit: contain;
    }
}

.spacer {
margin-top: 20vh;
}

.content__title {
grid-area: content-title;
letter-spacing: -0.095em;
text-transform: uppercase;
line-height: 1;
font-weight: normal;
font-size: clamp(2rem,6vw,5rem);
margin: 0;
font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400;
}

.content__text {
margin: 0;
max-width: 500px;
grid-area: content-text;
text-align: center;
line-height: 1.5;
padding: 0 1rem;
backface-visibility: hidden;
}

.content__text--narrow {
max-width: 300px;
}

.content--intro {
padding-top: 25vh;
padding-bottom: 25vh;
z-index: 2;
}

.content--outro {
padding-top: 50vh;
padding-bottom: 30vh;
}

.bg-1 { background: red; }
.bg-2 { background: green; }
.bg-3 { background: rgb(45, 45, 156); }
.bg-4 { background: #2c2c2c; }
.bg-5 { background: rgb(44, 44, 44); }
.bg-solid {
    background: #2c2c2c;
    background-clip: border-box;
  }

@media screen and (min-width: 63em) {
body {
    --page-padding: 2rem 3rem;
}
.frame--header {
    height: 100vh;
    grid-template-columns: auto auto auto 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    align-content: space-between;
    grid-template-areas: 'title back prev sub sponsor' 'heading heading heading heading heading' 'demos demos demos demos demos';
}
.frame__heading {
    margin-top: 0;
}
.frame__heading h2 {
    white-space: nowrap;
}
.frame__heading p {
    margin: 0 0 0 auto;
}
.content--grid .content__title {
    align-self: end;
}
.frame__demos {
    position: fixed;
    bottom: 2rem;
}
.frame--footer {
    padding-bottom: 0;
    grid-template-areas: 'credits ...' '... author';
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 6rem;
}
.frame__author {
    align-self: center;
}
.frame #cdawrap {
    max-width: 300px;
    text-align: right;
}
.frame #cdawrap, 
.frame__author,
.frame__sub {
    justify-self: end;
}
.content--grid,
.content--grid .content__inner {
    grid-template-areas: 'content-img content-title' 'content-img content-text';
    grid-template-columns: 30% 1fr;
    justify-items: start;
    padding-right: 3rem;
}
.content__img--large {
    width: 160%;
    max-width: 180px;
}
.content__img--dev-site {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--joggerbot {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--pumpbot {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--greedybee {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--inkspire {
    width: 64% !important;
    max-width: 120px !important;
    max-height: 120px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--koreader {
    width: 64% !important;
    max-width: 120px !important;
    max-height: 120px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    filter: brightness(0) invert(1);
    object-fit: contain;
}
.content__img--wui {
    width: 64% !important;
    max-width: 120px !important;
    max-height: 120px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 60px;
    object-fit: contain;
}
.content__img--sailshape {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--pcb {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--ecommerce {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--roast {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--custom {
    width: 96% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    align-self: center;
    padding-left: 40px;
    padding-right: 40px;
    object-fit: contain;
}
.content__img--left {
    justify-self: end;
}
.content__text--left {
    text-align: left;
    align-self: start;
}
.content--card {
    width: 50vw;
}
.content--half {
    width: 50%;
}
}



.content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0rem;
}

.content-tags .content-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff10;
    padding: 0.25rem 0.5rem;
    border-radius: 0.45rem;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
}

.content-tags .content-tag.solid {
    border: 1px solid white;
    
}

.content-links {
    display: flex;
}

.content-links-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
}

.content-links .content-link:not(:last-child) {
    margin-right: 1rem;
}

.content-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    padding: 0.5rem;
    transition: outline 0.8s;
    outline: 1px solid rgba(255, 255, 255, 0.21);
    border-radius: 0.45rem;
    color: rgba(255, 255, 255, 0.767);
}

/* The sticky project panels are exactly one viewport tall, so the text column
   has to live within that height instead of growing with the translation.
   Header, tags and links keep their size and the description is the part that
   gets truncated, so the links and the "go up" row stay reachable. */
.content-section-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.content-section-text > .project-header,
.content-section-text > .content-tags,
.content-section-text > .content-links-wrapper {
    flex-shrink: 0;
}

.content-description {
    --sticky-desc-lines: 8;
    font-size: 1.25rem;
    line-height: 1.5;
    margin-top: 1rem;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--sticky-desc-lines);
    line-clamp: var(--sticky-desc-lines);
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: calc(var(--sticky-desc-lines) * 1.5em);
}

/* Fewer lines as the viewport gets shorter: the panel height is 100vh, so the
   room available for the description shrinks with it. */
@media screen and (max-height: 900px) {
    .content-description { --sticky-desc-lines: 6; }
}

@media screen and (max-height: 800px) {
    .content-description { --sticky-desc-lines: 5; }
}

@media screen and (max-height: 700px) {
    .content-description { --sticky-desc-lines: 4; }
}

@media screen and (max-height: 620px) {
    .content-description { --sticky-desc-lines: 3; }
}

@media screen and (max-height: 580px) {
    .content-description { --sticky-desc-lines: 2; }
}

.go-up-link {
    display: flex;
    align-items: center;
}

.go-up-link a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    transition: color 0.3s ease;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.go-up-link a:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Project header with preview icon */
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.preview-icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-icon svg {
    width: 20px;
    height: 20px;
    transition: opacity 0.3s ease;
}

.preview-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.preview-icon:hover svg {
    opacity: 1;
}

/* Preview overlay */
.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.preview-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.preview-item img {
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.preview-item .preview-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Single image - centered */
.preview-overlay:has(.preview-item:only-child) .preview-item img {
    max-width: 90vw;
    max-height: 85vh;
}

/* Two images - row */
.preview-overlay:has(.preview-item:nth-child(2):last-child) .preview-item img {
    max-width: calc(50vw - 2rem);
    max-height: 85vh;
}

/* Three images - 2 top, 1 bottom centered */
.preview-overlay:has(.preview-item:nth-child(3):last-child) {
    align-content: center;
}

.preview-overlay:has(.preview-item:nth-child(3):last-child) .preview-item img {
    max-width: calc(50vw - 2rem);
    max-height: calc(42vh - 1rem);
}

.preview-overlay:has(.preview-item:nth-child(3):last-child) .preview-item:nth-child(3) {
    flex-basis: calc(50vw - 2rem);
}

/* Four images - 2x2 grid */
.preview-overlay:has(.preview-item:nth-child(4)) .preview-item img {
    max-width: calc(50vw - 2rem);
    max-height: calc(42vh - 1rem);
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Mobile portrait: make navigation larger and more touch-friendly */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .navbar {
        padding-top: 0.1rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .navbar ul {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 0.2rem !important;
    }
    
    .navbar-nav {
        margin: 0 0.2rem 3px 0.2rem !important;
        flex: 1 1 auto !important;
    }
    
    .navbar-nav span, 
    .navbar-nav a {
        font-size: clamp(13px, 3vw, 16px) !important;
        padding: 0.5rem 0.15rem !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .navbar ul li:last-of-type {
        margin-right: 0.25rem !important;
        flex: 0 0 auto !important;
        min-width: fit-content !important;
    }
    
    /* About/intro section: add padding and reduce font size */
    .content--intro {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .content--intro p:not(.fold-intro__lede) {
        font-size: clamp(14px, 3.8vw, 18px) !important;
        line-height: 1.6 !important;
    }
    
    /* Contact/outro section: add padding and reduce font size for body text */
    .content--outro {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .content--outro p {
        font-size: clamp(14px, 3.8vw, 18px) !important;
        line-height: 1.6 !important;
    }
    
    .content__text {
        font-size: clamp(14px, 3.8vw, 18px) !important;
        padding: 0 1.5rem !important;
    }
    
    /* Hide glider prev/next buttons on portrait - users can swipe */
    .glider-prev,
    .glider-next {
        display: none !important;
    }
    
    /* Add padding to glider container since buttons are hidden */
    .glider-container {
        padding: 0 1rem !important;
    }
    
    /* Center align main page title */
    .content--intro > h1 {
        text-align: center !important;
    }
}

/* Tablet portrait: fix footer icon spacing */
@media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    footer svg.back-to-top {
        margin-right: 1.5rem !important;
    }
}

/* Mobile landscape: reduce about content font size */
@media screen and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    .navbar-nav span, 
    .navbar-nav a {
        font-size: clamp(14px, 2.5vh, 16px);
    }
    
    select.language-switcher,
    .ss-main.language-switcher,
    .ss-main.language-switcher .ss-single-selected {
        font-size: clamp(14px, 2.5vh, 16px) !important;
    }
    
    /* Reduce about/intro content font size on landscape */
    .content--intro p:not(.fold-intro__lede) {
        font-size: clamp(18px, 4vh, 26px) !important;
        line-height: 1.5 !important;
    }
    
    /* Reduce contact/outro content font size on landscape */
    .content--outro p {
        font-size: clamp(18px, 4vh, 26px) !important;
        line-height: 1.5 !important;
    }
    
    .content__text {
        font-size: clamp(18px, 4vh, 26px) !important;
    }
    
    /* Project showcase cards: move image to left side on landscape */
    .content--grid,
    .content--grid .content__inner {
        grid-template-areas: 'content-img content-title' 'content-img content-text' !important;
        grid-template-columns: 25% 1fr !important;
        justify-items: start !important;
        grid-column-gap: 3vw !important;
    }
    
    .content__img {
        width: 100% !important;
        max-width: 120px !important;
        align-self: center !important;
    }
    
    .content__img--large {
        width: 100% !important;
        max-width: 140px !important;
    }
    
    .content__img--dev-site,
    .content__img--joggerbot,
    .content__img--pumpbot,
    .content__img--greedybee,
    .content__img--sailshape,
    .content__img--pcb,
    .content__img--ecommerce,
    .content__img--roast,
    .content__img--custom {
        width: 90% !important;
        max-width: 110px !important;
        max-height: 110px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        object-fit: contain;
    }
    
    .content__img--inkspire,
    .content__img--koreader,
    .content__img--wui {
        width: 70% !important;
        max-width: 80px !important;
        max-height: 80px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        object-fit: contain;
    }
    
    .content__img--left {
        justify-self: end !important;
    }
    
    .content__text--left {
        text-align: left !important;
        align-self: start !important;
    }
    
}

/* Mobile landscape: slightly increase sizes but less aggressive */
@media screen and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    .navbar-nav span, 
    .navbar-nav a {
        font-size: clamp(14px, 2.5vh, 16px);
    }
    
    select.language-switcher,
    .ss-main.language-switcher,
    .ss-main.language-switcher .ss-single-selected {
        font-size: clamp(14px, 2.5vh, 16px) !important;
    }
}

/* Legal policy modal */
html.policy-modal-open,
html.policy-modal-open body {
    overflow: hidden;
    overscroll-behavior: none;
}

.policy-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overscroll-behavior: none;
}

.policy-modal[hidden] {
    display: none !important;
}

.policy-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
}

.policy-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(42rem, 100%);
    max-height: min(85vh, 52rem);
    background-color: #2c2c2c;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.policy-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0.85rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
}

.policy-modal__title {
    margin: 0;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(1.25rem, 3.6vw, 1.85rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
}

.policy-modal__close {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    color: #fff;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.policy-modal__close:hover {
    background: #fff;
    color: #2c2c2c;
}

.policy-modal__close:focus,
.policy-modal__close:focus-visible {
    outline: none;
    box-shadow: none;
}

.policy-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.15rem 1.5rem 1.75rem;
    font-family: "Work Sans", sans-serif;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.policy-modal__updated {
    margin: 0 0 1.15rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
}

.policy-section {
    margin-bottom: 1.25rem;
}

.policy-section:last-child {
    margin-bottom: 0;
}

.policy-section__heading {
    margin: 0 0 0.45rem;
    font-family: "Archivo Black", sans-serif;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
}

.policy-section p {
    margin: 0 0 0.7rem;
}

.policy-section p:last-child {
    margin-bottom: 0;
}

.footer-nav {
    flex-wrap: wrap;
    row-gap: 0.35rem;
}

@media screen and (max-width: 768px) {
    .policy-modal {
        align-items: stretch;
        padding: max(0.65rem, env(safe-area-inset-top)) max(0.65rem, env(safe-area-inset-right)) max(0.65rem, env(safe-area-inset-bottom)) max(0.65rem, env(safe-area-inset-left));
    }

    .policy-modal__dialog {
        width: 100%;
        max-height: none;
        height: 100%;
    }

    .policy-modal__header {
        padding: 1rem 1rem 0.75rem 1.15rem;
    }

    .policy-modal__body {
        padding: 1rem 1.15rem 1.5rem;
        font-size: 0.95rem;
    }

    .footer-nav {
        justify-content: flex-start;
        column-gap: 0.75rem;
    }
}

/* Narrow screens: go-up icon on its own top-right row; compact legal line below uses full width */
@media screen and (max-width: 768px),
       screen and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    footer ul.footer-nav {
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap;
        column-gap: 0.85rem !important;
        row-gap: 0.35rem !important;
        position: static;
        min-height: 0;
    }

    footer .navbar-nav {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none;
        margin: 0 !important;
        justify-content: flex-start;
    }

    footer .navbar-nav a {
        text-align: start !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: nowrap !important;
    }

    footer svg.back-to-top {
        order: -1;
        position: static;
        flex: 0 0 2.5rem;
        width: 2.5rem;
        height: auto;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        /* Occupy the first flex line so legal links wrap onto the row below. */
        margin-left: calc(100% - 2.5rem) !important;
        z-index: 2;
        pointer-events: auto;
    }
}