/* =============================================================================
   fugate.dev

   Design tokens, type and component idioms are lifted from skye.fugate.dev and
   carl.fugate.dev so this page reads as part of the same family rather than as
   a stranger. Those sites default to the "callisto" theme
   (src/helpers/config.ts -> defaultTheme: 'callisto'), so these are its values:

     --background      #020617      --card-background  #0b1021
     --foreground      #dcdcdc      --card-border      1px solid #ffffff1a
     --dimmed-text     #8892b0      --curve-factor     4px
     --accent          #00ccb4

   Fonts match too: Permanent Marker for the name, FiraCode for UI and code-ish
   text, Red Hat Text for prose.

   Two accents rather than callisto's single teal, because the whole job of this
   page is telling two people apart. Both are from the shared palette in
   src/styles/color-palette.scss: --accent-3 (#01c0f0) and --accent-2 (#b45eff).

   No build step, no framework, no runtime JavaScript.
   ============================================================================= */

/* ----------------------------------------------------------------- 1. fonts */

@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/permanent-marker-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'FiraCode';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fira-code-var-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'RedHatText';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/red-hat-text-var-latin.woff2') format('woff2');
}

/* ------------------------------------------------------------- 2. variables */

:root {
  --background: #020617;
  --card-background: #0b1021;
  --card-border-color: #ffffff1a;
  --foreground: #dcdcdc;
  --dimmed-text: #8892b0;

  --accent: #00ccb4;
  --skye: #01c0f0;
  --carl: #b45eff;

  /* Per-person accent. Cards override it; defined here so buttons outside a
     card (the 404 page) still resolve. An unresolved custom property makes
     every color-mix() referencing it invalid, and the declaration is dropped
     silently — which is exactly how the 404 buttons lost their borders. */
  --accent-local: var(--accent);

  --curve-factor: 4px;

  --marker: 'Permanent Marker', 'Poppins', cursive;
  --mono: 'FiraCode', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --body: 'RedHatText', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------ 3. base */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

.frame {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1.25rem, 4vw, 2.5rem)
    clamp(1.25rem, 3vh, 2rem);
  text-align: center;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 1.75rem);
}

/* ------------------------------------------------------------ 4. focus/skip */

:focus-visible {
  outline: 2px solid var(--accent-local);
  outline-offset: 3px;
  border-radius: var(--curve-factor);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 0.7rem 1.1rem;
  background: var(--card-background);
  border: 1px solid var(--card-border-color);
  border-radius: var(--curve-factor);
  color: var(--foreground);
  font-family: var(--mono);
  font-size: 0.85rem;
  text-decoration: none;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

/* ------------------------------------------------------------------ 5. hero */

/* The two personal sites lead with the person's name in Permanent Marker.
   This page has no single person, so it leads with the surname. */
.hero {
  margin: 0;
  font-family: var(--marker);
  font-weight: 400;
  font-size: clamp(2.75rem, 10vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--foreground);
}

/* The `> thing` idiom from their nav and section headings. */
.prompt {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--foreground);
}

.caret {
  color: var(--accent);
  font-weight: 700;
}

/* ------------------------------------------------------------- 6. directory */

.directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  width: 100%;
  margin-top: clamp(0.25rem, 1vh, 0.75rem);
}

/* ------------------------------------------------------------------ 7. cards */

.card {
  --accent-local: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
  background: var(--card-background);
  border: 1px solid var(--card-border-color);
  border-radius: var(--curve-factor);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.card--skye {
  --accent-local: var(--skye);
}

.card--carl {
  --accent-local: var(--carl);
}

.card:hover,
.card:focus-within {
  border-color: color-mix(in srgb, var(--accent-local) 55%, transparent);
  transform: translateY(-2px);
}

/* Square portrait with the same small radius their cards use. */
.portrait {
  display: block;
  width: clamp(8rem, 36vw, 10.5rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--card-border-color);
  border-radius: var(--curve-factor);
  transition: border-color 0.35s var(--ease);
}

.card:hover .portrait,
.card:focus-within .portrait {
  border-color: color-mix(in srgb, var(--accent-local) 45%, transparent);
}

.name {
  margin: 0.35rem 0 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.2rem, 3.2vw, 1.5rem);
  line-height: 1.2;
  color: var(--foreground);
}

/* Their about page sets the tagline in italic monospace, dimmed. Same here. */
.role {
  margin: 0;
  font-family: var(--mono);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--accent-local);
  overflow-wrap: break-word;
}

.bio {
  margin: 0.35rem 0 0.35rem;
  max-width: 30ch;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--foreground);
}

/* --------------------------------------------------------------- 8. buttons */

/* Outlined monospace buttons, as used across their about and contact pages. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent-local) 55%, transparent);
  border-radius: var(--curve-factor);
  background: transparent;
  color: var(--accent-local);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.button:hover,
.button:focus-visible {
  background: color-mix(in srgb, var(--accent-local) 14%, transparent);
  border-color: var(--accent-local);
}

.button--primary {
  min-height: 2.6rem;
  padding: 0.7rem 1.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  border-color: var(--accent-local);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--accent-local);
  color: var(--background);
}

.elsewhere {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}

/* ----------------------------------------------------------------- 9. footer */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--card-border-color);
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--dimmed-text);
}

.footer p {
  margin: 0;
}

/* --------------------------------------------------------------- 10. 404 page */

.stray {
  justify-content: center;
}

.stray .bio {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--dimmed-text);
}

.strays {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------------- 11. entrance */

.reveal {
  animation: rise 0.7s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

/* Stagger as classes, not inline styles, so the CSP can stay strict. */
.r1 { --d: 0ms; }
.r2 { --d: 90ms; }
.r3 { --d: 180ms; }
.r4 { --d: 260ms; }
.r5 { --d: 360ms; }

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------- 12. reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------- 13. forced colours / print */

@media (forced-colors: active) {
  .card,
  .button,
  .portrait {
    border: 1px solid ButtonBorder;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }
}