/* GM.OS: a desktop from 1984 holding things made in 2026.
   Palette since 2026-09-23 (his words): the pink, "with shades of orange and
   yellow, like the prettiest sunset you've ever seen".
   After typesafe.ai, which Gavin picked on 2026-09-23: pastel dithered clouds,
   old-Mac windows with black title bars, a pixel mono for every label, and a
   tight grotesk set huge. The bitmap look is the point, so images and fields
   are drawn at low resolution and scaled up with pixelated rendering. */

@font-face {
  font-family: "Departure Mono";
  src: url("fonts/DepartureMono-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #fefefe;
  --ink: #1e1e1e;
  --ink-warm: #372a2e;
  --plum: #5a2a4a;
  --pink: #f386a1;
  --pink-deep: #e0648a;
  --magenta: #f35ee6;
  --lilac: #fbc3f3;
  --beige: #cdb49a;
  --sage: #abbab9;
  --coral: #ff7a59;
  --orange: #ff9f3d;
  --gold: #ffc94a;
  --yellow: #ffe98a;
  --win: #dedede;
  --win-deep: #c4c4c4;
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --pixel: "Departure Mono", "JetBrains Mono", ui-monospace, monospace;
  --gut: clamp(16px, 5vw, 100px);
  --frame: min(1240px, calc(100vw - 2 * var(--gut)));
  --step: steps(5, end);
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection {
  background: var(--ink);
  color: var(--pink);
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 3px;
}

.px {
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: 0;
}

/* ------------------------------------------------------------- chips nav */
.chips {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.chips > div {
  display: flex;
  gap: 5px;
  pointer-events: auto;
}
.chip {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  padding: 6px 7px 7px;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  transition:
    background 0.12s var(--step),
    color 0.12s var(--step);
}
.chip:hover,
.chip.dark {
  background: var(--ink);
  color: var(--paper);
}
.chip.dark:hover {
  background: var(--gold);
  color: var(--ink);
}
@media (max-width: 640px) {
  .chips .mid {
    display: none;
  }
  .chip {
    font-size: 16px;
  }
}

/* menubar: the scroll-aware nav, as a System 1 menu bar */
.menubar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  font-size: 14px;
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.menubar.on {
  transform: none;
  opacity: 1;
}
.menubar a {
  text-decoration: none;
  padding: 2px 6px;
}
.menubar a:hover {
  background: var(--ink);
  color: var(--paper);
}
.menubar .mark {
  width: 16px;
  height: 16px;
}
.menubar .clock {
  margin-left: auto;
  font-size: 13px;
}
@media (max-width: 640px) {
  .menubar .opt {
    display: none;
  }
}

/* ------------------------------------------------------------- hero */
#hero {
  position: relative;
  padding-bottom: 80px;
}
.clouds {
  position: relative;
  height: min(64svh, 620px);
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.clouds canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* windows: shared by the hero, the desktop and the inspector */
.win {
  background: var(--win);
  border: 1px solid var(--ink);
  box-shadow:
    inset 0 0 0 2px var(--win),
    inset 0 0 0 3px var(--ink);
  color: var(--ink);
  text-align: left;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 4px;
  font-family: var(--pixel);
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.win-bar .t {
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-px {
  display: inline-block;
  margin-top: 12px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--pixel);
  font-size: 16px;
  padding: 10px 22px;
  text-decoration: none;
  transition:
    background 0.1s var(--step),
    color 0.1s var(--step);
}
.btn-px:hover {
  background: var(--gold);
  color: var(--ink);
}

.b64 {
  position: absolute;
  left: max(8px, calc(var(--gut) / 2 - 6px));
  top: min(64svh, 620px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--pixel);
  font-size: 10px;
  color: #777;
  height: 520px;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .b64 {
    display: none;
  }
}

/* crop marks frame a band, the way a print sheet is marked */
.crop {
  position: relative;
  width: var(--frame);
  margin: 0 auto;
  padding: 56px 0;
}
.crop::before,
.crop::after,
.crop > .cm::before,
.crop > .cm::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--ink);
  border-style: solid;
}
.crop::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}
.crop::after {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0;
}
.crop > .cm::before {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px;
}
.crop > .cm::after {
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

.dots-line {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 18px;
  letter-spacing: -0.02em;
  flex-wrap: wrap;
  text-align: center;
}
.dots-line .lead {
  overflow: hidden;
  max-width: 22ch;
  white-space: nowrap;
  color: var(--ink);
}

.mega {
  font-family: var(--display);
  font-weight: 600;
  text-align: center;
  font-size: clamp(50px, 9.2vw, 144px);
  line-height: 0.86;
  letter-spacing: -0.065em;
  margin: 44px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
#mega {
  /* grows upward, into the part already scrolled away, so the three-line
     headline of 2026-09-23 never stretches down over the buttons */
  transform-origin: 50% 100%;
  will-change: transform;
}
.mega .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.02em 0.06em;
  margin-bottom: -0.06em;
}
.mega .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.1, 1);
}
.in .mega .w > span,
.mega.in .w > span {
  transform: none;
}

