/* ============================================================
   ASMITHA MUTHUKUMAR — PORTFOLIO
   shared stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,800;1,9..144,400&family=JetBrains+Mono:wght@300;400;500&family=Caveat:wght@500;700&display=swap');

:root {
  --ink:         #1a1614;
  --ink-soft:    #3a322c;
  --paper:       #f4ede1;
  --paper-warm:  #ebe0cb;
  --paper-deep:  #e2d3b8;
  --accent:      #c8553d;      /* terracotta — primary */
  --accent-2:    #6a7a4a;      /* olive — warmed from cold sage to sit in the same paper family */
  --accent-3:    #c89968;      /* ochre — deepened to feel sun-baked, not bright */
  --rule:        rgba(26, 22, 20, 0.18);

  --serif: 'Fraunces', 'Times New Roman', serif;
  --mono:  'JetBrains Mono', 'Courier New', monospace;
  --hand:  'Caveat', cursive;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  /* paper grain */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(200, 85, 61, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(74, 107, 82, 0.04) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- NAV ---------- */
nav.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 18px 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

nav.topbar .brand {
  font-family: var(--serif);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
nav.topbar .brand span { color: var(--accent); }

nav.topbar ul {
  list-style: none;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
nav.topbar a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 12px 0 4px;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, color 0.25s;
}
nav.topbar a:hover,
nav.topbar a.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- LAYOUT WRAPPER ---------- */
.wrap { padding: 0 6vw; }
.wrap-tight { max-width: 980px; margin: 0 auto; padding: 0 6vw; }

/* ---------- HERO (home) ---------- */
.hero {
  position: relative;
  padding: 80px 6vw 100px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding: 50px 6vw 70px; }
}

.hero .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 28px;
}
.hero .meta::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--ink-soft);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 30px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 800;
  color: var(--accent);
}

.hero .lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 36px;
}
.hero .lede strong { color: var(--ink); font-weight: 600; }

.hero .signature {
  font-family: var(--hand);
  font-size: 38px;
  color: var(--accent);
  line-height: 1;
  transform: rotate(-3deg);
  display: inline-block;
}

.source-link,
.inline-link {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.source-link {
  display: inline-block;
  margin: 0 0 24px;
}

.inline-link {
  display: inline;
  margin-left: 8px;
}

/* hero side panel — collaged portrait area */
.hero .portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}
.hero .portrait .frame {
  position: absolute;
  inset: 0;
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  overflow: hidden;
}
.hero .portrait .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.03) saturate(0.95);
}
.hero .portrait .tag {
  position: absolute;
  bottom: -22px;
  left: -20px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 14px;
  transform: rotate(-2deg);
  z-index: 2;
}
.hero .portrait .stamp {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper-warm);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  transform: rotate(8deg);
  z-index: 2;
}

/* ---------- SECTION HEADERS ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 80px 6vw 30px;
}
.section-head .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.section-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.02em;
}
.section-head .rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  align-self: center;
  margin-left: 12px;
}

/* ---------- WORK GRID (home) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px 24px;
  padding: 20px 6vw 80px;
}
.work-card {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  transition: transform 0.3s ease;
}
.work-card:hover { transform: translateY(-6px); }
.work-card .img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  aspect-ratio: 4 / 5;
}
.work-card .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
  filter: saturate(0.9);
}
.work-card:hover .img-wrap img { transform: scale(1.05); filter: saturate(1.05); }
.work-card .label {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.work-card .label h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.work-card .label span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.work-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.5;
}

/* Uniform 3-up grid — every card the same width (4 of 12 cols) so the
   selected-works thumbnails read as a clean catalogue. Résumé takes the
   last row alone, centered. */
.work-card.c1,
.work-card.c2,
.work-card.c3,
.work-card.c4,
.work-card.c5,
.work-card.c6 { grid-column: span 4; }
.work-card.c7 { grid-column: 5 / span 4; }   /* Résumé — centered in its own row */

