.retro-home {
  --os-ink: #171916;
  --os-paper: #eadbb7;
  --os-paper-light: #f5edd8;
  --os-blue: #2f61b7;
  --os-blue-dark: #21447e;
  --os-gold: #eec45b;
  --os-red: #b84c3e;
  --os-green: #45705c;
  --os-pink: #d77886;
  min-width: 320px;
  color: var(--os-ink);
  background: #bab09a;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  image-rendering: auto;
}

.retro-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.32) 0 1px, transparent 1.5px) 0 0 / 17px 19px,
    radial-gradient(circle at 75% 60%, rgba(20,20,15,.12) 0 1px, transparent 1.4px) 0 0 / 23px 29px,
    linear-gradient(135deg, #c4baa4, #a79d88);
}

.retro-home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .11;
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.13) 2px 3px);
}

.retro-home[data-page="home"] { color: var(--os-paper-light); background: #10120f; }
.retro-home[data-page="home"]::before { opacity: 0; }
.retro-home[data-page="home"] .studio-desktop { border-color: #050605; background: #121411; box-shadow: 8px 8px 0 rgba(0,0,0,.72); }
.retro-home[data-page="home"] main { background: #121411; }
.retro-home[data-page="home"] .os-bar { border-bottom: 1px solid rgba(245,237,216,.12); color: var(--os-paper-light); background: rgba(18,20,17,.84); box-shadow: none; backdrop-filter: blur(14px); }
.retro-home[data-page="home"] .os-brand { opacity: .78; }
.retro-home[data-page="home"] .os-brand img { width: 32px; height: 32px; }
.retro-home[data-page="home"] .os-brand strong { font-weight: 500; letter-spacing: .08em; }

.retro-home .pointer-aura { display: none; }
.retro-home a:focus-visible, .retro-home button:focus-visible { outline: 3px solid var(--os-gold); outline-offset: 3px; }
.studio-desktop { width: min(1600px, calc(100% - 36px)); margin: 18px auto; border: 2px solid var(--os-ink); background: var(--os-paper); box-shadow: 8px 8px 0 rgba(23,25,22,.7); }

.os-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 54px;
  padding: 7px 10px;
  border-bottom: 2px solid var(--os-ink);
  color: var(--os-ink);
  background: var(--os-paper-light);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), inset 0 2px 0 #fff;
}
.os-brand { display: flex; align-items: center; gap: 10px; width: max-content; color: inherit; text-decoration: none; text-transform: uppercase; }
.os-brand img { width: 38px; height: 38px; object-fit: contain; }
.os-brand strong { font-size: 12px; letter-spacing: .04em; }
.os-clock { justify-self: end; display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; }
.status-light { width: 9px; height: 9px; border: 1px solid var(--os-ink); border-radius: 50%; background: #6ead62; box-shadow: inset 1px 1px 0 rgba(255,255,255,.65); }

.retro-home main { padding: 22px; }
.desktop-window, .app-window { position: relative; border: 2px solid var(--os-ink); background: var(--os-paper-light); box-shadow: 5px 5px 0 var(--os-ink), inset 1px 1px 0 rgba(255,255,255,.9); }
.window-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 38px; padding: 5px 7px; border-bottom: 2px solid var(--os-ink); color: var(--os-paper-light); background: var(--os-blue-dark); box-shadow: inset 0 2px 0 rgba(255,255,255,.22); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.window-bar > span { justify-self: center; }
.window-controls { display: flex; gap: 4px; }.window-controls i { display: block; width: 11px; height: 11px; border: 1px solid var(--os-paper-light); }.window-controls i:first-child { background: var(--os-gold); }
.window-bar button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--os-ink); color: var(--os-ink); background: var(--os-paper-light); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,.35); cursor: default; font: 700 15px/1 "Courier New", monospace; }
.window-bar.is-small { grid-template-columns: 1fr auto; }.window-bar.is-small span { justify-self: start; }
.window-status { display: flex; justify-content: space-between; gap: 18px; padding: 7px 10px; border-top: 2px solid var(--os-ink); background: var(--os-paper); font-size: 8px; font-weight: 700; letter-spacing: .06em; }

