/* =========================================================
   VAIJAT PORTFOLIO — homepage.css  (shared by every page)
   Change the colours in :root and the whole site updates.
   ========================================================= */

:root {
  /* background + text — the ink is the deep plum from the logo video */
  --bg: #f1f5f9;
  --surface: #ffffff;
  --ink: #3a2440;          /* main text, borders, buttons */
  --ink-soft: #6b5a72;     /* smaller grey-plum text */
  --plum: #492c40;         /* dark video background, used for big blocks */
  --lilac: #b9bdd6;        /* the silvery-lilac of the logo in the video */

  /* YOUR colours — used exactly for fills, shadows, stars and big words */
  --blue: #28287D;
  --pink: #DB7DAE;
  --purple: #8F5A9E;
  --green: #5F8A54;

  /* slightly deeper pink + green so small TEXT is still easy to read
     (#DB7DAE and #5F8A54 are too pale for small writing on a light background) */
  --pink-text: #A8467D;
  --green-text: #4F7A45;

  /* soft tints for card backgrounds */
  --blue-tint: #dedff2;
  --pink-tint: #f8e2ee;
  --purple-tint: #ece1f0;
  --green-tint: #e1ecdc;

  --radius: 18px;
  --nav-h: 72px;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-pixel: "Silkscreen", "VT323", ui-monospace, monospace;   /* pixel accent font */
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --butter: #F6EC9B;       /* tiny pop of yellow for stickers only */
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* keeps the footer at the bottom even on short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; }

img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* colour helper classes — use on any word: <span class="c-pink">word</span> */
.c-blue   { color: var(--blue); }
.c-pink   { color: var(--pink-text); }
.c-purple { color: var(--purple); }
.c-green  { color: var(--green-text); }

/* ================= NAVIGATION ================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}

/* logo = your halftone VAIJAT image + spinning star */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.nav__logo img {
  height: 44px;
  width: auto;
}
.nav__logo .star {
  color: var(--pink);
  font-size: 1.3rem;
  line-height: 1;
  display: inline-block;
  animation: spin 6s linear infinite;      /* always slowly spinning */
}
.nav__logo:hover .star {
  color: var(--purple);
  animation-duration: 1s;                  /* spins faster on hover */
}
@keyframes spin { to { transform: rotate(360deg); } }

.nav__links { display: flex; gap: 6px; }

.nav__links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
/* each link lights up in its own colour on hover */
.nav__links a.c-blue:hover,   .nav__links a.c-blue.is-active   { background: var(--blue-tint);   color: var(--blue); }
.nav__links a.c-pink:hover,   .nav__links a.c-pink.is-active   { background: var(--pink-tint);   color: var(--pink-text); }
.nav__links a.c-purple:hover, .nav__links a.c-purple.is-active { background: var(--purple-tint); color: var(--purple); }
.nav__links a.c-green:hover,  .nav__links a.c-green.is-active  { background: var(--green-tint);  color: var(--green-text); }

/* mobile menu button (hidden on desktop) */
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px;
}
.nav__toggle span {
  display: block; height: 2px; width: 24px; margin: 0 auto;
  background: var(--ink); transition: transform 0.25s;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ================= HERO VIDEO ================= */
.hero {
  position: relative;
  margin: clamp(12px, 2vw, 24px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--plum);          /* matches the video so there's no flash while loading */
}

.hero__video {
  width: 100%;
  aspect-ratio: 1600 / 826;      /* the video's real shape, so nothing gets cut off */
  max-height: calc(100vh - var(--nav-h) - 48px);
  object-fit: cover;
}

.hero__pause {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(241, 245, 249, 0.75);
  color: var(--ink);
  font-size: 0.75rem;
  cursor: pointer;
}
.hero__pause:hover { background: #fff; }

/* ================= INTRO ================= */
.intro {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 48px);
  text-align: center;
}

.intro__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 20px;
}

.intro__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.intro__title em { font-style: italic; font-weight: 400; }

.intro__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-tint);
  flex-shrink: 0;
}

/* ================= WORKS ================= */
.works {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px) clamp(64px, 8vw, 110px);
}

