/* TechKitties — the design plays it straight. The copy carries the joke. */

:root{
  --bg:#0A0A0A;
  --ink:#FAFAFA;
  --muted:#8A8A8A;
  --dot:#FF2D2D;
  --hairline:#262626;

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1120px;
  --gut:clamp(20px,5vw,48px);
  --section-y:clamp(88px,14vh,176px);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--bg);
  padding:10px 16px;z-index:100;font-family:var(--mono);font-size:13px;
}
.skip:focus{left:8px;top:8px}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut);
}

/* ---------- header ---------- */

.header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--hairline);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:68px;
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none}

/* the mark is a masked element: the PNG's white line work becomes the mask,
   so whatever we paint behind it shows through in the shape of the cat. */
.brand__mark{
  position:relative;
  display:block;width:36px;height:36px;
  background:var(--ink);
  -webkit-mask:url("assets/logo.png") center/contain no-repeat;
          mask:url("assets/logo.png") center/contain no-repeat;
  cursor:pointer;
}
/* The mask clips descendants too, so this overlay is cat-shaped as well.
   White stays underneath; the rainbow fades in over it and fades back out. */
.brand__mark::before{
  content:"";
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .45s ease;
  background-image:linear-gradient(90deg,
    hsl(0 85% 66%), hsl(60 85% 66%), hsl(120 85% 66%),
    hsl(180 85% 66%), hsl(240 85% 66%), hsl(300 85% 66%), hsl(360 85% 66%));
  background-size:400% 100%;
}

.brand__word{
  font-family:var(--mono);
  font-size:13px;letter-spacing:.22em;font-weight:500;
  white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:clamp(12px,3vw,28px)}
.nav__link{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  text-decoration:none;color:var(--muted);
  transition:color .2s ease;
}
.nav__link:hover{color:var(--ink)}

/* ---------- buttons ---------- */

.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  padding:11px 20px;border-radius:var(--r);
  border:1px solid var(--hairline);
  background:transparent;color:var(--ink);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease,opacity .2s ease;
}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.btn--primary{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
  font-weight:500;
}
.btn--primary:hover{background:transparent;color:var(--ink)}

/* ---------- product tooltip ---------- */

.tip{position:relative;display:inline-flex}
.tip__bubble{
  position:absolute;top:calc(100% + 10px);right:0;
  font-family:var(--mono);font-size:13px;
  background:var(--ink);color:var(--bg);
  padding:7px 12px;border-radius:var(--r);
  white-space:nowrap;
  opacity:0;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.tip__bubble[hidden]{display:none}
.tip__bubble.is-shown{opacity:1;transform:translateY(0)}

/* ---------- hero ---------- */

.hero{
  min-height:100svh;
  display:flex;align-items:center;
  position:relative;
  padding-block:var(--gut);
}
.hero__inner{max-width:760px}

h1{
  font-family:var(--display);
  font-size:clamp(2.5rem,7.5vw,5rem);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:500;
  margin:0 0 22px;
}

.hero__sub{
  color:var(--muted);
  font-size:clamp(1rem,1.6vw,1.15rem);
  max-width:46ch;
  margin:0 0 40px;
}

/* ---------- sections ---------- */

.section{
  padding-block:var(--section-y);
  border-top:1px solid var(--hairline);
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.24em;
  color:var(--muted);
  margin:0 0 28px;
}

.prose{
  max-width:60ch;
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  line-height:1.65;
  margin:0 0 44px;
}

/* ---------- stats ---------- */

.stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,4vw,56px);
  margin:0;padding-top:12px;
  border-top:1px solid var(--hairline);
}
.stat{margin:0;padding-top:26px}
.stat__num{
  font-family:var(--display);
  font-size:clamp(2.25rem,5.5vw,3.25rem);
  line-height:1;font-weight:500;letter-spacing:-.02em;
  margin:0 0 8px;
}
.stat__label{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.12em;
  color:var(--muted);margin:0;
}
.inline-dot{
  display:inline-block;
  width:5px;height:5px;border-radius:50%;
  background:var(--dot);
  margin-left:6px;vertical-align:middle;
}

/* ---------- team ---------- */

.team{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(20px,3vw,36px);
}
.card{margin:0}
.card__photo{
  aspect-ratio:4/5;
  /* quiet placeholder, visible only until the render lands on top of it */
  background:
    repeating-linear-gradient(45deg,#101010 0 12px,#151515 12px 24px);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:18px;
  position:relative;
}
.card__photo img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}

.card__name{
  font-family:var(--display);
  font-size:1.1rem;font-weight:500;letter-spacing:-.01em;
  margin:0 0 5px;
}
.card__title{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.12em;
  color:var(--muted);
  margin:0 0 10px;
}
.card__bio{
  font-size:.95rem;color:var(--muted);
  margin:0;max-width:32ch;
}

/* the intern's card is very slightly wrong. nobody mentions it. */
.card--intern .card__photo img{
  transform:translate(1.5px,-1px);
  filter:blur(.35px);
}

/* ---------- channels ---------- */

.channels{
  font-family:var(--mono);
  font-size:.9rem;line-height:1.85;
  color:var(--muted);
  max-width:72ch;
}
.channels strong{color:var(--ink);font-weight:500}
.channels a{color:var(--ink);text-underline-offset:3px}
.channels .sig{display:block;margin-top:22px;color:var(--muted)}

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

.footer{
  border-top:1px solid var(--hairline);
  padding-block:44px;
}
.footer__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.footer__brand{display:flex;align-items:center;gap:12px}
.footer__mark{
  display:block;width:22px;height:22px;
  background:var(--muted);
  -webkit-mask:url("assets/logo.png") center/contain no-repeat;
          mask:url("assets/logo.png") center/contain no-repeat;
}
.footer__copy{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);margin:0;
}
.footer__links{display:flex;gap:20px}
.footer__links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--muted);text-decoration:none;
}
.footer__links a:hover{color:var(--ink)}

/* ---------- the dot ---------- */

.dot{
  position:absolute;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--dot);
  pointer-events:none;
  z-index:30;
  left:0;top:0;
  transform:translate3d(0,0,0);
  transition:transform .42s cubic-bezier(.16,.84,.32,1),opacity .18s linear;
  will-change:transform;
}
.dot.is-hidden{opacity:0}

/* ---------- logo easter egg: the rainbow Canva couldn't do ---------- */
/* white line art has no hue, so hue-rotate is a no-op. Instead we slide a
   rainbow gradient behind the mask — the colour travels through the strokes. */

@keyframes drift{
  from{background-position:0% 50%}
  to  {background-position:400% 50%}
}
.brand__mark.is-playing::before{
  opacity:1;
  animation:drift 6s linear infinite;
}

/* ---------- narrow ---------- */

@media (max-width:560px){
  .stats{grid-template-columns:1fr;gap:0}
  .stat{padding-block:22px;border-bottom:1px solid var(--hairline)}
  .stat:last-child{border-bottom:0}
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .footer__inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:380px){
  .brand__word{font-size:11.5px;letter-spacing:.16em}
  .team{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .dot{transition:none}
  /* no cycling; the mark simply warms slightly and holds */
  .brand__mark::before{transition:none}
  .brand__mark.is-playing::before{
    animation:none;background-image:none;background-color:#FFF3E2;opacity:1;
  }
}