:root {
  scrollbar-color: #a4cf6a #14271b;
  --pixel-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cpath fill='%2365a34e' fill-opacity='.17' d='M17 11h4v6h6v4h-6v6h-4v-6h-6v-4h6z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #14271b;
}
::-webkit-scrollbar-thumb {
  background: #a4cf6a;
  border: 2px solid #14271b;
  border-radius: 0;
}
body {
  background-image: var(--pixel-pattern);
}
.hero-shade {
  background:
    linear-gradient(90deg, #0c1711ef, #14271b88 56%, #0c17111f),
    var(--pixel-pattern) !important;
}
.hero-image {
  object-fit: cover;
}
.hero-peek {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46%, 650px);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero-peek img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.peek-head {
  animation: deer-peek 6s ease-in-out infinite;
}
@keyframes deer-peek {
  0%,
  12%,
  100% {
    transform: translateY(5%);
  }
  38%,
  65% {
    transform: translateY(-8%);
  }
  86% {
    transform: translateY(5%);
  }
}
@media (max-width: 700px) {
  .hero-peek {
    top: 29%;
    right: 2%;
    width: 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .peek-head {
    animation: none;
    transform: translateY(-3%);
  }
}
.social-links .highlight-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  width: min(100%, 300px);
  padding: 12px 16px;
  background: var(--link-bg, #14271b);
  color: #fff;
  border-radius: 8px;
  font:
    700 18px/1.3 Arial,
    sans-serif;
  text-decoration: none;
}
.highlight-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.highlight-link:hover,
.more-links:hover {
  filter: brightness(1.16);
}
.more-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 22px auto 0;
  padding: 18px;
  background: #743895;
  color: #fff;
  border: 2px solid #502363;
  box-shadow: 4px 4px #502363;
  font:
    800 clamp(17px, 3vw, 24px) Arial,
    sans-serif;
  text-decoration: none;
}
.more-links span {
  font-size: 1.3em;
}
body:has(#editor) header,
body:has(#editor) #editor {
  background-image: var(--pixel-pattern);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body,
body:has(#editor) header,
body:has(#editor) #editor {
  background-image: none;
}
.hero-shade {
  background: linear-gradient(
    90deg,
    #0c1711ed,
    #14271b88 56%,
    #0c17111f
  ) !important;
}
.pixel-float {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.pixel-float i {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: var(--tint);
  clip-path: polygon(
    33% 0,
    67% 0,
    67% 33%,
    100% 33%,
    100% 67%,
    67% 67%,
    67% 100%,
    33% 100%,
    33% 67%,
    0 67%,
    0 33%,
    33% 33%
  );
  animation: drift var(--time) var(--delay) ease-in-out infinite;
}
@keyframes drift {
  0%,
  100% {
    transform: translate(-16px, 32px);
    opacity: 0.08;
  }
  50% {
    transform: translate(25px, -40px);
    opacity: 0.43;
  }
}
.topbar {
  z-index: 5;
}
.main-nav {
  flex-wrap: wrap;
}
.hero-content {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 46%;
  margin: 0;
}
.hero-intro {
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 1.02;
  margin: 12px 0;
}
.hero-peek {
  background: none;
  border: 0;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
  animation: box-float 5s ease-in-out infinite;
}
.hero-peek.bo​op {
  filter: brightness(1.1);
}
.hero-peek.boop .peek-head {
  animation:
    pop-deer 0.85s cubic-bezier(0.15, 0.8, 0.3, 1.25) 1,
    deer-peek 6s 0.85s infinite;
}
.hero-peek:hover {
  filter: brightness(1.08);
}
@keyframes box-float {
  50% {
    transform: translateY(-53%);
  }
}
@keyframes pop-deer {
  0% {
    transform: translateY(15%) scale(0.92);
  }
  42% {
    transform: translateY(-19%) scale(1.07);
  }
  100% {
    transform: translateY(-5%);
  }
}
.social-links {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.social-links .highlight-link {
  grid-column: span 2;
  width: 100%;
  text-align: center;
}
.social-links .highlight-link:nth-child(-n + 2) {
  grid-column: span 3;
  min-height: 58px;
}
.highlight-link[data-brand="modrinth"] {
  color: #092518;
}
.orion {
  width: min(1100px, calc(100% - 36px));
  margin: 50px auto;
  padding: clamp(18px, 4vw, 36px);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  gap: 24px;
  background: #14271b;
  color: #f5edda;
  border: 2px solid #65a34e;
  border-radius: 14px;
}
.orion img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.orion h2 {
  font-size: clamp(32px, 5vw, 54px);
  margin: 0;
}
.orion p {
  margin: 10px 0 16px;
}
.orion a {
  display: inline-flex;
}
.arrive {
  animation: arrive 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes arrive {
  from {
    transform: translateY(25px);
    opacity: 0.45;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 700px) {
  .hero-content {
    top: auto;
    bottom: 24px;
    transform: none;
    width: auto;
  }
  .hero-peek {
    top: 31%;
    right: 16%;
    width: 68%;
  }
  .social-links .highlight-link {
    grid-column: span 3;
    font-size: 14px;
  }
  .orion {
    grid-template-columns: 1fr;
  }
  .topbar {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .pixel-float {
    display: none;
  }
  .hero-peek,
  .hero-peek .peek-head,
  .arrive {
    animation: none !important;
  }
}
.hero {
  border: 1px solid #65a34e;
  box-shadow: 0 16px 45px #0c171138;
}
.hero-content {
  max-width: 650px;
}
.hero-intro {
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  letter-spacing: -0.07em;
  text-wrap: balance;
  text-shadow: 0 4px 28px #0c1711;
}
.hero-kicker {
  color: #a4cf6a;
}
.hero-actions a {
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.hero-actions a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px #a4cf6a42;
}
.hero-peek {
  filter: drop-shadow(0 18px 16px #0c171188);
}
.hero-peek.boop {
  animation: box-kick 0.55s ease-out;
}
.hero-peek.boop .peek-head {
  animation:
    pop-deer 0.85s cubic-bezier(0.15, 0.8, 0.3, 1.25) 1,
    deer-peek 6s 0.85s infinite;
}
@keyframes box-kick {
  0%,
  100% {
    transform: translateY(-50%);
  }
  35% {
    transform: translateY(-57%);
  }
  70% {
    transform: translateY(-48%);
  }
}
.project-card {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.24s,
    box-shadow 0.24s;
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    210px at var(--mx, 50%) var(--my, 50%),
    #a4cf6a40,
    transparent
  );
  transition: opacity 0.25s;
}
.project-card:hover::after,
.project-card:focus-within::after {
  opacity: 1;
}
.project-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 14px 30px #0c171130;
}
.more-links:hover {
  transform: translate(-2px, -3px);
  box-shadow: 6px 7px #502363;
}
.orion {
  box-shadow: 6px 6px #65a34e;
}
.arrive {
  animation-duration: 0.85s;
}
@media (max-width: 700px) {
  .hero-intro {
    font-size: clamp(2.25rem, 9vw, 3.75rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-peek.boop,
  .hero-peek.boop .peek-head {
    animation: none !important;
  }
  .project-card:hover,
  .hero-actions a:hover,
  .more-links:hover {
    transform: none;
  }
}
/* Motion pass: preserve readable final states; movement never hides content. */
.orion h2 {
  color: #f5edda !important;
  text-shadow: none;
}
.orion p {
  color: #f5edda;
}
.orion {
  overflow: hidden;
}
.orion > * {
  min-width: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .motion-enter {
    animation: slide-settle 0.95s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
  .motion-enter:nth-child(2n) {
    --entry-x: 65px;
  }
  @keyframes slide-settle {
    from {
      transform: translate(var(--entry-x, -65px), 75px) scale(0.92);
    }
    to {
      transform: translate(0, 0) scale(1);
    }
  }
  .hero-intro {
    animation: title-land 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes title-land {
    from {
      transform: translateY(85px);
      clip-path: inset(0 0 100% 0);
    }
    to {
      transform: none;
      clip-path: inset(0);
    }
  }
  .hero-image {
    scale: 1.12;
    translate: 0 var(--scene-y, 0px);
  }
  .about-mascot {
    translate: 0 var(--mascot-y, 0px);
  }
  .orion img {
    translate: 0 var(--setup-y, 0px);
    scale: 0.97;
  }
  .hero-peek {
    translate: var(--look-x, 0px) var(--look-y, 0px);
    transition: translate 0.35s ease-out;
  }

  .ticker-track {
    animation: ticker-travel 22s linear infinite !important;
    width: max-content;
    display: flex;
  }
  @keyframes ticker-travel {
    to {
      transform: translateX(-50%);
    }
  }
  .ticker:hover .ticker-track {
    animation-play-state: paused !important;
  }
  .highlight-link {
    transition:
      translate 0.25s,
      box-shadow 0.25s;
  }
  .highlight-link:hover {
    translate: 0 -7px;
    box-shadow: 0 9px 0 #14271b22;
  }
}
@media (max-width: 700px) {
  .orion img {
    translate: 0 0;
  }
  .motion-enter {
    --entry-x: 0px;
  }
}
/* Pixel details: replace decorative diamonds and wordmark dots. */
.ticker-star:before,
.portrait-stars:before {
  width: 14px;
  height: 14px;
  border-radius: 0;
  transform: none;
  clip-path: polygon(
    33% 0,
    67% 0,
    67% 33%,
    100% 33%,
    100% 67%,
    67% 67%,
    67% 100%,
    33% 100%,
    33% 67%,
    0 67%,
    0 33%,
    33% 33%
  );
}
.brand-period,
.footer-brand > span {
  font-size: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  background: var(--accent);
  clip-path: polygon(
    33% 0,
    67% 0,
    67% 33%,
    100% 33%,
    100% 67%,
    67% 67%,
    67% 100%,
    33% 100%,
    33% 67%,
    0 67%,
    0 33%,
    33% 33%
  );
}
.pixel-burst {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 45%;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: var(--accent);
  clip-path: polygon(
    33% 0,
    67% 0,
    67% 33%,
    100% 33%,
    100% 67%,
    67% 67%,
    67% 100%,
    33% 100%,
    33% 67%,
    0 67%,
    0 33%,
    33% 33%
  );
  animation: pixel-burst 0.85s ease-out forwards;
}
@keyframes pixel-burst {
  from {
    transform: translate(0, 0) scale(0.5);
  }
  to {
    transform: translate(var(--burst-x), var(--burst-y)) scale(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .button-primary,
  .button-quiet,
  .nav-cta {
    translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
    transition:
      translate 0.35s cubic-bezier(0.18, 0.9, 0.2, 1.5),
      box-shadow 0.2s;
  }
  .hero-peek.boop .pixel-burst:nth-last-child(2n) {
    background: #eeb95c;
  }
}

.more-links span {
  display: inline-block;
  transition: transform 0.2s ease;
}
.more-links:hover span,
.more-links:focus-visible span {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: no-preference) {
  .section-heading,
  .links-heading {
    position: relative;
  }
  .section-heading::after,
  .links-heading::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: #65a34e;
    pointer-events: none;
    clip-path: polygon(
      33% 0,
      67% 0,
      67% 33%,
      100% 33%,
      100% 67%,
      67% 67%,
      67% 100%,
      33% 100%,
      33% 67%,
      0 67%,
      0 33%,
      33% 33%
    );
  }
  @supports (animation-timeline: view()) {
    .section-heading,
    .links-heading {
      animation: section-wipe linear both !important;
      animation-timeline: view() !important;
      animation-range: entry 0% cover 28% !important;
    }
    .section-heading::after,
    .links-heading::after {
      animation: section-plus linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    @keyframes section-wipe {
      from {
        translate: 0 48px;
        clip-path: inset(0 0 95% 0);
      }
      to {
        translate: 0 0;
        clip-path: inset(0);
      }
    }
    @keyframes section-plus {
      from {
        scale: 0;
      }
      to {
        scale: 1;
      }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .more-links span {
    transition: none;
  }
}

/* Keep the animated head behind the solid face of the box. */
.peek-window {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 33.33% 0);
}

.plus-transition {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .plus-transition.is-ready {
    display: block;
    width: 100%;
    background:
      linear-gradient(#0c17116b, #0c1711c9),
      url("brand/banner/background-banner.png") center 45% / cover #0c1711;
  }
  .plus-transition-frame {
    position: relative;
    height: clamp(340px, 75svh, 880px);
    overflow: hidden;
    display: grid;
    place-items: center;
    isolation: isolate;
  }
  .plus-transition-title {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: clamp(2rem, 8vw, 8rem) MinecraftTen, Impact, sans-serif;
    text-transform: uppercase;
    color: #f5edda;
  }

  .plus-transition-shape {
    --arm: calc(var(--plus-size, 24px) / 6);
    --reach: calc(var(--plus-size, 24px) / 2);
    --l: calc(50% - var(--arm));
    --r: calc(50% + var(--arm));
    --a: calc(50% - var(--reach));
    --b: calc(50% + var(--reach));
    clip-path: polygon(
      var(--l) var(--a), var(--r) var(--a),
      var(--r) var(--l), var(--b) var(--l),
      var(--b) var(--r), var(--r) var(--r),
      var(--r) var(--b), var(--l) var(--b),
      var(--l) var(--r), var(--a) var(--r),
      var(--a) var(--l), var(--l) var(--l)
    );
    color: #0a1225;
    opacity: var(--plus-opacity, 0);
  }
}

.brand-avatar {
  object-fit: contain;
  border-radius: 0;
}
.creator-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.4rem 0;
}
.creator-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 220px;
  color: #172018;
  background: #f5edda;
  border: 1px solid #14271b32;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
}
.creator-stat:hover {
  border-color: #65a34e;
}
.creator-stat img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.creator-stat b,
.creator-stat span span {
  display: block;
}
.creator-stat span span {
  font-size: 0.875rem;
}
html {
  overflow-y: scroll;
  scrollbar-width: auto;
}

@font-face {
  font-family: "Minecraft Ten";
  src: url("minecraft-ten.ttf") format("truetype");
  font-display: swap;
}
.hero-intro,
.section-heading h2,
.about-copy h2,
.orion h2,
.links-heading h2,
.hero-intro {
  font-size: clamp(1.9rem, 4.2vw, 4.2rem);
}
.section-heading h2,
.about-copy h2,
.orion h2,
.links-heading h2 {
  font-size: clamp(1.8rem, 4.3vw, 3.65rem);
}
.projects-backdrop {
  background:
    linear-gradient(#f5f3e9 0%, #f5f3e9bd 23%, #f5f3e9e6 78%, #f5f3e9 100%),
    url("brand/banner/background-banner.png") center/cover;
}
.projects-section .filters {
  position: relative;
}
@media (max-width: 700px) {
  .hero-intro {
    font-size: clamp(1.65rem, 6.6vw, 3.2rem);
  }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-intro,
  .section-heading h2,
  .about-copy h2,
  .orion h2,
  .links-heading h2 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
    filter: drop-shadow(2px 0 #024014) drop-shadow(-2px 0 #024014)
      drop-shadow(0 2px #024014) drop-shadow(0 -2px #024014)
      drop-shadow(0 4px #136417);
  }
}

/* The artwork runs edge to edge; the content keeps a small gutter. */
.topbar {
  width: auto;
  margin-inline: clamp(16px, 3vw, 64px);
}

.hero {
  width: 100%;
  min-height: clamp(560px, 80svh, 1100px);
  max-height: none;
  border: 0;
  border-radius: 0;
}

.projects-section {
  width: auto;
  margin-inline: clamp(16px, 3vw, 64px);
}

@media (min-width: 2200px) {
  .project-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: clamp(450px, 75svh, 680px);
  }
}

/* Keep the sunset behind both text layers. */
.plus-transition-frame {
  background:
    linear-gradient(#0c171145, #0c17118c),
    url("brand/banner/background-banner.png") center 45% / cover;
}

@media (min-width: 701px) {
  .hero-intro {
    font-size: clamp(2.8rem, 5.3vw, 7rem);
  }

  .section-heading h2 {
    font-size: clamp(2.5rem, 4.8vw, 5rem);
  }

  .creator-stat {
    padding: 18px 22px;
    gap: 16px;
    font-size: 1.125rem;
  }

  .creator-stat img {
    width: 32px;
    height: 32px;
  }

  .creator-stat span span {
    font-size: 1rem;
  }
}

/* Match the 150% desktop view while keeping narrow screens usable. */
@media (min-width: 1280px) {
  body:has(main#home) {
    zoom: 1.5;
  }

  .hero {
    min-height: clamp(400px, 47svh, 650px);
  }

  .hero-intro {
    font-size: clamp(2.25rem, 3.1vw, 4.2rem);
  }

  .plus-transition-frame {
    height: clamp(230px, 44svh, 520px);
  }

  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 2200px) {
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Three independent banner layers. */
.plus-transition.is-ready,
.plus-transition-frame {
  background: url("brand/banner/background-banner.png") center / cover;
}
.transition-mascot {
  position: absolute;
  left: 8%;
  top: 50%;
  width: 28%;
  max-height: 85%;
  object-fit: contain;
  transform: translateY(-50%);
}
.plus-transition-title {
  font-family: "Minecraft Ten", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 6rem);
  padding-left: 30%;
  color: #a4cf6a;
}
.plus-transition-shape {
  color: #a4cf6a;
  background: transparent;
  filter: invert(1);
}
.hero-intro,
.section-heading h2,
.about-copy h2,
.orion h2,
.links-heading h2 {
  font-family: "Minecraft Ten", Impact, sans-serif !important;
  font-weight: 400;
  background: linear-gradient(#f3fc07, #9dcb03) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: #a4cf6a;
  -webkit-text-fill-color: transparent;
}

/* The growing plus reveals amber lettering. */
.plus-transition-shape { color: #eeb95c; filter: none; }

/* Text shadows must not fill the transparent heading glyphs. */
.hero-intro,
.section-heading h2,
.about-copy h2,
.orion h2,
.links-heading h2 {
  text-shadow: none !important;
  letter-spacing: 0;
  filter: none !important;
  -webkit-text-stroke: 1px #024014;
}
.about-section {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 64px clamp(24px, 6vw, 100px);
  gap: clamp(24px, 5vw, 80px);
}
.about-copy { width: 100%; max-width: 600px; min-width: 0; }
.about-copy h2 { white-space: nowrap; }
.about-portrait { opacity: 1 !important; visibility: visible !important; }
.about-mascot { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.about-hello { flex-wrap: wrap; }
.about-hello a { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 700px) {
  .about-section { grid-template-columns: 1fr; padding: 40px 24px; }
  .about-copy { margin-inline: auto; }
}

.generator-title {
  background: none !important;
  -webkit-text-fill-color: initial;
  -webkit-text-stroke: 0;
  line-height: 1;
}
.generator-title canvas { display: block; width: 100%; height: auto; }
.hero-intro.generator-title { width: min(100%, 680px); }
.section-heading .generator-title,
.about-copy .generator-title,
.links-heading .generator-title { width: min(100%, 420px); }
.plus-transition-title { padding: 0 5%; text-align: center; font-size: clamp(1.4rem, 5vw, 5rem); }
.plus-transition-shape {
  background: linear-gradient(100deg, #ff526a, #ffbe55, #f4ed63, #70e282, #60d9ff, #9980ff, #ff74cd, #ff526a);
  background-size: 200% 100%;
  background-position: var(--rainbow-position, 0%) center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: none;
}
/* Tablet layouts use their actual available width. */
@media (max-width: 1366px), (pointer: coarse) {
  body:has(main#home) { zoom: 1; }
  .hero { min-height: 600px; }
  .hero-content { width: 52%; max-width: none; }
  .hero-peek { width: 40%; right: 2%; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-section { padding: 48px 5%; gap: 32px; }
  .about-copy h2 { white-space: normal; }
}
@media (max-width: 700px) {
  .hero { display: flex; flex-direction: column; min-height: 650px; padding: 40px 24px; }
  .hero-content { position: relative; top: auto; transform: none; width: 100%; }
  .hero-peek { position: relative; right: auto; top: auto; bottom: auto; width: 75%; margin: 36px auto 0; transform: none; }
  .project-grid { grid-template-columns: 1fr; }
  .about-section { grid-template-columns: 1fr; }
  .plus-transition-frame { height: 260px; }
  .hero-actions { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  html, body { width: 100%; overflow-x: clip; }
  .topbar {
    margin-inline: 16px;
    padding-block: 14px;
    gap: 12px;
    flex-wrap: wrap;
    height: auto;
  }
  .topbar nav { display: flex; gap: 16px; flex-wrap: wrap; }
  .topbar a { min-height: 44px; display: inline-flex; align-items: center; }
  .hero { min-height: 0; height: auto; max-height: none; padding: 36px 20px 24px; gap: 24px; }
  .hero-content { inset: auto; position: relative; width: 100%; margin: 0; transform: none; }
  .hero-intro.generator-title { width: 100%; }
  .hero-description { font-size: 16px; line-height: 1.6; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
  .hero-actions a { min-height: 48px; padding: 12px 18px; font-size: 14px; }
  .hero-peek {
    position: relative; inset: auto; width: min(82%, 320px);
    height: auto; aspect-ratio: 1; margin: 0 auto;
    transform: none; flex-shrink: 0;
  }
  .projects-section, .links-section { width: 100%; padding: 36px 20px; }
  .section-heading { gap: 16px; flex-wrap: wrap; }
  .filters { display: flex; flex-wrap: wrap; gap: 8px; }
  .filters input { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
  .filters button { min-height: 44px; padding: 10px 14px; }
  .project-grid { gap: 18px; grid-template-columns: minmax(0, 1fr); }
  .creator-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .creator-stat { min-width: 0; padding: 16px; font-size: 16px; }
  .project-card { min-width: 0; }
  .about-section { gap: 24px; padding: 36px 20px; }
  .about-portrait { min-height: 240px; }
  .about-mascot { width: min(240px, 80%); }
  .about-copy > p { font-size: 16px; line-height: 1.75; }
  .social-links { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .social-links .highlight-link,
  .social-links .highlight-link:nth-child(-n + 2) { grid-column: auto; min-height: 52px; }
  [data-more] { width: 100%; min-height: 56px; font-size: 22px; }
  .plus-transition-title { font-size: clamp(20px, 5.5vw, 38px); }
  footer { padding: 24px 20px; flex-wrap: wrap; gap: 16px; }
}
@media (pointer: coarse) {
  button, a, input { touch-action: manipulation; }
  .project-card:hover { transform: none; }
}

/* Phone artwork uses a small float around its normal layout position. */
@keyframes phone-box-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (max-width: 700px) {
  .projects-section { padding-left: 12px; padding-right: 20px; }
  .hero-peek {
    margin-top: 24px;
    transform: none;
    animation: phone-box-float 5s ease-in-out infinite;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .hero-peek { animation: none; }
}

/* Footer directory */
.site-directory {
  display: block;
  width: 100%;
  padding: 56px clamp(20px, 4vw, 72px) 24px;
  background: #0c1711;
  color: #f5edda;
  border-top: 1px solid #65a34e;
}
.directory-main {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.directory-brand > a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #f5edda; }
.directory-brand img { width: 64px; height: 64px; object-fit: contain; }
.directory-brand p { color: #9bab9d; line-height: 1.7; margin-top: 16px; font-size: 14px; }
.site-directory h3 { font: 600 16px Arial, sans-serif; color: #f5edda; margin: 0 0 16px; }
.site-directory ul { margin: 0; padding: 0; list-style: none; }
.site-directory li { margin: 0; }
.site-directory nav a { display: inline-block; color: #a4cf6a; padding: 6px 0; font-size: 14px; text-decoration: none; line-height: 1.5; }
.site-directory a:hover { color: #eeb95c; text-decoration: underline; }
.site-directory a:focus-visible { outline: 2px solid #eeb95c; outline-offset: 4px; }
.directory-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #f5edda24; padding-top: 24px; margin-top: 40px; color: #9bab9d; font-size: 13px; }
.directory-bottom a { color: #f5edda; }
@media (max-width: 1100px) {
  .directory-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .site-directory { padding: 36px 20px 24px; }
  .directory-main { grid-template-columns: 1fr; gap: 28px; }
  .site-directory nav a { min-height: 44px; display: flex; align-items: center; font-size: 16px; }
  .directory-bottom { flex-wrap: wrap; }
}