@media (max-width: 880px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-card.c1, .work-card.c2, .work-card.c3,
  .work-card.c4, .work-card.c5, .work-card.c6, .work-card.c7 {
    grid-column: span 1; margin-top: 0;
  }
}
@media (max-width: 520px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ---------- ABOUT STRIP ---------- */
.about-strip {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 70px 6vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
@media (max-width: 760px) { .about-strip { grid-template-columns: 1fr; } }

.about-strip h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.about-strip p {
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 16px;
  max-width: 52ch;
}
.about-strip .facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 24px;
  align-content: start;
}
.about-strip .fact {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.about-strip .fact .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.about-strip .fact .v {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.3;
}

/* ---------- FOOTER ---------- */
footer {
  padding: 60px 6vw 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
footer .big {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
}
footer .big a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
footer .small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  line-height: 1.8;
}

/* ---------- SUB-PAGE HEADER ---------- */
.page-header {
  padding: 70px 6vw 50px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
}
@media (max-width: 700px) { .page-header { grid-template-columns: 1fr; } }

.page-header .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.page-header h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(46px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.page-header h1 em {
  font-style: italic;
  font-weight: 800;
}
.page-header .intro {
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 42ch;
  line-height: 1.6;
}

/* ---------- GALLERY (sub-pages) ----------
   Flex-wrap layout: every piece is the same fixed height; widths follow
   each image's natural aspect ratio, so rows stay aligned by height
   while images keep their true proportions. */
.gallery {
  padding: 60px 6vw 80px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 24px;
}
.gallery .piece {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.gallery .piece .img-wrap {
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.gallery .piece .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s;
}
@media (max-width: 880px) {
  .gallery .piece .img-wrap { height: 280px; }
}
@media (max-width: 520px) {
  .gallery .piece .img-wrap { height: 220px; }
}
.gallery .piece:hover .img-wrap img { transform: scale(1.04); }
.gallery .piece .caption {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.gallery .piece .caption h4 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.gallery .piece .caption span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.gallery .piece p {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* gallery layout variants */
.gallery .piece.wide   { grid-column: span 8; }
.gallery .piece.tall   { grid-column: span 4; }
.gallery .piece.half   { grid-column: span 6; }
.gallery .piece.third  { grid-column: span 4; }
.gallery .piece.full   { grid-column: span 12; }

.gallery .piece.wide  .img-wrap { aspect-ratio: 16/10; }
.gallery .piece.tall  .img-wrap { aspect-ratio: 3/4; }
.gallery .piece.half  .img-wrap { aspect-ratio: 4/3; }
.gallery .piece.third .img-wrap { aspect-ratio: 1/1; }
.gallery .piece.full  .img-wrap { aspect-ratio: 21/9; }

@media (max-width: 880px) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .gallery .piece.wide, .gallery .piece.tall,
  .gallery .piece.half, .gallery .piece.third,
  .gallery .piece.full { grid-column: span 2; }
  .gallery .piece .img-wrap { aspect-ratio: 4/5; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .piece.wide, .gallery .piece.tall,
  .gallery .piece.half, .gallery .piece.third,
  .gallery .piece.full { grid-column: span 1; }
}

/* ---------- 3D MODEL PIECES ----------
   <model-viewer> has no natural aspect ratio, so the flex-wrap layout
   (which sizes width: auto from the image's intrinsic ratio) collapses.
   Give model pieces an explicit width per variant and let the viewer
   fill its container. */
.gallery .piece.model-piece { width: 100%; }
.gallery .piece.model-piece .img-wrap {
  width: 100%;
  aspect-ratio: auto;
  height: var(--feat-h, 380px);
}
.gallery .piece.model-piece model-viewer {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--paper-deep);
  --poster-color: transparent;
}
.gallery .piece.full.model-piece    { flex: 1 1 100%; }
.gallery .piece.half.model-piece    { flex: 1 1 calc(50% - 12px); }
.gallery .piece.third.model-piece   { flex: 1 1 calc(33.333% - 16px); }
@media (max-width: 880px) {
  .gallery .piece.model-piece .img-wrap { height: 320px; }
  .gallery .piece.half.model-piece,
  .gallery .piece.third.model-piece { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .gallery .piece.model-piece .img-wrap { height: 260px; }
}

/* ---------- PROSE (resume / about) ---------- */
.prose {
  padding: 70px 6vw 90px;
  max-width: 820px;
  margin: 0 auto;
}
.prose h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 40px 0 18px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  margin-top: 22px;
}
.prose .meta-row {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.prose p { margin: 8px 0 14px; color: var(--ink-soft); }
.prose ul { margin: 8px 0 16px 20px; color: var(--ink-soft); }
.prose ul li { margin-bottom: 6px; }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.skill-tag {
  border: 1px solid var(--ink);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--paper-warm);
  text-align: center;
}

/* ---------- MARKETING PAGE GRID ---------- */
.insta-grid {
  padding: 60px 6vw 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.insta-grid .post {
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}
.insta-grid .post:hover { transform: scale(1.02); }
.insta-grid .post .media {
  aspect-ratio: 1/1;
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  overflow: hidden;
  position: relative;
}
.insta-grid .post img { width: 100%; height: 100%; object-fit: cover; }
.insta-grid .post .caption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}
.insta-grid .post .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(26,22,20,0.7) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s;
}
.insta-grid .post:hover .overlay { opacity: 1; }
.insta-grid .post .overlay span {
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---------- PLACEHOLDER IMAGES ---------- */
.placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg,
      var(--paper-deep) 0,
      var(--paper-deep) 12px,
      var(--paper-warm) 12px,
      var(--paper-warm) 24px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 20px;
}

/* ---------- ENTRANCE ANIMATIONS ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .meta,
.hero h1,
.hero .lede,
.hero .signature,
.hero .portrait,
.page-header .kicker,
.page-header h1,
.page-header .intro {
  animation: rise 0.9s ease-out both;
}
.hero h1 { animation-delay: 0.1s; }
.hero .lede { animation-delay: 0.2s; }
.hero .signature { animation-delay: 0.3s; }
.hero .portrait { animation-delay: 0.4s; }
.page-header h1 { animation-delay: 0.1s; }
.page-header .intro { animation-delay: 0.2s; }

/* ---------- SECONDARY ACCENTS (cohesion pass) ----------
   accent (terracotta) stays the primary voice. accent-2 (olive) and
   accent-3 (ochre) handle quieter, supporting moments so the palette
   feels like a full set instead of one loud color carrying the page. */

/* Engine / jam tag for game cards — olive for a calm, sage-paper feel */
.engine-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
}

/* Fact labels on the home about-strip — alternate ochre so the column
   doesn't read as one block of terracotta */
.about-strip .fact:nth-child(even) .k { color: var(--accent-3); }

/* Portrait stamp picks up ochre — sits next to terracotta tag without
   competing with it */
.hero .portrait .stamp {
  border-color: var(--accent-3);
  color: var(--ink-soft);
}

/* Section-head numbers stay terracotta on home; on sub-pages we tint
   the kicker olive so each chapter feels like its own page in the
   same notebook */
.page-header .kicker { color: var(--accent-2); }

/* Meta-row on the resume gets ochre to separate it from terracotta links */
.prose .meta-row { color: var(--accent-3); }

/* ---------- VIDEO EMBED (project pages) ---------- */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  overflow: hidden;
  margin: 10px 0 18px;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-fallback {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 30px;
}
.video-fallback a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ============================================================
   INTERACTION LAYER — cursor, marquee, swiper, lightbox, etc.
   ============================================================ */

/* ---------- CUSTOM CURSOR ---------- */
@media (hover: hover) {
  body { cursor: none; }
  a, button, .work-card, .gallery .piece, .insta-grid .post, .skill-tag { cursor: none; }
}
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  mix-blend-mode: multiply;
  transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--accent);
  margin: -3.5px 0 0 -3.5px;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid var(--ink);
  margin: -17px 0 0 -17px;
  background: transparent;
}
body.cursor-hover .cursor-dot { background: var(--accent-3); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
body.cursor-hover .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--accent); }
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 9998;
  transition: transform 0.08s linear;
  pointer-events: none;
}