.works__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.works__head h2, .cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
.works__head h2 em { font-style: italic; font-weight: 400; color: var(--pink-text); }

.link-arrow { font-weight: 500; color: var(--purple); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

.works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* playful offset shadow in the card's colour on hover */
.card--pink:hover   { box-shadow: 8px 8px 0 var(--pink); }
.card--blue:hover   { box-shadow: 8px 8px 0 var(--blue); }
.card--purple:hover { box-shadow: 8px 8px 0 var(--purple); }
.card--green:hover  { box-shadow: 8px 8px 0 var(--green); }
.card:hover { transform: translate(-4px, -4px); }

.card__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.card--pink   .card__img { background: var(--pink-tint); }
.card--blue   .card__img { background: var(--blue-tint); }
.card--purple .card__img { background: var(--purple-tint); }
.card--green  .card__img { background: var(--green-tint); }

.card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card:hover .card__img img { transform: scale(1.04); }

.placeholder { color: var(--ink-soft); font-size: 0.9rem; }

.card__text { padding: 20px 22px 24px; border-top: 2px solid var(--ink); }
.card__tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.card--pink   .card__tag { color: var(--pink-text); }
.card--blue   .card__tag { color: var(--blue); }
.card--purple .card__tag { color: var(--purple); }
.card--green  .card__tag { color: var(--green-text); }

.card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 4px 0 6px;
}
.card p { color: var(--ink-soft); font-size: 0.95rem; }

/* ================= CTA: STICKER SHEET ================= */
/* halftone photo background + everything on top is a die-cut sticker */
.cta {
  position: relative;
  margin: 0 clamp(12px, 2vw, 24px);
  padding: clamp(56px, 8vw, 110px) 24px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  text-align: center;
  overflow: hidden;
  background: #f6d6e7 url("assets/halftone-cta.jpg") center / cover;
}
.cta__title {
  display: inline-block;
  padding: 18px 30px 20px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 0 0 6px #fff, 6px 8px 0 6px rgba(58, 36, 64, 0.35);
  transform: rotate(-2.5deg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  line-height: 1.1;
}
.cta__title em { font-style: italic; font-weight: 400; color: var(--pink-text); }
.cta__note {
  display: block;
  width: fit-content;
  margin: 26px auto 0;
  padding: 6px 14px;
  background: var(--butter);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 4px #fff;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  transform: rotate(1.5deg);
}
.btn-sticker {
  display: inline-block;
  padding: 14px 26px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 0 0 5px #fff, 4px 6px 0 5px rgba(58, 36, 64, 0.3);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--ink);
  transform: rotate(var(--r, -3deg));
  transition: transform 0.2s;
}
.btn-sticker:hover { animation: wiggle 0.45s ease-in-out infinite; }
.btn-sticker--pink  { background: var(--pink); }
.btn-sticker--blue  { background: var(--blue); color: #fff; }
.btn-sticker--green { background: var(--green); color: #fff; }
@keyframes wiggle {
  0%, 100% { transform: rotate(var(--r, -3deg)) scale(1.06); }
  50%      { transform: rotate(calc(var(--r, -3deg) * -1)) scale(1.06); }
}
.cta .btn-row { gap: 22px; margin-top: 30px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid var(--bg);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn--solid   { background: var(--bg); color: var(--ink); }
.btn--outline { background: transparent; color: var(--bg); }
.btn:hover    { background: var(--pink); color: var(--ink); border-color: var(--pink); transform: rotate(-2deg) scale(1.04); }

/* versions of the buttons for light backgrounds (contact page) */
.btn--dark          { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--dark-outline  { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ================= FOOTER ================= */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(24px, 4vw, 48px);
  padding: 28px clamp(16px, 4vw, 48px);
  background: var(--plum);
  color: var(--lilac);
  font-size: 0.88rem;
}
.footer img { height: 34px; width: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--pink); }

/* ================= INNER PAGES (About / Works / Contact) ================= */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 48px) clamp(48px, 6vw, 80px);
}
.page__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.05;
  margin-bottom: 20px;
}
.page__title em { font-style: italic; font-weight: 400; }
.page__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 640px;
  color: var(--ink-soft);
}