.hero-window { display: flex; min-height: calc(100svh - 112px); overflow: hidden; flex-direction: column; }
.hero-workspace { position: relative; display: grid; flex: 1; grid-template-columns: 1.15fr .85fr; min-height: calc(100svh - 145px); background-color: var(--os-ink); background-image: linear-gradient(rgba(234,219,183,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(234,219,183,.055) 1px, transparent 1px); background-size: 56px 56px; }
.hero-copy { position: relative; z-index: 3; align-self: center; padding: clamp(45px, 6vw, 95px); color: var(--os-paper-light); }
.dos-path { margin: 0 0 30px; color: var(--os-gold); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.hero-copy h1 { margin: 0; font: 900 clamp(4.25rem, 7.7vw, 8.4rem)/.72 "Courier New", ui-monospace, monospace; text-transform: uppercase; letter-spacing: -.1em; text-shadow: 3px 3px 0 var(--os-blue-dark); }
.hero-copy h1 em { color: var(--os-gold); font-style: normal; }
.hero-intro { max-width: 510px; margin: 38px 0 0 18%; color: var(--os-paper); font: 700 clamp(.95rem, 1.4vw, 1.2rem)/1.4 "Courier New", monospace; }
.ui-button { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 16px; border: 2px solid var(--os-ink); color: var(--os-ink); background: var(--os-paper-light); box-shadow: 3px 3px 0 var(--os-ink), inset 1px 1px 0 #fff; font-size: 10px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; transition: transform .12s, box-shadow .12s; }
.ui-button:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--os-ink); }.ui-button.is-primary { color: var(--os-paper-light); background: var(--os-blue); }
.hero-emblem { position: relative; z-index: 2; align-self: center; justify-self: center; width: min(68%, 430px); perspective: 900px; }
.emblem-frame { --hand-rotate-x: 0deg; --hand-rotate-y: 0deg; position: relative; display: block; overflow: hidden; width: 100%; padding: 0; aspect-ratio: 1122 / 1402; border: 2px solid var(--os-paper); border-radius: 0; color: var(--os-ink); background: #121411; box-shadow: 12px 12px 0 var(--os-blue), -12px -12px 0 var(--os-red); appearance: none; cursor: pointer; transform: rotateX(var(--hand-rotate-x)) rotateY(var(--hand-rotate-y)); transform-style: preserve-3d; transition: transform .16s ease, box-shadow .18s ease; }
.emblem-frame:hover, .emblem-frame:focus-visible { box-shadow: 16px 16px 0 var(--os-blue), -16px -16px 0 var(--os-red); }
.emblem-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 58%; }
.hand-prompt { position: absolute; right: 50%; bottom: 18px; z-index: 3; padding: 8px 11px; border: 2px solid var(--os-ink); color: var(--os-ink); background: var(--os-gold); box-shadow: 3px 3px 0 var(--os-ink); font: 700 9px/1 "Courier New", monospace; letter-spacing: .08em; opacity: 0; transform: translate(50%, 8px); transition: opacity .16s ease, transform .16s ease; }
.hand-interaction:hover .hand-prompt, .hand-interaction:focus-visible .hand-prompt { opacity: 1; transform: translate(50%, 0); }
.hand-interaction.is-high-fived img { animation: hand-high-five .62s cubic-bezier(.18,.84,.32,1.28); }
.hand-interaction.is-high-fived .hand-prompt { opacity: 1; transform: translate(50%, 0); }
.hand-spark { position: absolute; top: 46%; left: 50%; z-index: 5; color: var(--os-gold); pointer-events: none; text-shadow: 2px 2px 0 var(--os-blue-dark); font: 700 24px/1 Georgia, serif; animation: hand-spark .72s ease-out forwards; }
@keyframes hand-high-five { 0%, 100% { transform: translateY(0) scale(1); } 38% { transform: translateY(-14px) scale(1.045); } 62% { transform: translateY(4px) scale(.99); } }
@keyframes hand-spark { from { opacity: 1; transform: translate(-50%, -50%) scale(.35) rotate(0); } to { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1.2) rotate(var(--spark-r)); } }
.emblem-caption { display: flex; justify-content: space-between; margin-top: 21px; padding-top: 9px; border-top: 1px solid var(--os-paper); color: var(--os-paper); font-size: 8px; }
.studio-note { position: absolute; right: 4%; bottom: 5%; z-index: 4; width: 190px; padding: 17px; border: 2px solid var(--os-ink); transform: rotate(3deg); background: var(--os-gold); box-shadow: 5px 5px 0 var(--os-ink); font-family: Georgia, serif; }
.studio-note b { font: 700 9px "Courier New", monospace; }.studio-note p { margin: 18px 0; font-size: 1.05rem; line-height: 1.2; }.studio-note span { display: block; text-align: right; font-size: .8rem; font-style: italic; }