/* ---------- GLOBAL FOCUS-VISIBLE (keyboard a11y) ---------- */
a:focus-visible,
button:focus-visible,
.work-card:focus-visible,
.gallery .piece:focus-visible,
.insta-grid .post:focus-visible,
.skill-tag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
nav.topbar a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- PLAY BUTTON (game cards) ----------
   Tucked to the bottom-right corner so the gameplay screenshot reads as the
   primary visual. Card hover reveals + emphasizes it. */
.play-btn {
  position: absolute;
  right: 10px; bottom: 10px;
  left: auto; top: auto;
  transform: translateZ(0);
  min-width: 44px;
  min-height: 32px;
  padding: 7px 12px 7px 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(26, 22, 20, 0.78);
  color: var(--paper);
  border: 1px solid var(--paper);
  cursor: pointer;
  z-index: 3;
  opacity: 0.78;
  transition: opacity 0.2s ease, background 0.2s, transform 0.18s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.play-btn::before {
  content: '';
  position: absolute;
  left: 10px; top: 50%;
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}
.gallery .piece:hover .play-btn {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.play-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; opacity: 1; }
.gallery .piece .img-wrap { position: relative; }

/* ---------- INLINE CONTACT LINKS ---------- */
.contact-link { color: var(--accent); }
.contact-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- INTRO TIP ---------- */
.intro-tip {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.intro-tip svg {
  vertical-align: -2px;
  width: 12px; height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* ---------- NAV scrolled state ---------- */
nav.topbar.is-scrolled {
  background: rgba(244, 237, 225, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(26, 22, 20, 0.06);
}

/* ---------- MARQUEE strip ---------- */
.marquee {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  background: var(--paper-warm);
  padding: 18px 0;
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  gap: 56px;
  animation: marquee-slide 38s linear infinite;
  will-change: transform;
}
.marquee__item {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.marquee__item::after {
  content: "✦";
  font-style: normal;
  color: var(--accent);
  font-size: 0.7em;
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---------- SWIPER (hero portrait carousel) ---------- */
.portrait-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.portrait-swiper .swiper-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.03) saturate(0.95);
}
.portrait-swiper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,22,20,0) 60%, rgba(26,22,20,0.25) 100%);
  pointer-events: none;
}

/* ---------- GLIGHTBOX overrides to match palette ---------- */
.glightbox-clean .gslide-description {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
}
.glightbox-clean .gslide-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px !important;
  color: var(--ink) !important;
}
.glightbox-clean .gslide-desc {
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft) !important;
}
.gprev, .gnext, .gclose {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
}
.goverlay { background: rgba(26, 22, 20, 0.88) !important; }