/* About */
.about {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: 40px;
}
.about__text p + p { margin-top: 16px; }
.about__text h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 32px 0 10px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chips li {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 500;
}
.chips li:nth-child(4n+1) { background: var(--pink-tint); }
.chips li:nth-child(4n+2) { background: var(--blue-tint); }
.chips li:nth-child(4n+3) { background: var(--green-tint); }
.chips li:nth-child(4n+4) { background: var(--purple-tint); }

/* ---------- PORTRAIT in the swirly frame ---------- */
.portrait {
  position: relative;
  aspect-ratio: 400 / 520;          /* same shape as the frame drawing */
  width: 100%;
  max-width: 420px;
  margin: 0 auto 30px;
  cursor: pointer;
  outline: none;
}
/* the arch-shaped window the photo sits in (lines up with the frame SVG) */
.portrait__window {
  position: absolute;
  left: 12.5%; top: 13.46%;
  width: 75%; height: 78.85%;
  border-radius: 50% 50% 0 0 / 36.59% 36.59% 0 0;
  overflow: hidden;
  background: var(--plum);
}
.portrait__window img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}
.portrait__frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  transition: transform 0.6s ease;
}
.portrait__hint {
  position: absolute;
  bottom: -30px; left: 0; right: 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
}

/* hover / tap: photo fades away and the ASCII version shows */
.portrait:hover .portrait__window img,
.portrait:focus-visible .portrait__window img,
.portrait.is-ascii .portrait__window img { opacity: 0; }
.portrait:hover .ascii--photo,
.portrait:focus-visible .ascii--photo,
.portrait.is-ascii .ascii--photo { opacity: 1; }
.portrait:hover .portrait__frame { transform: scale(1.02) rotate(-0.6deg); }

/* ================= ASCII ART ================= */
/* All ASCII pieces are real text. homepage.js sizes them to fit their box. */
.ascii {
  margin: 0;
  font-family: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  white-space: pre;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  /* pink → purple → blue gradient through the characters */
  background: linear-gradient(160deg, var(--pink) 0%, var(--purple) 55%, var(--blue) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* the photo-as-ASCII sits on top of the photo, hidden until hover */
.ascii--photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: none;
  color: #f8c4df;                                   /* light pink glowing on plum */
  text-shadow: 0 0 6px rgba(219, 125, 174, 0.75);
}

/* big swirls floating behind the About page */
.page--about { position: relative; overflow-x: clip; }   /* swirls never cause sideways scrolling */
.ascii--swirl { position: absolute; z-index: -1; opacity: 0.55; }
.ascii--tall   { top: 24px;  right: -10px; width: min(300px, 32vw); }
.ascii--corner { bottom: 40px; left: -30px; width: min(360px, 38vw); transform: scaleY(-1); opacity: 0.35; }

/* vine divider under the intro */
.ascii--vine { width: min(560px, 100%); margin: 28px 0 8px; opacity: 0.9; }

/* Works page: one big block per project */
.project {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 2px solid var(--ink);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.project__img {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background: var(--purple-tint);
}
.project__img img { width: 100%; height: 100%; object-fit: cover; }
.project h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 4px 0 12px;
}
.project p + p { margin-top: 12px; }

/* Contact page */
.contact-card {
  margin-top: 40px;
  padding: clamp(28px, 5vw, 48px);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--purple);
}
.contact-card .email {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 600;
  color: var(--blue);
  word-break: break-all;
  text-decoration: none;
}
.contact-card .email:hover { text-decoration: underline; }
.contact-card .btn-row { justify-content: flex-start; }
.copied { color: var(--green-text); font-weight: 700; margin-left: 4px; }

