/* =========================================================
   JOSIE MAKES — MASTER STYLESHEET
   =========================================================

   INTERNET CANDY IN A SUIT™

   TABLE OF CONTENTS
   01. Foundations + shared navigation
   02. Home
   03. Work
   04. Play
   05. Stars: deep space + story
   06. Stars: interactive words + glitter crimes
   07. Stars: gallery + special artwork
   08. Stars: end of the universe
   09. The gravestone

   Design law:
   Clean first. Weird on purpose. The deeper you go, the stranger it gets.
   ========================================================= */


/* =========================================================
   01 — FOUNDATIONS + HOME
   Professional enough to get hired. Suspicious enough to be Josie.
   ========================================================= */

:root {
      --ink: #18151c;

      /* cousins with white */
      --paper: #fff7fc;
      --paper-2: #f8f1ff;

      /* internet candy */
      --pink: #ff3ea5;
      --blue: #315cff;
      --lime: #c7f900;
      --ice: #9eeaff;
      --purple: #8b45ff;

      /* legacy alias: old orange accents now resolve to purple */
      --orange: var(--purple);

      --border: 2px solid var(--ink);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 90% 12%, #f2e6ff 0, transparent 24rem),
        radial-gradient(circle at 5% 75%, #ffe7f4 0, transparent 22rem),
        var(--paper);
      color: var(--ink);
      font-family: "Atkinson Hyperlegible", Arial, sans-serif;
      line-height: 1.5;
    }

    a {
      color: inherit;
    }

    a:focus-visible,
    button:focus-visible {
      outline: 4px solid var(--lime);
      outline-offset: 5px;
    }


    /* ---------------- NAV ---------------- */

    header {
      border-bottom: var(--border);
      background: rgba(255, 247, 252, .92);
    }

    nav {
      max-width: 1100px;
      min-height: 72px;
      margin: auto;
      padding: 0 24px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo {
      font-family: "Space Grotesk", sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -.04em;
      text-decoration: none;
    }

    .logo:hover {
      color: var(--pink);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .nav-links a {
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 3px solid transparent;
    }

    .nav-links a:hover {
      color: var(--blue);
      border-color: var(--pink);
    }

    .nav-links .mystery {
      transition: transform .15s ease, color .15s ease;
    }

    .nav-links .mystery:hover,
    .nav-links .mystery:active {
      color: var(--pink);
      border-color: var(--lime);
      transform: rotate(-7deg) scale(1.15);
    }


    /* ---------------- MAIN ---------------- */

    main {
      max-width: 1100px;
      margin: auto;
      padding: 0 24px;
    }


    /* ---------------- HERO ---------------- */

    .hero {
      min-height: 62vh;
      padding: 90px 0 75px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .eyebrow {
      margin: 0 0 12px;
      font-family: "Courier New", monospace;
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(4rem, 13vw, 9rem);
      font-weight: 700;
      line-height: .82;
      letter-spacing: -.08em;
    }

    .verb-button {
      position: relative;
      display: inline-block;

      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;

      font: inherit;
      line-height: inherit;
      letter-spacing: inherit;

      cursor: pointer;
    }

    .verb-button::after {
      content: "";
      position: absolute;
      left: 2%;
      right: -3%;
      bottom: -11px;
      height: 16px;
      background: var(--pink);
      z-index: -1;
      transform: rotate(-1deg);

      transition:
        background .15s ease,
        height .15s ease,
        transform .15s ease;
    }

    .verb-button:hover::after {
      height: 24px;
      background: var(--lime);
      transform: rotate(1deg);
    }

    #verb {
      display: inline-block;
      min-width: 4ch;
    }

    .verb-hint {
      margin: 25px 0 0;
      font-family: "Courier New", monospace;
      font-size: .78rem;
      opacity: .62;
    }

    .intro {
      max-width: 720px;
      margin: 32px 0 0;
      font-size: clamp(1.15rem, 3vw, 1.5rem);
    }

    .intro strong {
      text-decoration: underline;
      text-decoration-color: var(--lime);
      text-decoration-thickness: 5px;
      text-underline-offset: 4px;
    }


    /* ---------------- PORTALS ---------------- */

    .portals {
      padding: 10px 0 95px;

      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(28px, 6vw, 80px);

      align-items: center;
      justify-items: center;
    }

    .portal {
      width: min(100%, 430px);
      aspect-ratio: 1;
      border: var(--border);
      border-radius: 50%;
      padding: clamp(35px, 5vw, 60px);

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      text-align: center;
      text-decoration: none;

      transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;
    }

    .portal:hover {
      transform: translate(-6px, -6px) scale(1.025);
      box-shadow: 10px 10px 0 var(--ink);
    }

    .work {
      background: var(--paper-2);
    }

    .work:hover {
      background: var(--blue);
      color: white;
    }

    .play {
      background: #fff0f8;
    }

    .play:hover {
      background: var(--pink);
    }

    .portal-label {
      font-family: "Courier New", monospace;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .portal h2 {
      margin: 14px 0 8px;
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(2.8rem, 7vw, 5.2rem);
      line-height: .9;
      letter-spacing: -.07em;
    }

    .portal p {
      max-width: 290px;
      margin: 8px 0 0;
      font-size: 1.05rem;
    }

    .arrow {
      margin-top: 18px;
      font-family: "Space Grotesk", sans-serif;
      font-size: 1.8rem;
      font-weight: 700;
    }


    /* ---------------- CURRENTLY ---------------- */

    .currently {
      position: relative;
      margin: 0 auto 90px;
      max-width: 720px;
      padding: 30px 36px;

      border: var(--border);
      border-radius: 999px;

      background: var(--paper);
      text-align: center;
    }

    .currently::before {
      content: "✦";
      position: absolute;
      top: -24px;
      right: 7%;

      width: 48px;
      height: 48px;
      border: var(--border);
      border-radius: 50%;

      display: grid;
      place-items: center;

      background: var(--lime);
      font-size: 1.25rem;
    }

    .currently span {
      font-family: "Courier New", monospace;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .currently p {
      margin: 5px 0 0;
      font-size: 1.15rem;
    }


    /* ---------------- FOOTER ---------------- */

    footer {
      padding: 28px 24px;
      border-top: var(--border);

      font-family: "Courier New", monospace;
      font-size: .85rem;

      background: var(--paper-2);
    }

    .footer-inner {
      max-width: 1100px;
      margin: auto;

      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }

    footer a:hover {
      background: var(--lime);
    }


    /* ---------------- MOBILE ---------------- */

    @media (max-width: 650px) {

      nav {
        min-height: auto;
        padding-top: 17px;
        padding-bottom: 17px;
        align-items: flex-start;
      }

      .nav-links {
        gap: 11px;
        flex-wrap: wrap;
        justify-content: flex-end;
        font-size: .8rem;
      }

      .hero {
        min-height: auto;
        padding: 68px 0 60px;
      }

      h1 {
        font-size: clamp(4rem, 22vw, 7rem);
      }

      .verb-hint {
        margin-top: 22px;
      }

      .portals {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 75px;
      }

      .portal {
        width: min(88vw, 390px);
      }

      .currently {
        border-radius: 32px;
        padding: 28px 25px;
      }
    }


    /* Touchscreens don't have meaningful hover */
    @media (hover: none) {
      .portal:active {
        transform: scale(.98);
      }
    }


    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition-duration: .01ms !important;
      }
    }


/* =========================================================
   02 — WORK: LEGACY PROJECT CARDS
   Still useful. Unlike several former overrides.
   ========================================================= */

/* PROJECTS */

.project-list {
  display: grid;
  gap: 28px;
  padding-bottom: 80px;
}

.project-card {
  --project-color: var(--pink);

  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;

  padding: clamp(28px, 5vw, 52px);

  border: var(--border);
  border-radius: 30px;

  background: var(--paper);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


/* little color stripe */

.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 10px;
  background: var(--project-color);

  transition: width .18s ease;
}

.project-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 9px 9px 0 var(--ink);
}

.project-card:hover::before {
  width: 18px;
}


.project-blue {
  --project-color: var(--blue);
}

.project-orange {
  --project-color: var(--orange);
}

.project-pink {
  --project-color: var(--pink);
}


/* LEFT SIDE */

.project-number {
  margin: 0 0 12px;

  font-family: "Courier New", monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.project-heading h2 {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.project-question {
  max-width: 580px;
  margin: 22px 0 0;

  font-size: 1.18rem;
}


/* RIGHT SIDE */

.project-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.project-details p {
  margin: 0;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-tags span {
  padding: 5px 11px;

  border: 1.5px solid var(--ink);
  border-radius: 999px;

  background: var(--paper-2);

  font-family: "Courier New", monospace;
  font-size: .75rem;
  font-weight: 700;
}


/* BUTTONS */

.project-button {
  align-self: flex-start;

  display: inline-block;
  padding: 9px 15px;

  border: var(--border);
  border-radius: 999px;

  background: var(--paper);
  color: var(--ink);

  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-decoration: none;

  transition:
    transform .15s ease,
    background .15s ease;
}

a.project-button:hover {
  background: var(--project-color);
  transform: rotate(-1deg);
}

.project-blue a.project-button:hover {
  color: white;
}

.project-coming {
  opacity: .7;
}


/* IN PROGRESS */

.project-status {
  display: inline-block;

  margin-bottom: 15px;
  padding: 5px 11px;

  border: var(--border);
  border-radius: 999px;

  background: var(--lime);

  font-family: "Courier New", monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
}


/* GITHUB CALLOUT */

.github-callout {
  margin-bottom: 90px;
  padding: clamp(28px, 5vw, 45px);

  border: var(--border);
  border-radius: 30px;

  background: var(--ink);
  color: white;
}

.github-callout h2 {
  margin: 0 0 10px;

  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -.04em;
}

.github-callout p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 0 22px;
}

.github-callout a {
  display: inline-block;

  padding: 9px 14px;
  border-radius: 999px;

  background: var(--lime);
  color: var(--ink);

  font-weight: 700;
  text-decoration: none;

  transition:
    transform .15s ease,
    background .15s ease;
}

.github-callout a:hover {
  background: var(--pink);
  transform: rotate(-1deg);
}


/* WORK MOBILE */

@media (max-width: 700px) {

  .work-intro {
    padding: 60px 0 45px;
  }

  .project-card {
    grid-template-columns: 1fr;
    gap: 28px;

    border-radius: 24px;
  }

  .project-card::before {
    width: 7px;
  }

  .project-card:hover::before {
    width: 11px;
  }

  .project-heading h2 {
    font-size: clamp(2.2rem, 11vw, 3.5rem);
  }

  .github-callout {
    margin-bottom: 60px;
    border-radius: 24px;
  }
}


/* =========================================================
   03 — WORK: INTERNET CANDY IN A SUIT
   The résumé has a pulse.
   ========================================================= */

/* ========================================
   WORK PAGE
   Internet Candy in a Suit
   ======================================== */

.work-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5rem 2rem 7rem;
}


/* ---------- INTRO ---------- */

.work-intro {
    max-width: 760px;
    margin-bottom: 5rem;
}

.work-title {
    font-size: clamp(5rem, 13vw, 10rem);
    line-height: 0.82;
    letter-spacing: -0.07em;
    margin: 0.2rem 0 2rem;
}

.work-lede {
    max-width: 680px;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.55;
}


/* ---------- SKILL GRID ---------- */

.skill-world {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 6rem;
}

.skill-block {
    position: relative;
    min-height: 360px;
    padding: 2rem;
    border: var(--border);
    border-radius: 28px;
    background: #fffafd;
    box-shadow: 8px 8px 0 var(--ink);
    overflow: hidden;

    display: flex;
    flex-direction: column;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.skill-block:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 var(--ink);
}

.skill-number {
    margin: 0 0 2.5rem;
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.skill-block h2 {
    max-width: 440px;
    margin: 0 0 1.25rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.skill-block > p:not(.skill-number) {
    max-width: 520px;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.55;
}


/* ---------- CANDY STRIPES ---------- */

.skill-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
}

.skill-data::before {
    background: var(--blue);
}

.skill-systems::before {
    background: var(--pink);
}

.skill-people::before {
    background: var(--purple);
}

.skill-figure::before {
    background: var(--lime);
}


/* ---------- TAGS ---------- */

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: auto;
}

.skill-tags span {
    display: inline-block;
    padding: 0.45rem 0.7rem;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}


/* tiny controlled candy */

.skill-data .skill-tags span:nth-child(3n + 1) {
    background: #dce5ff;
}

.skill-systems .skill-tags span:nth-child(3n + 1) {
    background: #ffd6ec;
}

.skill-people .skill-tags span:nth-child(3n + 1) {
    background: #eadcff;
}

.skill-figure .skill-tags span:nth-child(3n + 1) {
    background: #efffb0;
}


/* ---------- RECEIPTS ---------- */

.receipts {
    position: relative;
    padding: clamp(2rem, 5vw, 4rem);
    border: var(--border);
    border-radius: 30px;
    background: var(--ink);
    color: white;
    box-shadow: 10px 10px 0 var(--blue);
    overflow: hidden;
}

.receipts::after {
    content: "✦";
    position: absolute;
    top: -0.2em;
    right: 0.15em;
    color: var(--pink);
    font-size: clamp(7rem, 18vw, 13rem);
    line-height: 1;
    transform: rotate(12deg);
    opacity: 0.95;
}

.receipts .eyebrow {
    position: relative;
    z-index: 1;
    color: var(--lime);
}

.receipts h2 {
    position: relative;
    z-index: 1;
    margin: 0.3rem 0 1rem;
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.055em;
}

.receipts > p {
    position: relative;
    z-index: 1;
}

.receipt-links {
    position: relative;
    z-index: 1;

    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;

    margin-top: 2rem;
}

.receipt-links a {
    display: inline-block;
    padding: 0.8rem 1rem;

    border: 2px solid white;
    border-radius: 999px;

    color: white;
    text-decoration: none;
    font-weight: 700;

    transition:
        background 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.receipt-links a:hover,
.receipt-links a:focus-visible {
    background: var(--lime);
    color: var(--ink);
    border-color: var(--lime);
    transform: translateY(-3px);
}


/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

    .work-main {
        padding: 3.5rem 1.25rem 5rem;
    }

    .work-intro {
        margin-bottom: 3.5rem;
    }

    .skill-world {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 4rem;
    }

    .skill-block {
        min-height: auto;
        padding: 1.6rem;
        border-radius: 22px;
    }

    .skill-block h2 {
        font-size: 2.5rem;
    }

    .skill-number {
        margin-bottom: 2rem;
    }

    .skill-tags {
        margin-top: 1rem;
    }

    .receipts {
        border-radius: 22px;
    }

    .receipts::after {
        opacity: 0.35;
    }
}


/* don't make motion mandatory */

@media (prefers-reduced-motion: reduce) {

    .skill-block,
    .receipt-links a {
        transition: none;
    }

    .skill-block:hover {
        transform: none;
    }
}

/* ========================================
   WORK HISTORY + CREDENTIALS
   ======================================== */

.work-history {
    margin: 0 0 6rem;
}


/* ---------- EXPERIENCE HEADING ---------- */

.history-heading {
    margin-bottom: 2.5rem;
}

.history-heading h2,
.credentials-heading h2 {
    margin: 0.25rem 0 0;
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.055em;
}


/* ---------- EXPERIENCE LIST ---------- */

.history-list {
    border-top: var(--border);
}

.history-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;

    padding: 2rem 0;
    border-bottom: var(--border);
}

.history-label span {
    display: inline-block;

    padding: 0.45rem 0.7rem;

    border: 1.5px solid var(--ink);
    border-radius: 999px;

    background: #dce5ff;

    font-family: monospace;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.history-item:nth-child(2) .history-label span {
    background: #ffd6ec;
}

.history-item:nth-child(3) .history-label span {
    background: #eadcff;
}

.history-item:nth-child(4) .history-label span {
    background: #efffb0;
}

.history-copy h3 {
    margin: 0 0 0.65rem;

    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.history-copy p {
    max-width: 680px;
    margin: 0;

    font-size: 0.95rem;
    line-height: 1.55;
}


/* ---------- CREDENTIALS ---------- */

.credentials {
    margin-top: 6rem;
}

.credentials-heading {
    margin-bottom: 2.5rem;
}

.credential-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.credential {
    grid-column: span 2;

    padding: 1.5rem;

    border: var(--border);
    border-radius: 20px;

    background: #fffafd;
}

.credential:nth-child(1),
.credential:nth-child(2) {
    grid-column: span 3;
}

.credential span {
    display: block;
    margin-bottom: 1rem;

    font-family: monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.credential strong {
    display: block;

    font-size: 1.15rem;
    line-height: 1.2;
}

.credential p {
    margin: 0.65rem 0 0;

    font-size: 0.85rem;
    line-height: 1.4;
}


/* candy, but employed */

.credential:nth-child(1) {
    box-shadow: 5px 5px 0 var(--blue);
}

.credential:nth-child(2) {
    box-shadow: 5px 5px 0 var(--pink);
}

.credential:nth-child(3) {
    box-shadow: 5px 5px 0 var(--purple);
}

.credential:nth-child(4) {
    box-shadow: 5px 5px 0 var(--lime);
}

.credential:nth-child(5) {
    box-shadow: 5px 5px 0 #9eeaff;
}


/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

    .work-history {
        margin-bottom: 4rem;
    }

    .history-item {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.6rem 0;
    }

    .credentials {
        margin-top: 4rem;
    }

    .credential-grid {
        grid-template-columns: 1fr;
    }

    .credential,
    .credential:nth-child(1),
    .credential:nth-child(2) {
        grid-column: auto;
    }


/* =========================================================
   04 — PLAY
   Adult supervision has left the building.
   ========================================================= */

/* ========================================
   PLAY LANDING PAGE
   ======================================== */

.play-main {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 100px;
}


/* INTRO */

.play-intro {
    position: relative;
    margin-bottom: 65px;
}

.play-title {
    margin: 5px 0 10px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(5rem, 13vw, 10rem);
    line-height: 0.85;
    letter-spacing: -0.08em;
}

.play-star {
    display: inline-block;
    margin-left: 0.08em;
    color: var(--pink);
    transform: rotate(8deg);
}

.play-lede {
    max-width: 700px;
    margin-top: 28px;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.play-sublede {
    max-width: 650px;
    font-size: 1.1rem;
    line-height: 1.6;
}


/* STARS PORTAL */

.play-feature {
    position: relative;
    display: block;
    overflow: hidden;

    padding: clamp(35px, 6vw, 75px);

    color: var(--ink);
    text-decoration: none;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(199, 249, 0, 0.75) 0 5%,
            transparent 5.5%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(255, 62, 165, 0.38) 0 15%,
            transparent 15.5%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(49, 92, 255, 0.32) 0 18%,
            transparent 18.5%
        ),
        var(--paper-2);

    border: var(--border);
    border-radius: 45px;

    box-shadow: 12px 12px 0 var(--ink);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.play-feature:hover,
.play-feature:focus-visible {
    transform: translate(-6px, -6px);
    box-shadow: 18px 18px 0 var(--ink);
}


/* DECORATIVE CHAOS */

.play-feature-decoration {
    position: absolute;
    top: 20px;
    right: 30px;

    font-size: clamp(1.4rem, 4vw, 3rem);
    letter-spacing: 0.15em;

    color: var(--purple);

    transform: rotate(5deg);

    pointer-events: none;
}


/* CONTENT */

.play-feature-label {
    margin: 0 0 25px;

    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.play-feature h2 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(4rem, 11vw, 8rem);
    line-height: 0.85;
    letter-spacing: -0.07em;

    color: var(--blue);
}

.play-feature-description {
    max-width: 600px;
    margin: 35px 0 30px;

    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.45;
}


/* TAG CANDY */

.play-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 40px;
}

.play-feature-tags span {
    padding: 7px 12px;

    border: 2px solid var(--ink);
    border-radius: 999px;

    background: var(--paper);

    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
}

.play-feature-tags span:nth-child(1) {
    background: var(--pink);
}

.play-feature-tags span:nth-child(2) {
    background: var(--blue);
    color: white;
}

.play-feature-tags span:nth-child(3) {
    background: var(--lime);
}

.play-feature-tags span:nth-child(4) {
    background: var(--orange);
}


/* ENTER */

.play-enter {
    display: inline-block;

    padding: 13px 18px;

    border: 2px solid var(--ink);
    border-radius: 12px;

    background: var(--ink);
    color: white;

    font-family: monospace;
    font-weight: 700;

    transition:
        transform 150ms ease,
        background 150ms ease,
        color 150ms ease;
}

.play-feature:hover .play-enter {
    transform: rotate(-2deg) scale(1.04);
    background: var(--lime);
    color: var(--ink);
}


/* MORE NONSENSE */

.play-coming-soon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;

    margin-top: 75px;

    font-family: monospace;
    text-align: center;
}

.play-coming-soon span {
    color: var(--pink);
    font-size: 1.5rem;
}


/* MOBILE */

@media (max-width: 650px) {

    .play-main {
        width: min(100% - 28px, 1100px);
        padding-top: 45px;
    }

    .play-title {
        font-size: clamp(4.5rem, 25vw, 7rem);
    }

    .play-feature {
        padding: 35px 25px;
        border-radius: 28px;
        box-shadow: 7px 7px 0 var(--ink);
    }

    .play-feature:hover,
    .play-feature:focus-visible {
        transform: translate(-3px, -3px);
        box-shadow: 10px 10px 0 var(--ink);
    }

    .play-feature-decoration {
        top: 15px;
        right: 15px;
        opacity: 0.7;
    }

}

/* ========================================
   PLAY AFTER DARK
   ======================================== */

.play-page {
    background: #111016;
    color: #fff7fc;
}

.play-page header {
    background: #111016;
    border-color: #fff7fc;
}

.play-page nav a {
    color: #fff7fc;
}

.play-page .logo {
    color: #fff7fc;
}

.play-page .eyebrow {
    color: #d7ff45;
}

.play-page .play-title {
    color: #fff7fc;
}

.play-page .play-star {
    color: #ff3ea5;
}

.play-page .play-lede {
    color: #fff7fc;
}

.play-page .play-sublede {
    color: #ffb3e6;
}

.play-page footer {
    background: #111016;
    color: #fff7fc;
    border-color: #fff7fc;
}

.play-page footer a {
    color: #d7ff45;
}
/* ========================================
   PLAY: TASTEFUL VANDALISM
   ======================================== */

.play-page {
    position: relative;
    overflow-x: hidden;
}

.play-sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.play-page main {
    position: relative;
    z-index: 1;
}

.sky-star {
    position: absolute;
    line-height: 1;
    user-select: none;
    opacity: 0.9;
}

/* RIGHT-SIDE CONSTELLATION */

.s1 {
    top: 11%;
    right: 9%;
    font-size: 5rem;
    color: #ff3ea5;
    transform: rotate(12deg);
}

.s2 {
    top: 19%;
    right: 21%;
    font-size: 2.3rem;
    color: #c7f900;
}

.s3 {
    top: 29%;
    right: 6%;
    font-size: 3.4rem;
    color: #8b45ff;
    transform: rotate(-15deg);
}

.s4 {
    top: 38%;
    right: 17%;
    font-size: 1.7rem;
    color: #45caff;
}

.s5 {
    top: 48%;
    right: 4%;
    font-size: 6rem;
    color: #315cff;
    opacity: 0.7;
}

.s6 {
    top: 57%;
    right: 23%;
    font-size: 3rem;
    color: #ff71c8;
}

/* A LITTLE CHAOS ON THE LEFT */

.s7 {
    top: 34%;
    left: 5%;
    font-size: 2.5rem;
    color: #9eeaff;
}

.s8 {
    top: 53%;
    left: 8%;
    font-size: 4rem;
    color: #ff3ea5;
    opacity: 0.7;
}

.s9 {
    top: 68%;
    right: 11%;
    font-size: 2rem;
    color: #c7f900;
}

.s10 {
    top: 75%;
    left: 4%;
    font-size: 2rem;
    color: #8b45ff;
}

.s11 {
    top: 82%;
    right: 27%;
    font-size: 3.5rem;
    color: #ff3ea5;
}

.s12 {
    top: 88%;
    right: 7%;
    font-size: 4rem;
    color: #45caff;
}


/* =========================================================
   05 — STARS: DEEP SPACE + STORY
   Here be telescopes, stardust, and feelings.
   ========================================================= */

}/* =========================================================
   STARS — DEEP SPACE BACKGROUND
   ========================================================= */

.stars-page {
    background:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(69, 93, 255, 0.13) 0%,
            rgba(69, 93, 255, 0.05) 16%,
            transparent 38%
        ),
        radial-gradient(
            ellipse at 88% 32%,
            rgba(170, 76, 255, 0.12) 0%,
            rgba(170, 76, 255, 0.04) 18%,
            transparent 40%
        ),
        radial-gradient(
            ellipse at 35% 72%,
            rgba(255, 62, 165, 0.07) 0%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 78% 88%,
            rgba(85, 205, 255, 0.08) 0%,
            transparent 32%
        ),
        #07070b;

    color: #f8f5ff;
    min-height: 100vh;
    position: relative;
}

/* tiny distant stars */
/* scattered distant stars — deliberately irregular */
.stars-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background-image:
        radial-gradient(circle at 4% 8%,  #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 11% 29%, #9eeaff 0 1px, transparent 1.5px),
        radial-gradient(circle at 17% 13%, #fff 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 23% 61%, #c9a7ff 0 1px, transparent 1.6px),
        radial-gradient(circle at 29% 22%, #fff 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 35% 78%, #9eeaff 0 1px, transparent 1.5px),
        radial-gradient(circle at 42% 7%,  #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 48% 47%, #c9a7ff 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 55% 18%, #fff 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 61% 69%, #9eeaff 0 1px, transparent 1.6px),
        radial-gradient(circle at 68% 35%, #fff 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 74% 86%, #c9a7ff 0 1px, transparent 1.6px),
        radial-gradient(circle at 81% 11%, #fff 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 87% 54%, #9eeaff 0 1px, transparent 1.5px),
        radial-gradient(circle at 93% 24%, #fff 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 97% 76%, #c9a7ff 0 1px, transparent 1.6px),

        radial-gradient(circle at 7% 72%,  #fff 0 0.7px, transparent 1.2px),
        radial-gradient(circle at 19% 91%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 32% 39%, #9eeaff 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 46% 94%, #fff 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 58% 52%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 71% 4%,  #c9a7ff 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 84% 73%, #fff 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 95% 93%, #9eeaff 0 1px, transparent 1.5px);

    opacity: .5;
}
/* keep the actual page above space */
.stars-page header,
.stars-page main,
.stars-page footer {
    position: relative;
    z-index: 1;
}

/* =========================================================
   STARS — FLOATING STICKY HEADER
   ========================================================= */

.stars-page header {
    position: sticky;
    top: 0;
    z-index: 100;
    
    background: rgba(7, 7, 11, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.stars-page header nav {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.stars-page header .logo,
.stars-page header .nav-links a {
    color: rgba(255, 255, 255, 0.82);
}

.stars-page header .logo:hover,
.stars-page header .nav-links a:hover {
    color: #ffffff;
}

.stars-page header .nav-links .active {
    color: #c9a7ff;
}

.stars-page header .mystery {
    color: #9eeaff;
}

/* =========================================================
   STARS — ARTIST STATEMENT + ASCII UNIVERSE
   ========================================================= */


/* ---------- INTRO LAYOUT ---------- */

.stars-page .stars-intro {
    max-width: 980px;
    margin: 0 auto;
    padding: 4rem 2rem 5rem;
}

.stars-page .stars-story {
    max-width: 760px;
    margin-top: 3rem;
}

.stars-page .stars-story p {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.75;
    margin: 0 0 1.75rem;
    color: rgba(255, 255, 255, 0.82);
}


/* ---------- ASCII STARS TITLE ---------- */

.stars-title-art {
    margin: 1.25rem 0 2.5rem;
    overflow: visible;
}

.stars-title-art pre {
    display: inline-block;
    margin: 0;

    font-family: "Megrim", "Space Grotesk", sans-serif;
    font-size: clamp(1.25rem, 3.2vw, 2.75rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.08em;

    color: #f9f6ff;
    background: transparent;

    overflow: visible;
    white-space: pre;

    text-shadow:
        0 0 12px rgba(201, 167, 255, 0.22),
        0 0 28px rgba(158, 234, 255, 0.10);
}


/* ---------- GLITTERY IMPOSSIBLE BEAUTY ---------- */

.cosmic-shimmer {
    position: relative;
    display: inline;
    font-weight: 700;

    background: linear-gradient(
        110deg,
        #ffffff 0%,
        #ffffff 30%,
        #9eeaff 42%,
        #c9a7ff 49%,
        #ff71c8 55%,
        #ffffff 68%,
        #ffffff 100%
    );

    background-size: 250% auto;
    background-position: 100% center;

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;

    transition:
        background-position 900ms ease,
        text-shadow 500ms ease;
}

.cosmic-shimmer:hover {
    background-position: 0% center;

    text-shadow:
        0 0 8px rgba(158, 234, 255, 0.35),
        0 0 14px rgba(201, 167, 255, 0.28),
        0 0 20px rgba(255, 113, 200, 0.20);
}


/* ---------- THE UNSEEN ---------- */

.unseen-question {
    position: relative;
    display: block;

    min-height: 3rem;
    margin: 2.75rem 0 3rem;
    padding: 0;

    border: 0;
    background: transparent;

    color: #ffffff;
    font: inherit;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;

    cursor: pointer;
    text-align: left;
}

.unseen-visible,
.unseen-reveal {
    transition:
        opacity 450ms ease,
        filter 600ms ease,
        letter-spacing 600ms ease;
}

.unseen-visible {
    opacity: 1;
}

.unseen-reveal {
    position: absolute;
    left: 0;
    top: 0;

    opacity: 0;
    color: #9eeaff;

    letter-spacing: 0.15em;
    text-shadow:
        0 0 10px rgba(158, 234, 255, 0.45),
        0 0 25px rgba(201, 167, 255, 0.25);
}

.unseen-question:hover .unseen-visible,
.unseen-question:focus-visible .unseen-visible {
    opacity: 0;
    filter: blur(7px);
    letter-spacing: 0.12em;
}

.unseen-question:hover .unseen-reveal,
.unseen-question:focus-visible .unseen-reveal {
    opacity: 1;
    letter-spacing: 0.25em;
}


/* ---------- POSSIBILITY / PERSPECTIVE / PURPOSE ---------- */

.three-p {
    margin: 3.5rem 0 !important;

    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    line-height: 1.05 !important;
}

.three-p span {
    display: block;
    font-size: clamp(2rem, 5vw, 4.75rem);
}

.three-p span:nth-child(1) {
    color: #ff71c8;
}

.three-p span:nth-child(2) {
    color: #c9a7ff;
    margin-left: 8%;
}

.three-p span:nth-child(3) {
    color: #9eeaff;
    margin-left: 16%;
}


/* ---------- STARDUST ENDING ---------- */

.stardust-statement {
    margin: 4rem 0 !important;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
    font-weight: 700;
    line-height: 1.1 !important;

    color: #ffffff !important;
}

.stardust-statement span {
    display: block;

    color: #c9a7ff;

    text-shadow:
        0 0 15px rgba(201, 167, 255, 0.18);
}


/* ---------- SOMEDAY ---------- */

.stars-page .stars-someday {
    margin-top: 3rem !important;

    font-family: "Space Grotesk", sans-serif;
    font-style: italic;
    font-size: 1rem !important;

    color: rgba(255, 255, 255, 0.58) !important;
}


/* ---------- FLIP INSTRUCTION ---------- */

.stars-page .flip-instruction {
    margin-top: 4rem;

    color: #d7ff45;

    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .stars-page .stars-intro {
        padding: 3rem 1.25rem 4rem;
    }

    .stars-title-art pre {
        font-size: clamp(0.9rem, 4vw, 1.4rem);
    }

    .three-p span:nth-child(2),
    .three-p span:nth-child(3) {
        margin-left: 0;
    }

    .three-p span {
        margin-bottom: 0.3rem;
    }
}


/* ---------- DON'T MAKE PEOPLE SICK ---------- */

@media (prefers-reduced-motion: reduce) {

    .cosmic-shimmer,
    .unseen-visible,
    .unseen-reveal {
        transition: none;
    }
}
/* =========================================================
   STARS — CELESTIAL TYPOGRAPHY
   ========================================================= */
/* =========================================================
   STARS — LET THE WORDS FLOAT
   ========================================================= */

.stars-page .stars-story {
    max-width: 760px;
    margin-top: 6rem;
}

/* more space between individual thoughts */
.stars-page .stars-story > p {
    margin-bottom: 2.75rem;
}

/* first paragraph gets to introduce the whole thing */
.stars-page .stars-story > p:first-child {
    max-width: 680px;
}

/* "And we're here..." drifts inward a little */
.stars-page .stars-story > p:nth-child(2) {
    max-width: 620px;
    margin-left: 7%;
}

/* technology / unseen paragraph */
.stars-page .stars-story > p:nth-child(3) {
    max-width: 650px;
}


/* make the secret question feel isolated */
.stars-page .unseen-question {
    margin-top: 4.5rem;
    margin-bottom: 5rem;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.4rem, 2.3vw, 1.8rem);
    font-weight: 600;
}


/* give the title constellation more breathing room */
.stars-page .stars-title-art {
    margin-top: 2rem;
    margin-bottom: 7rem;
}

/* ---------- DELICATE ASCII CONSTELLATION ---------- */

.stars-page .ascii-stars {
    margin: 0;
    padding: 0;

    font-family: "Courier New", monospace;
    font-size: clamp(0.75rem, 1.25vw, 1rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.12em;

    color: rgba(248, 245, 255, 0.82);
    background: transparent;

    text-shadow:
        0 0 8px rgba(201, 167, 255, 0.35);

    white-space: pre;
    overflow: visible;
}

.stars-page .ascii-top {
    margin-bottom: 0.4rem;
}

.stars-page .ascii-bottom {
    margin-top: 0.4rem;
}


/* ---------- THE BIG CELESTIAL ONE ---------- */

.stars-page .celestial-title {
    margin: 0;

    font-family: "Megrim", sans-serif;
    font-size: clamp(6rem, 15vw, 11rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.03em;

    color: #f8f5ff;

    text-shadow:
        0 0 8px rgba(255,255,255,0.18),
        0 0 24px rgba(201,167,255,0.14);
}

.stars-page .celestial-title .star-title {
    color: #ff3ea5;

    font-family: "Space Grotesk", sans-serif;
    font-size: 0.55em;

    vertical-align: 0.2em;

    cursor: pointer;

    text-shadow:
        0 0 12px rgba(255,62,165,0.40),
        0 0 30px rgba(255,62,165,0.18);
}

.stars-page .ascii-bottom {
    margin-top: 0.6rem;
    margin-left: 1.5rem;
    margin-bottom: 0;

    line-height: 1.75;

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 30%,
        rgba(0,0,0,.8) 55%,
        rgba(0,0,0,.35) 82%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 30%,
        rgba(0,0,0,.8) 55%,
        rgba(0,0,0,.35) 82%,
        transparent 100%
    );
}
/* ---------- THE STORY ---------- */

.stars-page .stars-story p {
    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 500;
    line-height: 1.55;

    color: rgba(248, 245, 255, 0.88);

    max-width: 720px;
}


/* ---------- EMPHASIS INSIDE THE STORY ---------- */

.stars-page .stars-story strong {
    font-weight: 700;
    color: #ffffff;
}


/* shimmer keeps the celestial serif shape */

.stars-page .cosmic-shimmer {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
}


/* ---------- THREE P's ---------- */

.stars-page .three-p {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 600;
}


/* ---------- BIG STARDUST ENDING ---------- */

.stars-page .stardust-statement {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
}


/* ---------- FUNCTIONAL STUFF STAYS CLEAN ---------- */

.stars-page .eyebrow,
.stars-page .back-link,
.stars-page .flip-instruction {
    font-family: "Atkinson Hyperlegible", sans-serif;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .stars-page .celestial-title {
        font-size: clamp(4.5rem, 22vw, 7rem);
    }

    .stars-page .ascii-stars {
        font-size: 0.7rem;
    }
}


/* =========================================================
   06 — STARS: THE THREE P’S
   Possibility. Perspective. Purpose. Also: CSS.
   ========================================================= */

/* =========================================================
   THREE P's — FIX THE CSS GHOSTS
   ========================================================= */

.stars-page .three-p {
    display: block;
    margin: 6rem 0 !important;

    font-family: "Megrim", sans-serif;
    font-style: normal;
}


/* -----------------------------------------
   POSSIBILITY
   ----------------------------------------- */

.stars-page .three-p .possibility-word {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;

    margin: 0;

    font-family: "Megrim", sans-serif;
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: 1;

    color: #ff71c8;
}

.stars-page .three-p .possibility-word span {
    display: inline-block;

    margin: 0;
    padding: 0;

    font-family: inherit;
    font-size: 1em;
    line-height: 1;

    color: inherit;

    transition:
        transform 250ms ease,
        color 250ms ease,
        text-shadow 250ms ease;
}


/* different possibilities for different letters */

.stars-page .possibility-word span:hover {
    color: #9eeaff;

    transform:
        translateY(-0.18em)
        rotate(8deg)
        scale(1.3);

    text-shadow:
        0 0 12px rgba(158, 234, 255, .55);
}

.stars-page .possibility-word span:nth-child(3n):hover {
    color: #c9a7ff;

    transform:
        translateY(.15em)
        rotate(-12deg)
        scale(.8);
}

.stars-page .possibility-word span:nth-child(4n):hover {
    color: #d7ff45;

    transform:
        translateY(-.25em)
        rotate(15deg)
        scale(1.5);
}


/* -----------------------------------------
   PERSPECTIVE
   ----------------------------------------- */

.stars-page .three-p .perspective-word {
    appearance: none;
    -webkit-appearance: none;

    display: block;

    width: auto;
    min-width: 0;

    margin: 5rem 0 5rem 18%;
    padding: 0;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    background: transparent;

    font-family: "Megrim", sans-serif;
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1;

    color: #c9a7ff;

    cursor: pointer;
}


/* -----------------------------------------
   PURPOSE
   ----------------------------------------- */

.stars-page .three-p .purpose-word {
    appearance: none;
    -webkit-appearance: none;

    display: block;

    width: auto;
    min-width: 0;

    margin: 5rem 0 0 7%;
    padding: 0;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    background: transparent;

    font-family: "Megrim", sans-serif;
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 400;
    line-height: 1;

    color: #9eeaff;

    cursor: pointer;
}

.stars-page .three-p .purpose-word span {
    display: inline;

    margin: 0;
    padding: 0;

    font: inherit;
    color: inherit;
}


/* -----------------------------------------
   HOVER GLOW
   ----------------------------------------- */

.stars-page .perspective-word:hover,
.stars-page .purpose-word:hover {
    background: transparent;
    box-shadow: none;

    color: #ffffff;

    text-shadow:
        0 0 10px rgba(255,255,255,.25),
        0 0 25px rgba(201,167,255,.25);
}


/* keyboard accessibility */

.stars-page .perspective-word:focus-visible,
.stars-page .purpose-word:focus-visible {
    outline: 1px solid #9eeaff;
    outline-offset: 10px;
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 700px) {

    .stars-page .three-p .possibility-word {
        font-size: clamp(2.4rem, 11vw, 4rem);
    }

    .stars-page .three-p .perspective-word,
    .stars-page .three-p .purpose-word {
        margin-left: 0;
    }
}



.stars-page .three-p .possibility-word {
    gap: 0;
    letter-spacing: 0;
}

.stars-page .three-p .possibility-word span {
    margin-right: -0.02em;
}



/* =========================================================
   PERSPECTIVE — CHANGE YOUR PERSPECTIVE
   ========================================================= */

.stars-page .perspective-word {
    transform-origin: left center;

    transition:
        transform 600ms ease,
        opacity 600ms ease,
        letter-spacing 600ms ease,
        color 400ms ease;
}


/* tiny / distant */

.stars-page .perspective-word.perspective-tiny {
    transform: scale(.35);
    opacity: .55;
    letter-spacing: .3em;
}


/* OH HELLO */

.stars-page .perspective-word.perspective-huge {
    transform: scale(1.65);
    color: #ffffff;

    text-shadow:
        0 0 15px rgba(201,167,255,.45),
        0 0 40px rgba(158,234,255,.20);
}


/* shifted / strange */

.stars-page .perspective-word.perspective-far {
    transform:
        translateX(45%)
        scale(.7);

    opacity: .7;
    letter-spacing: .18em;
}


/* =========================================================
   PURPOSE — EXISTENTIAL BUTTON
   ========================================================= */

.stars-page .purpose-word {
    transition:
        color 400ms ease,
        letter-spacing 500ms ease,
        transform 500ms ease,
        text-shadow 500ms ease;
}

.stars-page .purpose-word.purpose-reveal {
    animation: purpose-arrives 650ms ease;
}

@keyframes purpose-arrives {

    0% {
        opacity: 0;
        transform: translateY(.35em);
        filter: blur(7px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* =========================================================
   07 — GLITTER CRIMES
   No jury would convict us.
   ========================================================= */

/* ========================================
   GLITTER CRIMES
   ======================================== */

.click-sparkle {
  position: fixed;
  z-index: 9999;

  pointer-events: none;
  user-select: none;

  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;

  transform: translate(-50%, -50%);
  animation: sparkle-crime 1200ms cubic-bezier(.15,.75,.25,1) forwards;
}

@keyframes sparkle-crime {

  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(.4)
      rotate(0deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--sparkle-x)),
        calc(-50% + var(--sparkle-y))
      )
      scale(.7)
      rotate(var(--sparkle-rotate));
  }
}


/* make the giant star LOOK suspiciously clickable */

.star-title {
  cursor: pointer;
  user-select: none;
}


/* responsible glitter citizenship */

@media (prefers-reduced-motion: reduce) {

  .click-sparkle {
    display: none;
  }

}


/* =========================================================
   08 — STARS: GALLERY + SPECIAL ART
   The art decides its shape. We no longer negotiate with aspect-ratio prisons.
   ========================================================= */

/* =========================================================
   STARS — THE GALLERY
   The art decides its shape. We have learned this lesson.
   ========================================================= */

.stars-page .star-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;

    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

/* ---------- STANDARD FLIP ART ---------- */

.stars-page .star-card {
    appearance: none;
    -webkit-appearance: none;

    display: block;
    position: relative;

    width: min(100%, 900px);
    height: auto;
    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    perspective: 1600px;
}

.stars-page .star-card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: auto;

    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(.2, .75, .25, 1.15);
}

.stars-page .star-card.is-flipped .star-card-inner {
    transform: rotateY(180deg);
}

.stars-page .star-face {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    overflow: hidden;

    border-radius: 1.5rem;
    background: #07070b;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* The front participates in layout and establishes natural card height. */
.stars-page .star-front {
    position: relative;
}

/* The back occupies the exact footprint established by the front. */
.stars-page .star-back {
    position: absolute;
    inset: 0;
    height: 100%;
    transform: rotateY(180deg);
}

.stars-page .star-face > img {
    display: block;
    width: 100%;
    height: auto;
}

.stars-page .star-back > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.stars-page .star-card:hover .star-card-inner {
    transform: translateY(-6px) rotate(-.5deg);
}

.stars-page .star-card.is-flipped:hover .star-card-inner {
    transform: translateY(-6px) rotateY(180deg) rotate(.5deg);
}

/* ---------- MULTIPAGE ART ----------
   e.e. cummings, Jocelyn, and any future tiny space-books. */

.stars-page .star-multipage {
    width: min(100%, 900px);
    margin: 0 auto;
    text-align: center;
}

.stars-page .multipage-art {
    appearance: none;
    -webkit-appearance: none;

    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;

    border: var(--border);
    border-radius: 1.5rem;
    background: #07070b;
    box-shadow: 8px 8px 0 rgba(201, 167, 255, .22);

    overflow: hidden;
    cursor: pointer;
}

.stars-page .multipage-page {
    position: absolute;
    inset: 0;
    width: 100%;

    opacity: 0;
    pointer-events: none;
    transform: translateX(2%);

    transition:
        opacity 450ms ease,
        transform 550ms ease;
}

/* Active page enters normal layout, so its image decides the container height. */
.stars-page .multipage-page.is-active {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.stars-page .multipage-page img {
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
}

.stars-page .multipage-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;

    min-height: 2rem;
    margin-top: 1.25rem;

    font-family: "Megrim", sans-serif;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, .35);
}

.stars-page .multipage-dots span {
    transition:
        color 300ms ease,
        transform 300ms ease,
        text-shadow 300ms ease;
}

.stars-page .multipage-dots span.is-active {
    color: #ff71c8;
    transform: scale(1.3);
    text-shadow: 0 0 12px rgba(255, 62, 165, .5);
}

/* ---------------------------------------------------------
   KALPANA CHAWLA
   A triptych deserves better than being treated like
   three PNGs in a trench coat.
   --------------------------------------------------------- */

.stars-page .kalpana-piece {
    width: min(92vw, 1400px);
    max-width: none;

    align-self: center;

    position: static;
    left: auto;
    transform: none;

    margin: 3rem 0 6rem;
}

/* THE THREE WINDOWS */

.stars-page .kalpana-triptych {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    width: 100%;
    max-width: none;

    gap: 14px;
}


/* individual stained-glass-ish panels */

.stars-page .kalpana-panel {
    position: relative;

    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 1rem;

    overflow: hidden;
    background: #07070b;
}


.stars-page .kalpana-panel img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: inherit;
}


/* THE SECRET DOOR */

.stars-page button.kalpana-center {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    transition:
        transform 250ms ease,
        box-shadow 250ms ease;
}


.stars-page button.kalpana-center:hover {
    transform: translateY(-4px);

    box-shadow:
        0 0 0 1px rgba(158, 234, 255, .4),
        0 0 28px rgba(158, 234, 255, .18);
}


.stars-page button.kalpana-center:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 5px;
}


/* tiny clue that the middle panel knows something */

.stars-page .kalpana-hint {
    position: absolute;
    right: .75rem;
    bottom: .55rem;

    color: rgba(255,255,255,.7);
    font-size: 1rem;

    text-shadow:
        0 0 10px rgba(158,234,255,.8);

    transition:
        transform 350ms ease,
        color 350ms ease;
}


.stars-page .kalpana-center:hover .kalpana-hint {
    color: #ffffff;
    transform: rotate(90deg) scale(1.25);
}


/* THE THING BEHIND THE THING */

.stars-page .kalpana-reveal {
    display: grid;
    grid-template-rows: 0fr;

    width: 100%;

    opacity: 0;
    transform: translateY(-1rem);

    transition:
        grid-template-rows 650ms cubic-bezier(.2,.8,.2,1),
        opacity 450ms ease,
        transform 650ms ease;
}


.stars-page .kalpana-reveal.is-open {
    grid-template-rows: 1fr;

    opacity: 1;
    transform: translateY(0);
}


.stars-page .kalpana-info-inner {
    min-height: 0;
    overflow: hidden;

    display: flex;
    justify-content: center;
}


/* Let the info page be a PAGE, not a postage stamp. */

.stars-page .kalpana-info-inner img {
    display: block;

    width: min(90%, 620px);
    height: auto;

    margin: 2.5rem auto 0;

    border-radius: 1rem;
}


/* phones contain considerably less universe */

@media (max-width: 700px) {

    .stars-page .kalpana-piece {
        width: 100%;
    }

    .stars-page .kalpana-triptych {
        gap: 4px;
    }

    .stars-page .kalpana-panel {
        border-radius: .5rem;
    }

    .stars-page .kalpana-info-inner img {
        width: 94%;
        margin-top: 1.75rem;
    }

}


/* no forced cosmic motion */

@media (prefers-reduced-motion: reduce) {

    .stars-page .kalpana-reveal,
    .stars-page button.kalpana-center,
    .stars-page .kalpana-hint {
        transition: none;
    }

}

/* ---------- GALLERY MOBILE ---------- */

@media (max-width: 700px) {
    .stars-page .star-gallery {
        gap: 3rem;
    }

    .stars-page .multipage-art,
    .stars-page .star-face {
        border-radius: 1rem;
    }

    .stars-page .kalpana-card .kalpana-triptych > img:first-child {
        border-radius: 1rem 0 0 1rem;
    }

    .stars-page .kalpana-card .kalpana-triptych > img:last-child {
        border-radius: 0 1rem 1rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stars-page .star-card-inner,
    .stars-page .multipage-page,
    .stars-page .multipage-dots span {
        transition: none;
    }

    .stars-page .star-card:hover .star-card-inner {
        transform: none;
    }

    .stars-page .star-card.is-flipped,
    .stars-page .star-card.is-flipped:hover .star-card-inner {
        transform: rotateY(180deg);
    }
}


/* =========================================================
   09 — STARS: END OF THE UNIVERSE
   Apparently the universe has a footer.
   ========================================================= */

/* =========================================================
   STARS — END OF THE UNIVERSE
   ========================================================= */

.stars-page .stars-footer {
    position: relative;

    max-width: 1100px;
    margin: 10rem auto 0;
    padding: 8rem 2rem 3rem;

    text-align: center;

    border-top: 1px solid rgba(255,255,255,.08);
    background: transparent;
}


/* tiny dying constellation */

.stars-footer-ending {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    margin-bottom: 3rem;

    font-family: "Megrim", sans-serif;
    color: rgba(255,255,255,.45);
}

.stars-footer-ending span:nth-child(1) {
    transform: translateY(1.2rem);
}

.stars-footer-ending span:nth-child(2) {
    color: #ff71c8;
    font-size: 1.5rem;

    text-shadow:
        0 0 15px rgba(255,62,165,.45);
}

.stars-footer-ending span:nth-child(3) {
    transform: translateY(-.7rem);
}


/* THE END */

.stars-page .stars-footer-message {
    margin: 0;

    font-family: "Megrim", sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;

    color: #f8f5ff;

    text-shadow:
        0 0 20px rgba(201,167,255,.16);
}


.stars-page .stars-footer-small {
    margin: 1.2rem 0 5rem;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.2rem;
    font-style: italic;

    color: rgba(248,245,255,.55);
}


/* escape routes */

.stars-page .stars-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;

    margin-bottom: 4rem;
}

.stars-page .stars-footer-links a {
    font-family: "Atkinson Hyperlegible", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;

    color: #9eeaff;
    text-decoration: none;

    transition:
        color 250ms ease,
        text-shadow 250ms ease;
}

.stars-page .stars-footer-links a:hover {
    color: #ffffff;

    text-shadow:
        0 0 12px rgba(158,234,255,.5);
}


/* microscopic legal evidence that a human made this */

.stars-page .stars-footer-credit {
    margin: 0;

    font-family: "Atkinson Hyperlegible", sans-serif;
    font-size: .72rem;

    color: rgba(255,255,255,.35);
}


@media (max-width: 700px) {

    .stars-page .stars-footer {
        margin-top: 6rem;
        padding-top: 5rem;
    }
}
.kitten-feature {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  margin: 24px 0;
  background: #fff0f5;
  color: #30212e;
  border: 2px solid #f3b6d0;
  border-radius: 20px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}

.kitten-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px #eaa0bf55;
}

.kitten-feature-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.kitten-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kitten-feature-copy strong {
  font-size: 1.1rem;
}

.kitten-feature-copy small {
  color: #78596d;
}

.kitten-feature-copy b {
  color: #a52365;
  margin-top: 5px;
}

@media (max-width: 480px) {
  .kitten-feature {
    padding: 14px;
    gap: 12px;
  }

  .kitten-feature-icon {
    font-size: 2.2rem;
  }
}

/* =========================================================
   HERE LIES THE ORIGINAL STARS CSS
   2026–2026

   It was honest.
   It tried hard.
   Like, WAY too hard.

   It solved problems.
   It created new problems.
   It solved those problems with increasingly specific
   solutions to problems it had previously created.

   It taught us important lessons about the cascade.

   The full archaeological record survives in Git history
   for anyone sufficiently committed to suffering.

   May it rest in specificity.
   ========================================================= */