/* ---------- MAGNETIC button base ---------- */
[data-magnetic] {
  display: inline-block;
  transition: transform 0.2s ease;
  will-change: transform;
}

/* ---------- TICKER (resume / skill ribbon) ---------- */
.ticker {
  padding: 24px 6vw;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--paper-warm);
}
.ticker .pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 8px 12px;
  color: var(--ink);
}
.ticker .pill.is-accent { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* ---------- CONTACT CTA block ---------- */
.cta-block {
  padding: 90px 6vw;
  text-align: center;
  border-top: 1px solid var(--rule);
}
.cta-block .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.cta-block h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 8vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}
.cta-block .cta-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 18px 36px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--ink);
}
.cta-block .cta-btn:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- KBD shortcut hint ---------- */
kbd {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink-soft);
}

/* ---------- INSTA grid image fix ---------- */
.insta-grid .post img {
  display: block;
  filter: saturate(0.95);
  transition: transform 0.5s ease, filter 0.4s ease;
}
.insta-grid .post:hover img { transform: scale(1.05); filter: saturate(1.1); }

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee__track { animation: none; }
}

/* ============================================================
   DIGITAL CLOSET — paper doll + sliding racks
   ============================================================ */
.dc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
  gap: 48px;
  padding: 30px 6vw 60px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .dc { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- STAGE ---- */
.dc__stage {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 580px;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(200,153,104,0.20) 0%, transparent 55%),
    radial-gradient(80% 60% at 50% 100%, rgba(200,85,61,0.10) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0, transparent 38px, rgba(26,22,20,0.04) 38px, rgba(26,22,20,0.04) 39px),
    repeating-linear-gradient(90deg, transparent 0, transparent 38px, rgba(26,22,20,0.04) 38px, rgba(26,22,20,0.04) 39px),
    var(--paper-deep);
  border: 1px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.dc__stage::before, .dc__stage::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  z-index: 6;
  pointer-events: none;
}
.dc__stage::before { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.dc__stage::after  { bottom: 14px; right: 14px; border-left: none; border-top: none; }

.dc__stamp {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 6px 10px;
  z-index: 6;
}
.dc__stamp--tl { top: 22px; left: 56px; }
.dc__stamp--br { bottom: 22px; right: 56px; background: var(--ink); color: var(--paper); }

.dc__model { position: absolute; inset: 0; }
.dc__layer {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 0.28s ease, transform 0.55s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.dc__layer.is-hidden { opacity: 0; pointer-events: none; }
.dc__layer.is-poping { animation: dc-pop 0.36s cubic-bezier(.2,.7,.2,1); }
@keyframes dc-pop {
  0%   { transform: scale(0.985); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}
/* z-order — tights sit between skin and bottom; hair tops everything so a wig
   covers the body's drawn-in hair. */
.dc__layer--body      { z-index: 1; }
.dc__layer--tights    { z-index: 2; }
.dc__layer--bottom    { z-index: 3; }
.dc__layer--top       { z-index: 4; }
.dc__layer--outer     { z-index: 5; }
.dc__layer--shoes     { z-index: 6; }
.dc__layer--accessory { z-index: 7; }
.dc__layer--hair      { z-index: 8; }

/* sparkle */
.dc__sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}
.dc__sparkle span {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.dc__sparkle span:nth-child(1) { top: 22%; left: 20%; }
.dc__sparkle span:nth-child(2) { top: 35%; right: 18%; background: var(--accent-3); }
.dc__sparkle span:nth-child(3) { top: 60%; left: 26%; background: var(--accent-2); }
.dc__sparkle span:nth-child(4) { top: 70%; right: 24%; }
.dc__sparkle.is-on span { animation: dc-spark 0.9s ease-out forwards; }
.dc__sparkle.is-on span:nth-child(2) { animation-delay: 0.1s; }
.dc__sparkle.is-on span:nth-child(3) { animation-delay: 0.18s; }
.dc__sparkle.is-on span:nth-child(4) { animation-delay: 0.26s; }
@keyframes dc-spark {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(0.8) translateY(-30px); }
}

/* ---- RACKS ---- */
.dc__racks {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dc__rack {
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
  outline: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dc__rack:focus-visible {
  box-shadow: 6px 6px 0 var(--accent);
  transform: translate(-1px, -1px);
}
.dc__rack-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}
.dc__rack-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--paper);
  background: var(--ink);
  padding: 3px 6px;
}
.dc__rack h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.dc__rack-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
}
.dc__rack-nav { display: flex; gap: 4px; }
.dc__rack-arrow {
  width: 32px; height: 32px;
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.dc__rack-arrow:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.dc__rack-arrow:active { transform: translateY(1px); }
.dc__rack-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dc__rack-window {
  position: relative;
  height: 130px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 99px, rgba(26,22,20,0.05) 99px, rgba(26,22,20,0.05) 100px),
    linear-gradient(180deg, transparent, rgba(26,22,20,0.04));
}
.dc__rack-window.is-dragging { cursor: grabbing; }