/* ================= PIXEL TICKER ================= */
.ticker {
  overflow: hidden;
  background: var(--plum);
  color: var(--pink);
  border-block: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  white-space: nowrap;
  padding: 10px 0;
}
.ticker--light { background: var(--pink); color: var(--plum); }
.ticker__track {
  display: inline-flex;
  animation: ticker 28s linear infinite;
}
.ticker__track span { padding-right: 1.5em; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.footer-ticker { margin-top: clamp(40px, 6vw, 80px); }
.footer-ticker + .footer { margin-top: 0; }

/* ================= CROSS-STITCH ORNAMENTS ================= */
.stitch-divider {
  display: block;
  width: min(520px, 80%);
  margin: clamp(28px, 4vw, 48px) auto;
  opacity: 0.85;
}
.stitch-row { display: flex; justify-content: center; gap: 14px; }
.stitch-row img { width: 38px; }

/* ================= DRAGGABLE STICKERS ================= */
.sticker-zone { position: relative; }
.sticker {
  position: absolute;
  z-index: 5;
  cursor: grab;
  touch-action: none;          /* lets fingers drag stickers without scrolling */
  user-select: none;
  -webkit-user-select: none;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(3px 4px 0 rgba(58, 36, 64, 0.22));
  transition: transform 0.15s ease;
}
.sticker:hover { transform: rotate(var(--r, 0deg)) scale(1.08); }
.sticker.is-dragging { cursor: grabbing; transform: rotate(var(--r, 0deg)) scale(1.14); }
.sticker img { width: 100%; height: auto; pointer-events: none; }
/* text label stickers */
.sticker--label {
  padding: 6px 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 0 0 4px #fff;
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  white-space: nowrap;
}
/* round die-cut stickers holding a cross-stitch motif */
.sticker--round {
  width: 74px; height: 74px;
  padding: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
}
/* CD sticker */
.sticker--cd {
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 4px #fff;
  background:
    radial-gradient(circle, var(--bg) 0 8px, var(--ink) 8.5px 10px, transparent 10.5px),
    conic-gradient(from 20deg, #f8c4df, #d9dcf5, #e1ecdc, #F6EC9B, #f8c4df);
}
.sticker--star { width: 70px; }
.sticker-hint {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* ================= PRINT-DOT (HALFTONE) HOVER ================= */
/* add class="halftone" to any image box: on hover the picture
   dissolves into dots of its own colours, like a riso print */
@property --dot { syntax: "<length>"; inherits: true; initial-value: 4.4px; }
.halftone { --dot: 4.4px; transition: --dot 0.55s ease; background-color: var(--pink-tint); }
.halftone img {
  -webkit-mask: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + 0.6px)) 0 0 / 6px 6px;
          mask: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + 0.6px)) 0 0 / 6px 6px;
}
a:hover .halftone, .halftone:hover, button:hover .halftone { --dot: 2.1px; }
a:hover .halftone img, .halftone:hover img { filter: saturate(1.4) contrast(1.1); }

/* ================= ASCII OVERLAY (project thumbnails) ================= */
.ascii-host { position: relative; }
.ascii--overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: var(--plum);
  color: #f8c4df;
  text-shadow: 0 0 5px rgba(219, 125, 174, 0.7);
  -webkit-background-clip: border-box;
          background-clip: border-box;
}
a:hover .ascii--overlay, a:focus-visible .ascii--overlay { opacity: 1; }

/* ================= ASCII LOADING SCREEN ================= */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background: var(--plum);
  transition: opacity 0.6s ease, visibility 0.6s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader .ascii--loader {
  width: min(680px, 86vw);
  background: none;
  color: #f8c4df;
  text-shadow: 0 0 8px rgba(219, 125, 174, 0.8);
}
.loader__text {
  font-family: var(--font-pixel);
  color: var(--lilac);
  letter-spacing: 0.2em;
}
.loader__text span { animation: blink 1s steps(2) infinite; }

/* ================= LIGHTBOX (click to enlarge) ================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(58, 36, 64, 0.88);
  cursor: zoom-out;
}
.lightbox.is-open { display: grid; }
.lightbox__inner {
  max-width: min(92vw, 900px);
  max-height: 86vh;
  border: 3px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.lightbox__inner img { max-height: 86vh; width: auto; margin: 0 auto; }
.lightbox__inner .tile { width: min(80vmin, 640px); cursor: zoom-out; }
.lightbox__close {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--font-pixel); font-size: 1rem;
  color: #fff; background: none; border: 0; cursor: pointer;
}

/* ================= STAR CURSOR TRAIL ================= */
.sparkle {
  position: fixed;
  pointer-events: none;      /* so stars never block clicks */
  z-index: 9999;
  font-size: 14px;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: sparkle-fade 0.9s ease-out forwards;
}
@keyframes sparkle-fade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2) rotate(180deg); }
}