.cta-big {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 7vw, 90px);
  margin-top: 56px;
  flex-wrap: wrap;
}
.cta-big a {
  font-weight: 600;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: -0.055em;
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  transition:
    color 0.12s var(--step),
    background 0.12s var(--step);
}
.cta-big a:hover {
  background: var(--ink);
  color: var(--pink);
  text-decoration: none;
}

/* ------------------------------------------------------------- desktop */
.band {
  background: var(--pink);
  color: var(--ink-warm);
  position: relative;
}
.band.orange {
  background: var(--orange);
}
.band.gold {
  background: var(--gold);
}

.pill-px {
  font-family: var(--pixel);
  font-size: 13px;
  background: var(--win-deep);
  padding: 2px 5px;
}

/* boot: windows pop in on stepped frames, like a 1984 redraw */

/* ------------------------------------------------------------- inspector */

.rows {
  border-top: 1px solid var(--ink);
  margin: 0;
}
.rows > div {
  display: grid;
  grid-template-columns: minmax(130px, 38%) 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--ink);
}
.rows dt {
  font-family: var(--pixel);
  font-size: 15px;
}
.rows dt span {
  background: var(--ink);
  color: var(--paper);
  padding: 1px 5px;
}
.rows dd {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.015em;
}
.rows dd.need {
  font-family: var(--pixel);
  font-size: 13px;
  color: #8a1f4a;
}

/* ------------------------------------------------------------- statement */

.cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 70px;
}

@media (max-width: 860px) {
  .cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  
}
.interests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.interests .pill-px {
  background: var(--paper);
  font-size: 14px;
  padding: 3px 7px;
}
.record {
  width: 100%;
}
.record .rows dd {
  font-size: 17px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 20px;
  margin-top: 10px;
}
.stat {
  border-left: 1px solid var(--ink-warm);
  padding-left: 10px;
}
.stat .n {
  font-weight: 600;
  font-size: clamp(58px, 8vw, 112px);
  letter-spacing: -0.06em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.stat .c {
  font-size: 19px;
  margin-top: 8px;
  max-width: 30ch;
}
@media (max-width: 560px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------- footer */

.build {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.build .big {
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 76px);
  letter-spacing: -0.06em;
  line-height: 0.95;
}
.build .big a {
  text-decoration: none;
}
.build .big a:hover {
  background: var(--ink);
  color: var(--pink);
}
.build .arrows {
  font-family: var(--pixel);
  font-size: clamp(28px, 4vw, 52px);
}
@media (max-width: 720px) {
  .build {
    grid-template-columns: 1fr;
  }
  .build .arrows {
    transform: rotate(90deg);
    width: max-content;
  }
}
.foot-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--pixel);
  font-size: 14px;
  padding: 30px 0 18px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .mega .w > span {
    transform: none;
  }
  
}

/* ------------------------------------------------------------- ⌘K */

@keyframes pop {
  from {
    transform: translateX(-50%) scale(0.94);
    opacity: 0;
  }
}

/* ------------------------------------------------------------- agent cursor */

@keyframes poke {
  50% {
    transform: translateY(3px);
  }
}

/* ------------------------------------------------------------- startup */
.startup {
  display: none;
}
.startup.on {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background-color: var(--ink);
  background-image: repeating-conic-gradient(#2c2c2c 0 25%, transparent 0 50%);
  background-size: 4px 4px;
  cursor: pointer;
}
.startup.out {
  opacity: 0;
  transition: opacity 0.4s var(--step);
}

@keyframes pop-box {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

@keyframes spin-in {
  to {
    transform: rotate(180deg);
  }
}
.startup-bar {
  width: 200px;
  height: 12px;
  border: 1px solid var(--ink);
  padding: 1px;
}
.startup-bar span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--coral) 0 8px, var(--gold) 8px 16px);
  width: 0;
  animation: load 1.9s steps(12, end) forwards;
}
@keyframes load {
  to {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mega {
    transform: none !important;
  }
}

/* ------------------------------------------------------------- photos
   Dithered bitmaps, always. The hover that developed them into colour came
   out 2026-09-23: Gavin kept the grain and dropped the reveal. */

.frame {
  position: relative;
  border: 1px solid var(--ink);
  overflow: hidden;
  background: var(--paper);
}
.frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.snap figcaption {
  font-family: var(--pixel);
  font-size: 13px;
  margin-top: 6px;
}
.snaps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 12px;
  margin-bottom: 22px;
}
.snap {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 6px 6px 4px;
  transform: rotate(var(--r));
  transition: transform 0.2s var(--step);
}
.snap .frame canvas {
  height: auto;
  aspect-ratio: var(--ar);
}
.snap:hover {
  transform: rotate(0deg) translateY(-4px);
}