.desktop-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; padding: 18px 14px; border-top: 2px solid var(--os-ink); color: var(--os-paper-light); background: var(--os-ink); font-size: 8px; font-weight: 700; letter-spacing: .07em; }
.desktop-footer > span:last-child { text-align: right; }
.footer-legal { padding: 6px 9px; color: inherit; text-decoration: none; opacity: .48; transition: opacity .15s ease, background-color .15s ease; }
.footer-legal:hover, .footer-legal:focus-visible, .footer-legal[aria-current="page"] { color: var(--os-paper-light); background: rgba(245,237,216,.09); opacity: 1; }

.retro-home .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }.retro-home .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1060px) {
  .hero-workspace { grid-template-columns: 1fr 1fr; }.studio-note { display: none; }.hero-copy { padding: 55px 35px; }.hero-copy h1 { font-size: clamp(4rem, 8vw, 7rem); }
}

@media (max-width: 720px) {
  .retro-home { background: var(--os-paper); }.studio-desktop { width: 100%; margin: 0; border-right: 0; border-left: 0; box-shadow: none; }.os-bar { min-height: 48px; }.os-brand img { width: 32px; height: 32px; }.os-brand strong { font-size: 9px; }.os-clock { font-size: 7px; }
  .retro-home main { padding: 9px; }
  .hero-window { min-height: auto; }.hero-workspace { grid-template-columns: 1fr; min-height: 0; }.hero-copy { padding: 50px 24px 35px; }.hero-copy h1 { font-size: clamp(3.45rem, 17vw, 5.8rem); }.hero-intro { margin-left: 0; }.hero-emblem { width: 78%; margin: 20px auto 55px; }.emblem-caption { font-size: 6px; }
  .desktop-footer { grid-template-columns: 1fr; }.desktop-footer > span:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .retro-home .reveal { opacity: 1; transform: none; }
  .emblem-frame { transform: none !important; transition: none; }
  .hand-interaction.is-high-fived img, .hand-spark { animation: none; }
}