/* edge fades */
.dc__rack-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 64px;
  z-index: 3;
  pointer-events: none;
}
.dc__rack-edge--l { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.dc__rack-edge--r { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }

/* center pointer / focus zone */
.dc__rack-pointer {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100px;
  transform: translateX(-50%);
  border-left: 1px dashed rgba(200,85,61,0.55);
  border-right: 1px dashed rgba(200,85,61,0.55);
  z-index: 2;
  pointer-events: none;
}
.dc__rack-pointer::before,
.dc__rack-pointer::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.dc__rack-pointer::before {
  top: -1px;
  border-top: 9px solid var(--accent);
}
.dc__rack-pointer::after {
  bottom: -1px;
  border-bottom: 9px solid var(--accent);
}

.dc__rack-track {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  display: flex;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.is-dragging .dc__rack-track { transition: none; }

.dc__chip {
  flex: 0 0 100px;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  padding: 10px 6px;
  cursor: pointer;
  position: relative;
  transition: transform 0.28s ease, opacity 0.28s ease;
  opacity: 0.88;
}
.dc__chip-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 100%;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.dc__chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
  display: block;
}
.dc__chip-no {
  position: absolute;
  bottom: 4px; right: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 1px 4px;
  border: 1px solid var(--rule);
}
.dc__chip-frame--none {
  background: repeating-linear-gradient(
    45deg, var(--paper-deep), var(--paper-deep) 6px,
    var(--paper) 6px, var(--paper) 12px
  );
  color: var(--ink-soft);
}
.dc__chip-frame--none::after {
  content: 'NONE';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--ink);
  pointer-events: none;
}
.dc__chip-frame--none svg { opacity: 0.35; }
.dc__chip:hover { opacity: 1; transform: translateY(-2px); }
.dc__chip.is-active {
  opacity: 1;
  transform: translateY(-3px);
}
.dc__chip.is-active .dc__chip-frame {
  border: 1.5px solid var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
  background: var(--paper);
}
.dc__chip.is-active .dc__chip-no {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---- CONTROLS ----
   3-column grid so Shuffle (the marquee action) sits dead-center,
   with Save/Reset on the left and the rack-hotkey hint on the right. */
.dc__controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
  margin-top: 8px;
}
.dc__controls-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dc__controls-side--right { justify-content: flex-end; }
@media (max-width: 720px) {
  .dc__controls { grid-template-columns: 1fr; justify-items: center; }
  .dc__controls-side--right { justify-content: center; }
}

