/* Font - IBM Plex Mono  */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-ThinItalic.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf") format("truetype");
}

/* Base reset + :root design tokens */

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

:root {
  /* Color Theme: gruvbox by morhetz (https://github.com/morhetz/gruvbox).
     Tokens are named for the shade they represent (not their role), so the
     same palette can be reused across components. The trailing opacity-scale
     tokens are pre-mixed rgba() values for overlays and faint fills. */

  /* Deep Dark Earth & Charcoal Tones */
  --color-pitch-black: #1d2021;
  --color-charcoal: #282828;
  --color-dark-asphalt: #32302f;
  --color-oil-slick: #3c3836;
  --color-stony-gray: #504945;
  --color-muddy-brown: #665c54;
  --color-taupe: #7c6f64;

  /* Muted Grays */
  --color-warm-slate: #928374;

  /* Warm Cream, Sand & Parchment Tones */
  --color-alabaster: #f9f5d7;
  --color-parchment: #fbf1c7;
  --color-warm-sand: #f2e5bc;
  --color-wheat: #ebdbb2;
  --color-driftwood: #d5c4a1;
  --color-clay: #bdae93;
  --color-putty: #a89984;

  /* Vibrant / Pops of Color */
  --color-coral-red: #fb4934;
  --color-lime-olive: #b8bb26;
  --color-marigold: #fabd2f;
  --color-pastel-teal: #83a598;
  --color-dusty-rose: #d3869b;
  --color-sage-mint: #8ec07c;
  --color-tangerine: #fe8019;

  /* Muted / Neutral Tones */
  --color-brick-red: #cc241d;
  --color-olive-green: #98971a;
  --color-amber-gold: #d79921;
  --color-steel-blue: #458588;
  --color-plum: #b16286;
  --color-seafoam-green: #689d6a;
  --color-burnt-orange: #d65d0e;

  /* Deep / Faded Tones */
  --color-crimson-burgundy: #9d0006;
  --color-moss-green: #79740e;
  --color-ochre: #b57614;
  --color-deep-teal: #076678;
  --color-deep-purple: #8f3f71;
  --color-forest-green: #427b58;
  --color-rust-orange: #af3a03;

  /* Opacity Scale */
  --color-parchment-trace: rgba(251, 241, 199, 0.1);
  --color-parchment-whisper: rgba(251, 241, 199, 0.2);
  --color-parchment-ghost: rgba(251, 241, 199, 0.3);
  --color-parchment-haze: rgba(251, 241, 199, 0.4);
  --color-parchment-mist: rgba(251, 241, 199, 0.5);
  --color-parchment-veil: rgba(251, 241, 199, 0.6);
  --color-parchment-sheer: rgba(251, 241, 199, 0.7);
  --color-parchment-soft: rgba(251, 241, 199, 0.8);
  --color-parchment-pale: rgba(251, 241, 199, 0.9);

  --color-burnt-orange-ghost: rgb(214, 93, 14, 0.3);
  --color-burnt-orange-sheer: rgb(214, 93, 14, 0.7);

  --color-taupe-sheer: rgb(124, 111, 100, 0.7);

  --color-pitch-black-mist: rgb(29, 32, 33, 0.5);
  --color-pitch-black-soft: rgb(29, 32, 33, 0.8);

  --color-charcoal-ghost: rgba(40, 40, 40, 0.3);

  --color-coral-red-trace: rgba(251, 73, 52, 0.1);
  --color-coral-red-ghost: rgba(251, 73, 52, 0.3);

  --color-brick-red-whisper: rgb(204, 36, 29, 0.2);

  /* Background shown while a text input/textarea is focused */
  --color-input-focus-bg: #2d2b28;

  --font-primary: "IBM Plex Mono", monospace;
}

/* Page scaffolding */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-primary);
  background: var(--color-pitch-black);
  color: var(--color-driftwood);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 60px;
  position: relative;
  z-index: 1;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: var(--color-pitch-black-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-oil-slick);
}

.header__logo {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-parchment);
  letter-spacing: 0.04em;
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  /* Full header height so overflow clips the hover circle to the header band,
     as the header's own overflow:hidden used to - moved here so it no longer
     clips the fixed mobile-menu panel (the header is its containing block). */
  height: 56px;
  overflow: hidden;
}
.header__logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  background: var(--color-brick-red);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
  pointer-events: none;
  z-index: -1;
}
.header__logo:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.header__logo-dot {
  color: var(--color-coral-red);
  font-weight: 800;
  transition: color 0.4s ease;
}
.header__logo:hover .header__logo-dot {
  color: var(--color-parchment);
}