/* ================= MOBILE ================= */
@media (max-width: 760px) {
  .nav__toggle { display: flex; }
  .nav__logo img { height: 36px; }

  .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 20px;
    background: var(--surface);
    border-bottom: 2px solid var(--ink);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { font-size: 1.05rem; }

  .works__grid,
  .about,
  .project { grid-template-columns: 1fr; }
  .about { gap: 40px; }

  .portrait { max-width: 340px; }
  .sticker { transform: rotate(var(--r, 0deg)) scale(0.8); }
  .sticker--hide-mobile { display: none; }
  .ascii--tall { width: 150px; top: 8px; opacity: 0.35; }
  .ascii--corner { display: none; }
  .footer { flex-direction: column; text-align: center; }
}

/* respect people who turn off animations in their device settings */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@keyframes blink { 50% { opacity: 0; } }

/* =========================================================
   PROJECT PAGES  (zine · social grid · desktop windows)
   ========================================================= */
.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--purple);
}
.back-link:hover { color: var(--pink-text); }
.proj-head { margin-bottom: clamp(28px, 4vw, 48px); }
.proj-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 24px;
  max-width: 760px;
}
.proj-meta div {
  padding: 10px 14px;
  border: 1.5px dashed var(--ink);
  border-radius: 10px;
  background: var(--surface);
}
.proj-meta dt {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--purple);
}
.proj-meta dd { font-weight: 500; font-size: 0.95rem; }

.proj-text { max-width: 680px; margin: clamp(40px, 6vw, 72px) auto 0; }
.proj-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 32px 0 10px;
}
.proj-text h2:first-child { margin-top: 0; }
.proj-text p + p { margin-top: 14px; }

.proj-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.proj-nav a {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  text-decoration: none;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
}
.proj-nav a:hover { background: var(--pink); }

/* ---------------- ZINE FLIP-THROUGH ---------------- */
.zine { display: grid; justify-items: center; gap: 18px; }
.zine__book {
  position: relative;
  width: min(1000px, 100%);
  aspect-ratio: 1080 / 750;
  perspective: 2200px;
  transition: transform 0.6s ease;
}
.zine__book.is-closed { transform: translateX(-25%); }
.zine__book.is-end    { transform: translateX(25%); }
.leaf {
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.6, 0.05, 0.3, 1);
  cursor: pointer;
}
.leaf.is-flipped { transform: rotateY(-180deg); }
.leaf__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #fffdf9;
  border: 2px solid var(--ink);
}
.leaf__face--front { border-radius: 0 10px 10px 0; box-shadow: inset 14px 0 18px -14px rgba(58,36,64,.35); }
.leaf__face--back  { transform: rotateY(180deg); border-radius: 10px 0 0 10px; box-shadow: inset -14px 0 18px -14px rgba(58,36,64,.35); }
.leaf__face > img { width: 100%; height: 100%; object-fit: cover; }
.zpage img { height: auto; }
.zpage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 9%;
  font-size: clamp(0.62rem, 1.35vw, 1rem);
}
.zpage--cover { background: var(--pink); text-align: center; align-items: center; gap: 0.6em; }
.zpage--cover h2 {
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.95;
  color: var(--plum);
}
.zpage--cover h2 em { display: block; font-weight: 400; color: #fff; }
.zpage--cover img { width: 30%; }
.zpage--plum { background: var(--plum); color: var(--bg); }
.zpage--plum h3 { color: var(--pink); }
.zpage h3 { font-family: var(--font-display); font-size: 1.9em; margin-bottom: 0.5em; line-height: 1.1; }
.zpage p { font-size: 1em; line-height: 1.5; }
.zpage p + p { margin-top: 0.8em; }
.zpage .pixel { font-family: var(--font-pixel); font-size: 0.8em; letter-spacing: 0.05em; }
.zpage__num {
  position: absolute; bottom: 3%; right: 5%;
  font-family: var(--font-pixel); font-size: 0.7em; color: var(--ink-soft);
}
.zine__controls { display: flex; align-items: center; gap: 14px; font-family: var(--font-pixel); font-size: 0.85rem; }
.zine__controls button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--surface);
  font-size: 1.1rem;
  cursor: pointer;
}
.zine__controls button:hover:not(:disabled) { background: var(--pink); }
.zine__controls button:disabled { opacity: 0.35; cursor: default; }