.dc__btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  min-height: 44px;
}
.dc__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); transform: translateY(-1px); }
.dc__btn:active { transform: translateY(0); }
.dc__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dc__btn--ghost { background: transparent; color: var(--ink); }
.dc__btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Hero shuffle: larger, accent-colored, with a visible keycap so users know
   "S" works too. Position is enforced by the grid above. */
.dc__btn--hero {
  background: var(--accent);
  border-color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.22em;
  padding: 14px 26px;
  min-height: 52px;
  box-shadow: 3px 3px 0 var(--ink);
}
.dc__btn--hero:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 5px 5px 0 var(--accent);
}
.dc__btn--hero:active { box-shadow: 1px 1px 0 var(--ink); }
.dc__btn-key {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.55);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: inherit;
}

.dc__hotkeys {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dc__hotkeys kbd {
  display: inline-block;
  min-width: 22px;
  padding: 3px 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--ink);
}
@media (max-width: 820px) { .dc__hotkeys { display: none; } }

/* ============================================================
   GAME MODAL — vintage cartridge / handheld look
   ============================================================ */
.game-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(200,85,61,0.25), transparent 70%),
    rgba(26, 22, 20, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-modal.is-open { display: flex; }

/* paper "console sleeve" */
.game-modal__inner {
  position: relative;
  width: 100%;
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 16px 16px 0 var(--accent);
  animation: gm-rise 0.45s cubic-bezier(.2,.8,.3,1) both;
  padding: 18px 18px 16px;
  /* paper texture */
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(200,153,104,0.10) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0, transparent 38px, rgba(26,22,20,0.035) 38px, rgba(26,22,20,0.035) 39px),
    repeating-linear-gradient(90deg, transparent 0, transparent 38px, rgba(26,22,20,0.035) 38px, rgba(26,22,20,0.035) 39px);
  background-color: var(--paper);
}
@keyframes gm-rise {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.game-modal__inner::before,
.game-modal__inner::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.game-modal__inner::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.game-modal__inner::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* title bar */
.game-modal__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
  border-bottom: 1px dashed var(--rule);
  margin-bottom: 12px;
}
.game-modal__cartridge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 4px 8px;
}
.game-modal__cartridge::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(200,85,61,0.25);
  animation: gm-led 1.4s ease-in-out infinite;
}
@keyframes gm-led {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.game-modal__title {
  font-family: var(--display, 'Caveat', cursive);
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  margin: 0;
  flex: 1;
  font-style: normal;
}
.game-modal__tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 3px 6px;
}