.header__auth {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header__btn {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 2px;
  transition: all 0.16s;
  /* The Sign Out button is a <button> in a POST form (signout is a
     CSRF-protected state change); strip the UA button chrome so it renders
     identically to the anchor variants, which re-declare border/background. */
  background: none;
  border: none;
  cursor: pointer;
}
.header__btn--outline {
  color: var(--color-warm-slate);
  border: 1px solid var(--color-warm-slate);
}
.header__btn--outline:hover {
  color: var(--color-wheat);
  border: 1px solid var(--color-wheat);
}
.header__btn--outline:active {
  transform: scale(0.95);
}
.header__btn--solid {
  color: var(--color-pitch-black);
  background: var(--color-warm-slate);
  border: 1px solid var(--color-warm-slate);
}
.header__btn--solid:hover {
  background: var(--color-wheat);
  border-color: var(--color-wheat);
}
.header__btn--solid:active {
  transform: scale(0.95);
}

.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--color-oil-slick);
  padding: 16px 28px;
}
.footer__links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__links a {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-warm-slate);
  text-decoration: none;
}
.footer__links .footer__right a {
  transition: color 0.15s;
}
.footer__links .footer__right a:hover {
  color: var(--color-wheat);
}

/* Nav links with sloped-edge sweep animation */
.footer__nav-link {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 2px 12px;
  transition: color 0.35s ease;
}
.footer__nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-burnt-orange-ghost);
  clip-path: polygon(0% 100%, 10px 0%, 10px 0%, 0% 100%);
  transition: clip-path 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}
.footer__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  background: var(--color-taupe-sheer);
  clip-path: polygon(0% 100%, 10px 0%, 11px 0%, 1px 100%);
  transition: background 0.35s ease;
  z-index: -1;
}
.footer__nav-link:hover::after {
  background: var(--color-burnt-orange-sheer);
}
.footer__links a.footer__nav-link:hover {
  color: var(--color-wheat);
}
.footer__nav-link:hover::before {
  clip-path: polygon(0% 100%, 10px 0%, 100% 0%, calc(100% - 10px) 100%);
}

.footer__right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.footer__sep {
  width: 1px;
  height: 12px;
  background: var(--color-oil-slick);
  flex-shrink: 0;
}

/* Mobile menu: A native <details> disclosure that replaces the footer on
   narrow viewports. Works without JS; menu.js only adds Escape / outside-click.
   The <details> wrapper is hidden until the media query below reveals it. */
.mobile-menu {
  display: none;
}

/* The <summary> styled as the hamburger button; strip the default marker. */
.header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  list-style: none;
  color: var(--color-warm-slate);
  cursor: pointer;
  transition: color 0.16s;
}
.header__menu-toggle::-webkit-details-marker {
  display: none;
}
.header__menu-toggle:hover,
.mobile-menu[open] .header__menu-toggle {
  color: var(--color-wheat);
}
.header__menu-toggle:active {
  transform: scale(0.92);
}
.header__menu-icon {
  width: 22px;
  height: 22px;
}

.mobile-menu__panel {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--color-pitch-black-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-oil-slick);
  /* Closed/exit values. @starting-style + allow-discrete fade & slide the panel
     in and out; browsers without support just show/hide it instantly. */
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    display 0.2s ease allow-discrete;
}
.mobile-menu[open] .mobile-menu__panel {
  opacity: 1;
  transform: translateY(0);
}
@starting-style {
  .mobile-menu[open] .mobile-menu__panel {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.mobile-menu__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-driftwood);
  text-decoration: none;
  padding: 14px 28px;
  border-top: 1px solid var(--color-oil-slick);
  transition:
    background 0.15s,
    color 0.15s;
}
.mobile-menu__link:first-child {
  border-top: none;
}
.mobile-menu__link:hover,
.mobile-menu__link:active {
  background: var(--color-burnt-orange-ghost);
  color: var(--color-wheat);
}

@media (max-width: 768px) {
  .footer {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
  .header__btn {
    display: none;
  }
}

/* Accessibility helpers */

/* Hidden off-screen until focused by a keyboard user, then slides into view. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  transform: translateY(-200%);
  background: var(--color-burnt-orange);
  color: var(--color-charcoal);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 2px;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-wheat);
  outline-offset: 2px;
}

/* Sits in normal flow at the top; the <noscript> head style un-fixes the
   header so this banner and the content below it are never hidden. */
.noscript-warning {
  position: relative;
  z-index: 300;
  background: var(--color-brick-red);
  color: var(--color-pitch-black);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: 10px 20px;
}
.noscript-warning strong {
  font-weight: 600;
}