/* ---------------- SOCIAL MEDIA GRID ---------------- */
.social {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.phone {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  aspect-ratio: 9 / 19;
  border: 10px solid var(--ink);
  border-radius: 40px;
  background: #fff;
  overflow: hidden;
  box-shadow: 10px 12px 0 var(--pink);
}
.phone__notch { width: 38%; height: 18px; margin: 6px auto 0; border-radius: 0 0 12px 12px; background: var(--ink); }
.phone__profile { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 14px 12px 8px; }
.phone__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--pink);
  background: var(--plum) url("assets/logo-light.png") center / 80% no-repeat;
}
.phone__stats { display: flex; justify-content: space-around; text-align: center; font-size: 0.68rem; line-height: 1.2; }
.phone__stats b { display: block; font-size: 0.85rem; }
.phone__bio { padding: 0 12px 10px; font-size: 0.68rem; line-height: 1.35; }
.phone__bio b { font-size: 0.75rem; }
.phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; font-size: 0.32rem; }
.phone__grid::after { content: ""; grid-column: 1 / -1; }
.phone__grid .tile { border: 0; border-radius: 0; pointer-events: none; }

.grid9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.4vw, 16px); }
.tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.grid9 .tile:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 6px 6px 0 var(--purple); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.grid9 .tile { font-size: clamp(0.62rem, 1.45vw, 1.2rem); }
.phone__grid .tile { font-size: 0.36rem; }
.lightbox__inner .tile { font-size: clamp(1rem, 3.2vmin, 1.8rem); }
.tile--pink   { background: var(--pink); }
.tile--plum   { background: var(--plum); color: var(--pink); }
.tile--blue   { background: var(--blue); color: var(--bg); }
.tile--cream  { background: #fffdf3; }
.tile--butter { background: var(--butter); }
.tile--lilac  { background: var(--purple-tint); }
.tile__big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.65em;
  line-height: 1;
  padding: 8%;
}
.tile__big em { font-weight: 400; }
.tile__pixel { font-family: var(--font-pixel); font-size: 2em; line-height: 1; }
.tile__repeat {
  position: absolute;
  inset: -30%;
  transform: rotate(-24deg);
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: 1.45em;
  line-height: 1;
  white-space: nowrap;
}
.tile__ring { position: absolute; inset: 6%; width: 88%; height: 88%; animation: spin 18s linear infinite; }
.tile__ring text { font-family: var(--font-pixel); font-size: 13px; fill: var(--plum); }
.tile__stitch { width: 52%; }
.tile__ph { font-family: var(--font-pixel); font-size: 0.7em; color: var(--ink-soft); padding: 10%; }
.tile--dots { background: var(--purple-tint) radial-gradient(circle, rgba(143,90,158,.35) 1.4px, transparent 1.8px) 0 0 / 9px 9px; }

/* ---------------- RETRO DESKTOP WINDOWS ---------------- */
.desktop {
  position: relative;
  min-height: 760px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(219, 125, 174, 0.28) 1.3px, transparent 1.8px) 0 0 / 14px 14px,
    linear-gradient(90deg, #613651 0 50%, var(--plum) 50% 100%);
}
.desktop__bar {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 6px 14px;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 0.75rem;
}
.desktop__bar .clock { margin-left: auto; }
.win {
  position: absolute;
  width: var(--w, 360px);
  background: #fffdf9;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 7px 0 rgba(26, 14, 30, 0.45);
  overflow: hidden;
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 2px solid var(--ink);
  background: var(--pink);
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.win.is-dragging .win__bar { cursor: grabbing; }
.win--blue .win__bar   { background: var(--blue); color: var(--bg); }
.win--green .win__bar  { background: var(--green); color: var(--bg); }
.win--butter .win__bar { background: var(--butter); }
.win--lilac .win__bar  { background: var(--purple-tint); }
.win__dots { display: flex; gap: 5px; }
.win__dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; }
.win__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win__body { padding: 14px; font-size: 0.92rem; }
.win__body--img { padding: 0; aspect-ratio: var(--ar, 4 / 3); display: grid; place-items: center; background: var(--purple-tint); }
.win__body--img img { width: 100%; height: 100%; object-fit: cover; }
.win__body--mono { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.55; }
.win__body--mono ul { padding-left: 1.1em; }
.win__ascii { padding: 12px; background: var(--plum); }
.win__ascii .ascii { width: 100%; background: none; color: var(--pink); text-shadow: 0 0 6px rgba(219,125,174,.6); }