/* screen */
.game-modal__screen {
  position: relative;
  background: #111;
  border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 6px #0a0a0a, inset 0 0 40px rgba(0,0,0,0.4);
  display: grid;
  place-items: center;
  /* keep iframe square but allow the right-hand itch controls visible — wider than 1:1 */
  aspect-ratio: 1 / 1;
  max-height: 70vh;
  overflow: hidden;
}
.game-modal__screen::before {
  /* CRT scanlines */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 3px
  );
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
}
.game-modal__screen::after {
  /* subtle vignette */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}
.game-modal__frame {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  background: #000;
  position: relative;
  z-index: 1;
}

/* close */
.game-modal__close {
  position: absolute;
  top: -18px; right: -18px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow: 4px 4px 0 var(--ink);
  transition: background 0.2s, color 0.2s, transform 0.25s;
}
.game-modal__close:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  transform: rotate(90deg);
}
.game-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* prev / next */
.game-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  z-index: 3;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.game-modal__nav:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.game-modal__nav--prev { left: -22px; }
.game-modal__nav--next { right: -22px; }
@media (max-width: 720px) {
  .game-modal__nav--prev { left: 4px; }
  .game-modal__nav--next { right: 4px; }
  .game-modal__close { top: -14px; right: -14px; width: 40px; height: 40px; }
}

/* meta footer */
.game-modal__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 4px 4px;
  margin-top: 12px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.game-modal__counter {
  background: var(--ink);
  color: var(--paper);
  padding: 4px 8px;
}
.game-modal__hint {
  margin-left: auto;
  color: var(--ink-soft);
}
.game-modal__hint kbd {
  display: inline-block;
  min-width: 18px;
  padding: 2px 5px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--ink);
  margin: 0 2px;
}
.game-modal__extlink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.game-modal__extlink:hover { color: var(--ink); }

/* ============================================================
   DIGITAL CLOSET — "See it on me" button + IRL photo modal
   ============================================================ */

/* dress / layer tag inside chip */
.dc__chip-tag {
  position: absolute;
  top: 4px; left: 6px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent-2);
  padding: 1px 5px;
  border-radius: 2px;
  pointer-events: none;
}
/* differentiate LAYER (outer rack) from DRESS so users can tell racks apart */
.dc__rack[data-rack="outer"] .dc__chip-tag {
  background: var(--ink);
}

/* "See it on me" button sitting on the stage */
.dc__irl {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 7;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.18s ease;
  animation: dc-irl-pulse 2.4s ease-in-out infinite;
}
.dc__irl:hover {
  background: var(--ink);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 6px 6px 0 var(--accent);
}
.dc__irl:active { transform: translateX(-50%) translateY(0); }
.dc__irl:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.dc__irl.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
  animation: none;
}
@keyframes dc-irl-pulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--ink); }
  50%      { box-shadow: 4px 4px 0 var(--ink), 0 0 0 6px rgba(200,85,61,0.18); }
}

/* IRL photo modal */
.irl-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(26, 22, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.irl-modal.is-open { display: flex; }
.irl-modal[hidden] { display: none !important; }

.irl-modal__inner {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 16px 16px 0 var(--accent);
  padding: 16px 16px 14px;
  animation: irl-rise 0.45s cubic-bezier(.2,.8,.3,1) both;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(200,153,104,0.10) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0, transparent 38px, rgba(26,22,20,0.035) 38px, rgba(26,22,20,0.035) 39px),
    repeating-linear-gradient(90deg, transparent 0, transparent 38px, rgba(26,22,20,0.035) 38px, rgba(26,22,20,0.035) 39px);
}
@keyframes irl-rise {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.irl-modal__inner::before,
.irl-modal__inner::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.irl-modal__inner::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.irl-modal__inner::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.irl-modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
  border-bottom: 1px dashed var(--rule);
  margin-bottom: 12px;
}
.irl-modal__tape {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  padding: 4px 8px;
}
.irl-modal__title {
  font-family: var(--display, 'Caveat', cursive);
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  margin: 0;
  flex: 1;
  font-style: normal;
}
.irl-modal__counter {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 3px 6px;
}