/* Scroll-led project catalogue */
.snap-home { scroll-padding-top: 54px; scroll-snap-type: y mandatory; }
.snap-home .hero-window, .snap-home .project-feed__intro, .snap-home .project-chapter, .snap-home .site-closing { scroll-snap-align: start; scroll-snap-stop: always; }
.project-feed { --catalogue-display: Georgia, "Times New Roman", serif; --catalogue-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --catalogue-mono: "Courier New", ui-monospace, monospace; --catalogue-text: #f5edd8; --catalogue-muted: rgba(245,237,216,.6); position: relative; margin: 0 0 34px; color: var(--catalogue-text); scroll-margin-top: 54px; }
.project-feed__intro { display: grid; align-items: center; min-height: calc(100svh - 54px); padding: clamp(54px, 8vw, 120px) clamp(18px, 4vw, 64px); background: transparent; }
.project-feed__intro span { color: rgba(245,237,216,.42); font: 600 8px/1 var(--catalogue-mono); letter-spacing: .13em; }
.project-feed__intro h2 { max-width: 930px; margin: 25px 0 0; color: var(--catalogue-text); font: 400 clamp(4rem, 8vw, 8.7rem)/.78 var(--catalogue-display); letter-spacing: -.075em; }
.project-feed__intro p { max-width: 620px; margin: clamp(30px, 4vw, 52px) 0 0; color: rgba(245,237,216,.64); font: 400 clamp(.96rem, 1.25vw, 1.18rem)/1.6 var(--catalogue-sans); }
.project-chapter { --chapter-ink: #f5edd8; --chapter-accent: #eec45b; --chapter-title: var(--chapter-accent); position: relative; display: grid; min-height: calc(100svh - 54px); grid-template-columns: minmax(320px, .58fr) minmax(0, 1.42fr); margin: 0; color: var(--chapter-ink); background: transparent; }
.project-chapter--cursor { --chapter-accent: #eec45b; }
.project-chapter--captions { --chapter-accent: #cf7568; }
.project-chapter--force { --chapter-accent: #7fa48f; }
.project-chapter--fun { --chapter-accent: #d77886; }
.project-chapter--dreamline { --chapter-accent: #7393cf; }
.project-chapter--stars { --chapter-accent: #c2ae7c; }
.project-chapter--gaze { --chapter-accent: #73a6a0; }
.project-chapter--mekh { --chapter-accent: #d89a58; }
.project-chapter--echo { --chapter-accent: #8b83c6; }
.project-chapter--launcher { --chapter-accent: #ba6858; }
@media (min-width: 981px) {
  .project-chapter:nth-of-type(even) { grid-template-columns: minmax(0, 1.42fr) minmax(320px, .58fr); }
  .project-chapter:nth-of-type(even) .project-chapter__copy { order: 2; }
  .project-chapter:nth-of-type(even) .project-gallery { order: 1; }
}
.project-chapter__copy { position: relative; display: flex; min-width: 0; justify-content: center; padding: clamp(92px, 10vh, 140px) clamp(42px, 5.5vw, 90px) clamp(58px, 7vh, 96px); flex-direction: column; }
.project-chapter__topline { position: absolute; top: clamp(34px, 4.5vh, 60px); right: clamp(42px, 5.5vw, 90px); left: clamp(42px, 5.5vw, 90px); display: flex; justify-content: space-between; gap: 18px; color: rgba(245,237,216,.34); font: 600 7px/1.35 var(--catalogue-mono); letter-spacing: .11em; }
.project-chapter__topline strong { max-width: 58%; padding: 0; border: 0; font: inherit; text-align: right; }
.project-chapter__mark { display: grid; width: clamp(45px, 4vw, 58px); margin: 0 0 clamp(30px, 4vh, 48px); aspect-ratio: 1; place-items: center; border: 0; color: #10120f; background: var(--chapter-accent); box-shadow: none; font: 700 clamp(1rem, 1.35vw, 1.35rem)/1 var(--catalogue-sans); }
.project-chapter__copy h3 { margin: 0; color: var(--chapter-title); font: 400 clamp(4rem, 6vw, 7.1rem)/.79 var(--catalogue-display); letter-spacing: -.075em; }
.project-chapter__copy > p { max-width: 440px; margin: clamp(30px, 4vh, 46px) 0 0; color: rgba(245,237,216,.68); font: 400 clamp(.94rem, 1.12vw, 1.08rem)/1.65 var(--catalogue-sans); }
.project-chapter__facts { display: flex; gap: clamp(25px, 4vw, 58px); max-width: 520px; margin: clamp(30px, 4vh, 48px) 0 0; }
.project-chapter__facts div { min-width: 95px; padding: 0; }.project-chapter__facts div + div { padding-left: 0; border-left: 0; }
.project-chapter__facts dt { margin-bottom: 7px; color: rgba(245,237,216,.28); font: 600 6px/1 var(--catalogue-mono); letter-spacing: .11em; text-transform: uppercase; }.project-chapter__facts dd { margin: 0; color: rgba(245,237,216,.52); font: 400 11px/1.25 var(--catalogue-sans); }
.project-chapter__learn { width: max-content; min-height: 0; margin-top: 30px; padding: 0; border: 0; color: rgba(245,237,216,.46); background: transparent; box-shadow: none; font: 600 8px/1.2 var(--catalogue-mono); }
.project-chapter__learn:disabled { cursor: default; opacity: .42; filter: none; }
.project-chapter__learn:disabled:hover { transform: none; box-shadow: none; }

.project-gallery { display: flex; min-width: 0; padding: clamp(58px, 7vw, 108px) clamp(34px, 5vw, 78px); flex-direction: column; color: var(--catalogue-text); background: transparent; }
.project-gallery__header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 13px; color: rgba(245,237,216,.34); font: 600 7px/1 var(--catalogue-mono); letter-spacing: .11em; }
.project-gallery__track { display: flex; min-width: 0; margin: auto 0; gap: clamp(18px, 2.4vw, 34px); overflow-x: auto; overscroll-behavior-inline: contain; padding: 28px 5% 24px 2px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.project-gallery__track::-webkit-scrollbar { display: none; }
.app-shot { flex: 0 0 min(86%, 820px); min-width: 0; margin: 0; scroll-snap-align: start; }
.app-shot__canvas { position: relative; display: grid; overflow: hidden; aspect-ratio: 16 / 10; place-items: center; border: 1px solid rgba(245,237,216,.18); color: var(--catalogue-text); background: #1a1d19; box-shadow: 7px 7px 0 rgba(0,0,0,.38); }
.app-shot__canvas::before { display: none; }
.app-shot__canvas::after { position: absolute; width: 48%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: .1; box-shadow: inset 0 0 0 34px rgba(245,237,216,.12), 0 0 0 60px rgba(245,237,216,.04); }
.app-shot__canvas > span { position: absolute; top: 24px; left: 26px; color: rgba(245,237,216,.42); font: 600 7px/1 var(--catalogue-mono); letter-spacing: .08em; }
.app-shot__canvas b { position: relative; z-index: 2; font: 400 clamp(2.4rem, 5vw, 6rem)/.84 var(--catalogue-display); letter-spacing: -.065em; }
.app-shot__canvas i { position: absolute; right: 25px; bottom: 23px; font: 600 6px/1 var(--catalogue-mono); font-style: normal; letter-spacing: .1em; opacity: .35; }
.app-shot:nth-child(2) .app-shot__canvas { color: var(--catalogue-text); background: color-mix(in srgb, var(--chapter-accent) 62%, #111310); }.app-shot:nth-child(3) .app-shot__canvas { color: var(--catalogue-text); background: color-mix(in srgb, var(--chapter-accent) 38%, #111310); }
.app-shot figcaption { padding: 16px 3px 0; color: rgba(245,237,216,.5); font: 400 12px/1.4 var(--catalogue-sans); }
.project-gallery__controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.project-gallery__controls button { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid currentColor; color: inherit; background: transparent; cursor: pointer; font: 700 16px/1 "Courier New", monospace; }
.project-gallery__controls button:hover { color: #10120f; background: var(--chapter-accent); }
.project-gallery__controls button:disabled { cursor: default; opacity: .3; }.project-gallery__controls button:disabled:hover { color: inherit; background: transparent; }
.project-gallery__line { height: 1px; background: rgba(245,237,216,.18); }.project-gallery__line i { display: block; width: 33.333%; height: 3px; background: var(--chapter-accent); transform: translateY(-1px); transition: transform .2s ease; }

@media (max-width: 980px) {
  .project-chapter { grid-template-columns: minmax(270px, .68fr) minmax(0, 1.32fr); }
  .project-chapter__copy { padding: 96px 38px 58px; }
  .project-chapter__topline { top: 38px; right: 38px; left: 38px; }
  .project-chapter__copy h3 { font-size: clamp(3.2rem, 7vw, 5.2rem); }
  .app-shot { flex-basis: 94%; }
}

@media (max-width: 720px) {
  .snap-home { scroll-padding-top: 48px; }
  .project-feed { margin-top: 0; }
  .project-feed__intro { grid-template-columns: 1fr; align-content: center; gap: 30px; min-height: calc(100svh - 48px); padding: 58px 22px; }
  .project-feed__intro h2 { font-size: clamp(3.1rem, 16vw, 5.4rem); }
  .project-chapter { display: flex; min-height: calc(100svh - 48px); flex-direction: column; }
  .project-chapter__copy { min-height: 60svh; padding: 54px 24px 64px; }
  .project-chapter__topline { top: 28px; right: 24px; left: 24px; align-items: start; }
  .project-chapter__mark { margin: 34px 0; }
  .project-chapter__copy h3 { font-size: clamp(3.8rem, 20vw, 6rem); }
  .project-gallery { min-height: 58svh; padding: 52px 20px 62px; }
  .project-gallery__track { padding-right: 14%; gap: 16px; }
  .app-shot { flex-basis: 92%; }
  .app-shot__canvas b { font-size: clamp(2rem, 12vw, 3.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery__track { scroll-behavior: auto; }
}

.site-closing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 6vw, 90px); margin: 34px -22px -22px; padding: 38px clamp(24px, 5vw, 72px); border-top: 1px solid rgba(245,237,216,.15); color: var(--os-paper-light); background: transparent; }
.site-closing__copy > span { display: block; color: var(--os-gold); font-size: 7px; font-weight: 700; letter-spacing: .11em; }
.site-closing h2 { margin: 11px 0 0; font: 900 clamp(1.55rem, 2.8vw, 2.8rem)/.94 "Courier New", monospace; letter-spacing: -.065em; text-transform: uppercase; }
.site-closing p { max-width: 720px; margin: 13px 0 0; color: var(--os-paper); font-size: clamp(.72rem, .9vw, .84rem); font-weight: 700; line-height: 1.5; opacity: .78; }
.site-closing__button { min-height: 38px; padding: 8px 13px; color: var(--os-paper-light); background: transparent; border-color: rgba(245,237,216,.7); box-shadow: none; white-space: nowrap; }
.site-closing__button:hover { color: var(--os-ink); background: var(--os-gold); box-shadow: none; transform: none; }

@media (max-width: 720px) {
  .site-closing { grid-template-columns: 1fr; align-items: start; gap: 24px; margin: 26px -9px -9px; padding: 34px 24px 38px; }
  .site-closing h2 { font-size: clamp(1.55rem, 8vw, 2.35rem); }
  .site-closing__button { justify-self: start; }
}