/* ---------------- WORKS INDEX ---------------- */
.works-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 32px); margin-top: 40px; }
.format-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 0 0 3px #fff;
  background: var(--butter);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  transform: rotate(-3deg);
}
.card__img { position: relative; }

@media (max-width: 860px) {
  .social { grid-template-columns: 1fr; }
  .phone { position: relative; top: 0; width: min(280px, 80%); margin: 0 auto; }
}
@media (max-width: 760px) {
  .works-index { grid-template-columns: 1fr; }
  /* windows stack neatly on phones instead of floating */
  .desktop { min-height: 0; padding-bottom: 16px; }
  .win { position: relative; left: auto !important; top: auto !important; width: auto; margin: 16px 16px 0; transform: rotate(var(--tilt, 0deg)); }
  .win__bar { cursor: default; }
}

/* ---------------- VIDEO DESKTOP (motion work) ---------------- */
.desktop--video { min-height: 800px; }
.desk-icons {
  position: absolute;
  top: 52px; left: 14px;
  display: grid;
  gap: 14px;
  width: 120px;
}
.desk-icon {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 4px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--bg);
  font: inherit;
  cursor: pointer;
}
.desk-icon:hover { border-color: rgba(241, 245, 249, 0.4); }
.desk-icon.is-active { border-color: var(--pink); background: rgba(219, 125, 174, 0.18); }
.desk-icon__img {
  position: relative;
  width: 74px; aspect-ratio: 4 / 3;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 0 0 3px #fff;
  background: var(--purple-tint) radial-gradient(circle, rgba(143,90,158,.4) 1.2px, transparent 1.6px) 0 0 / 7px 7px;
  background-size: cover;
  display: grid; place-items: center;
}
.desk-icon__img i {
  font-style: normal; font-size: 0.8rem;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pink); color: var(--ink);
  border: 1.5px solid var(--ink);
}
.desk-icon__name {
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(58, 36, 64, 0.75);
  word-break: break-all;
}
.player { background: var(--plum); }
.player__screen { position: relative; aspect-ratio: 16 / 9; background: #1e1220; display: grid; place-items: center; }
.player__screen video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.player__empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center; gap: 6px;
  font-family: var(--font-pixel); font-size: 0.9rem; color: var(--pink);
  background: radial-gradient(circle, rgba(219,125,174,.22) 1.3px, transparent 1.8px) 0 0 / 12px 12px;
}
.player__empty span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--lilac); }
.player.has-video .player__empty { display: none; }
.player__controls {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-top: 2px solid var(--ink);
  background: var(--bg);
}
.player__btn {
  width: 34px; height: 30px; flex-shrink: 0;
  border: 2px solid var(--ink); border-radius: 6px;
  background: var(--pink); color: var(--ink);
  font-size: 0.85rem; cursor: pointer;
}
.player__btn:hover { background: var(--butter); }
.player__btn.is-muted { background: var(--purple-tint); text-decoration: line-through; }
.player__seek { flex: 1; accent-color: var(--purple); min-width: 60px; }
.player__time { font-family: var(--font-pixel); font-size: 0.7rem; white-space: nowrap; }

@media (max-width: 760px) {
  .desktop--video { min-height: 0; }
  .desk-icons { position: relative; top: auto; left: auto; width: auto; grid-template-columns: repeat(2, 1fr); padding: 14px 16px 0; }
  .player__time { display: none; }
}