.irl-modal__frame {
  position: relative;
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  min-height: 320px;
  max-height: 70vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.irl-modal__img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.irl-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  z-index: 3;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.irl-modal__nav:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.irl-modal__nav--prev { left: 10px; }
.irl-modal__nav--next { right: 10px; }

.irl-modal__close {
  position: absolute;
  top: -16px; right: -16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  z-index: 3;
  box-shadow: 4px 4px 0 var(--ink);
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.irl-modal__close:hover {
  background: var(--accent); color: var(--paper); border-color: var(--accent);
  transform: rotate(90deg);
}
.irl-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.irl-modal__note {
  margin: 12px 4px 0;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-height: 1.2em;
}

/* dress mode: dim & disable the bottom rack */
.dc__rack.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}
.dc__rack.is-disabled::after {
  content: 'DRESS WORN — BOTTOM HIDDEN';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--accent);
  background: var(--paper);
  padding: 6px 12px;
  border: 1px solid var(--accent);
  pointer-events: none;
  z-index: 5;
}

/* ============================================================
   DIGITAL CLOSET — small-screen overrides (UX review fixes)
   ============================================================ */
@media (max-width: 520px) {
  .dc__rack-arrow { width: 44px; height: 44px; }
  .dc__rack-nav   { gap: 6px; }
  .dc__rack h3    { font-size: 11px; }
  .dc__rack-meta  { font-size: 9px; letter-spacing: 0.12em; }
  .dc__rack-head  { flex-wrap: wrap; }
  .dc__stamp--tl  { left: 14px; font-size: 9px; letter-spacing: 0.16em; }
  .dc__stamp--br  { right: 14px; font-size: 9px; letter-spacing: 0.16em; }
  .dc__irl        { bottom: 14px; padding: 9px 14px; font-size: 10px; }
  .dc__rack-pointer { width: 88px; }
  .dc__stage      { min-height: 0; }
}

/* Greyed tops when a dress is the active outfit */
.dc__chip.is-muted { opacity: 0.38; filter: grayscale(0.6); }
.dc__chip.is-muted:hover { opacity: 0.6; }

/* ============================================================
   DIGITAL CLOSET — Tabbed single-rack selector (Option A)
   ============================================================ */
.dc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 38px,
      rgba(26,22,20,0.03) 38px, rgba(26,22,20,0.03) 39px),
    var(--paper);
}
.dc__tab {
  /* 25% basis = 4 per row, the rest wrap to a second row */
  flex: 1 1 25%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  position: relative;
  bottom: -1px; /* so active tab's bottom border meets the strip line */
}
.dc__tab:hover { color: var(--ink); }
.dc__tab-num {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  background: var(--paper-deep);
  padding: 2px 6px;
  border: 1px solid var(--rule);
}
.dc__tab.is-active {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--ink);
  border-bottom-color: var(--paper);
}
.dc__tab.is-active .dc__tab-num {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.dc__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Only the active rack is visible; others are kept in DOM for state */
.dc__racks .dc__rack { display: none; }
.dc__racks .dc__rack.is-visible { display: block; }

/* Rack number stamp inside the head is now redundant with the tab number */
.dc__racks .dc__rack-num { display: none; }

/* ============================================================
   INTERACTIVE WORK CARDS — Play / Interactive badges + hover CTA
   Signals to visitors which selected-works cards are playable
   (Game Dev, Digital Closet) or actively explorable (Marketing).
   ============================================================ */

/* Small monochrome badge pinned to the image corner */
.work-card .play-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.work-card:hover .play-pill {
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}

/* Hover-only "→ try it" overlay on the three interactive cards.
   Sits inside the image wrap so it never overlaps the label below. */
.work-card.is-interactive .img-wrap::after {
  content: "→ try it";
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.work-card.is-interactive:hover .img-wrap::after {
  opacity: 1;
  transform: translateY(0);
}

/* Game Dev thumb is pixel-art; preserve crisp pixels */
.work-card.c1 .img-wrap img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}