/* ═══════════════════════════════════════════════════════════════════
   aesthetic v2.3.1
   The Misty Step design system. https://github.com/misty-step/aesthetic

   The law:
   · One size. Exactly one font size on every surface; the headline is
     heavier and blacker, never larger.
   · Three inks by three weights (400 / 550 / 800): nine registers.
   · Exactly one accent instance per view: the single action that
     matters now.
   · Every view fits the viewport. 100dvh screens, no page scrolling;
     when content exceeds one screen, a quiet nav swaps views.
   · Motion is feedback, never decoration: small, brief, eased, and
     gone when the user prefers reduced motion. State resolutions are
     gentler (--ae-gentle) and resolve once — success persists, it is
     never rewound. Nothing changes size while it animates.
   · Buttons are not links: contained ink shapes. Links navigate,
     buttons act. Accents are not spent on buttons.
   · Light and dark, defaulting to the system, with a user toggle.

   Steering: every token is a CSS custom property, but downstream
   projects are sanctioned to override exactly one pair:
   --ae-accent / --ae-accent-dark. Everything else is the shared
   identity.
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens ───────────────────────────────────────────────────────── */

:root {
  --ae-surface: #fcfcfc;
  --ae-wash: #f3f3f3;
  --ae-ink: #151515;
  --ae-ink-muted: #737373;
  --ae-ink-faint: #a3a3a3;
  --ae-line: #e9e9e9;
  --ae-accent: #2643d0;

  /* dark counterparts, resolved by the mode blocks below */
  --ae-surface-dark: #121212;
  --ae-wash-dark: #1b1b1b;
  --ae-ink-dark: #ededed;
  --ae-ink-muted-dark: #8f8f8f;
  --ae-ink-faint-dark: #5c5c5c;
  --ae-line-dark: #262626;
  --ae-accent-dark: #8c9eff;

  --ae-font: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ae-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ae-w-regular: 400;
  --ae-w-medium: 550;
  --ae-w-black: 800;

  --ae-measure: 38rem; /* rem: bars in the 13px chrome register must not shrink the measure */
  --ae-measure-wide: 68rem;
  --ae-radius: 0;

  /* motion: feedback, never decoration */
  --ae-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ae-quick: 160ms;
  --ae-soft: 240ms;
  --ae-gentle: 480ms; /* state resolutions: slower than feedback, never abrupt */

  color-scheme: light dark;
}

/* auto dark: follows the OS unless the page pins a mode */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-ae-mode='light']) {
    --ae-surface: var(--ae-surface-dark);
    --ae-wash: var(--ae-wash-dark);
    --ae-ink: var(--ae-ink-dark);
    --ae-ink-muted: var(--ae-ink-muted-dark);
    --ae-ink-faint: var(--ae-ink-faint-dark);
    --ae-line: var(--ae-line-dark);
    --ae-accent: var(--ae-accent-dark);
  }
}

/* pinned modes narrow color-scheme so UA widgets (scrollbars, form
   controls) match the pinned mode instead of following the OS */
.light,
[data-ae-mode='light'] {
  color-scheme: light;
}

/* pinned dark: class or attribute set by the site's mode toggle */
.dark,
[data-ae-mode='dark'] {
  color-scheme: dark;
  --ae-surface: var(--ae-surface-dark);
  --ae-wash: var(--ae-wash-dark);
  --ae-ink: var(--ae-ink-dark);
  --ae-ink-muted: var(--ae-ink-muted-dark);
  --ae-ink-faint: var(--ae-ink-faint-dark);
  --ae-line: var(--ae-line-dark);
  --ae-accent: var(--ae-accent-dark);
}

/* ── base ─────────────────────────────────────────────────────────── */

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--ae-surface);
  color: var(--ae-ink);
  font-family: var(--ae-font);
  font-size: 16px;
  font-weight: var(--ae-w-regular);
  line-height: 1.8;
  cursor: default; /* no I-beam on static text; pointer/text are earned */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* one size: nothing earns scale, only ink and weight */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
blockquote,
figcaption,
label,
input,
textarea,
button,
table {
  font-size: 1em;
  font-family: inherit;
  line-height: inherit;
  margin: 0;
}

code,
kbd,
pre,
samp {
  font-family: var(--ae-font-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--ae-wash);
  color: var(--ae-ink);
}

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

/* links: ink at rest, warm to accent on hover (the locked treatment).
   Approved alternates, documented for easy change, live in the README:
   marker sweep and draw-on-hover. */
a {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ae-ink-faint);
  padding-block: 0.35em;
  margin-block: -0.35em;
  transition:
    color var(--ae-quick) var(--ae-ease),
    text-decoration-color var(--ae-quick) var(--ae-ease);
}

a:hover {
  color: var(--ae-accent);
  text-decoration-color: currentColor;
}

/* list rows: the whole row is the link, so the cursor never crosses a
   dead band between rows */
.ae-row-link {
  display: block;
  text-decoration: none;
  padding: 0.42em 0;
  margin-block: 0;
  color: inherit;
}

.ae-row-link:hover {
  color: inherit;
}

.ae-row-link .ae-item {
  transition: color var(--ae-quick) var(--ae-ease);
}

.ae-row-link:hover .ae-item {
  color: var(--ae-accent);
}

/* ── screens: every view fits the viewport ────────────────────────── */

/* the screen: one viewport, no page scroll */
.ae-screen {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* a bar: quiet chrome at the top or bottom of a screen */
.ae-bar {
  flex: none;
  width: min(var(--ae-measure), 100% - 5rem);
  margin-inline: auto;
  padding: 1.4em 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4em 1.5em;
}

/* the stage: the screen's content, vertically centered; a view that
   cannot fit scrolls inside the stage, never the page */
.ae-stage {
  flex: 1;
  min-height: 0;
  width: min(var(--ae-measure), 100% - 5rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.ae-stage > * {
  margin-block: auto;
  padding-block: 1.5em;
}

/* long documents: top-aligned instead of centered */
.ae-stage-scroll > * {
  margin-block: 0;
  padding-block: 2em;
}

/* a wide screen: catalog, specimen, and dashboard shapes that cannot
   live in 38rem. One decision per screen — set it on .ae-screen. */
.ae-wide .ae-bar,
.ae-wide .ae-stage {
  width: min(var(--ae-measure-wide), 100% - 5rem);
}

/* a view: one screenful of content; remount to replay the entrance */
.ae-view {
  animation: ae-enter var(--ae-soft) var(--ae-ease) both;
}

@keyframes ae-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* the nav: quiet words with a sliding ink underline. The site positions
   .ae-nav-ind under the active item (left/width) on view change. */
.ae-nav {
  position: relative;
  display: flex;
  gap: 2em;
}

.ae-nav a,
.ae-nav button {
  background: transparent;
  border: 0;
  padding: 0 0 0.6em;
  margin-block: 0;
  cursor: pointer;
  color: var(--ae-ink-muted);
  font-weight: var(--ae-w-medium);
  text-decoration: none;
  transition: color var(--ae-quick) var(--ae-ease);
}

.ae-nav a:hover,
.ae-nav button:hover {
  color: var(--ae-ink);
}

.ae-nav [aria-current],
.ae-nav .is-active {
  color: var(--ae-ink);
}

.ae-nav-ind {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--ae-ink);
  transition:
    left var(--ae-soft) var(--ae-ease),
    width var(--ae-soft) var(--ae-ease);
}

/* chrome: the one sanctioned second size. Content gets 16px; chrome
   (footers, utility links, metadata) gets 13px and muted ink. */
.ae-chrome {
  font-size: 13px;
  color: var(--ae-ink-muted);
}

.ae-chrome a {
  color: var(--ae-ink-muted);
  text-decoration: none;
}

.ae-chrome a:hover {
  color: var(--ae-ink);
}

/* the footer: hairline-topped, two ends, chrome register */
.ae-foot {
  font-size: 13px;
  color: var(--ae-ink-muted);
  border-top: 1px solid var(--ae-line);
  padding-top: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em 2em;
  flex-wrap: wrap;
}

.ae-foot a {
  color: var(--ae-ink-muted);
  text-decoration: none;
}

.ae-foot a:hover {
  color: var(--ae-ink);
}

.ae-foot-links {
  display: inline-flex;
  gap: 1.5em;
  align-items: center;
}

/* icons: Lucide (ISC), inlined as SVG symbols. 1.5px stroke, round
   caps, sized to ride alongside text. */
.ae-icon {
  width: 1.2em;
  height: 1.2em;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.2em;
}

/* the mode toggle: an icon button; sun and moon rotate-crossfade.
   Markup: button.ae-mode > svg.ae-icon.ae-sun + svg.ae-icon.ae-moon */
.ae-mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ae-ink-muted);
  transition: color var(--ae-quick) var(--ae-ease);
}

/* the icons are absolutely stacked, so the button has no in-flow text;
   this zero-width space gives it a real baseline so bars can
   baseline-align it with neighboring links */
.ae-mode::before {
  content: '\200b';
}

.ae-mode:hover {
  color: var(--ae-ink);
}

.ae-mode .ae-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.25em;
  height: 1.25em;
  transition:
    opacity var(--ae-soft) var(--ae-ease),
    transform var(--ae-soft) var(--ae-ease);
}

.ae-mode .ae-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.ae-mode .ae-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.dark .ae-mode .ae-sun,
[data-ae-mode='dark'] .ae-mode .ae-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.dark .ae-mode .ae-moon,
[data-ae-mode='dark'] .ae-mode .ae-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* a panel: soft depth for dense content (forms). Radius stays 0. */
.ae-panel {
  background: var(--ae-surface);
  padding: 2em;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 28px rgba(0, 0, 0, 0.06);
}

.dark .ae-panel,
[data-ae-mode='dark'] .ae-panel {
  background: var(--ae-wash);
  box-shadow: none;
}

/* auto dark (no pinned mode): panel and mode icon follow the OS */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-ae-mode='light']) .ae-panel {
    background: var(--ae-wash);
    box-shadow: none;
  }

  :root:not(.light):not([data-ae-mode='light']) .ae-mode .ae-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
  }

  :root:not(.light):not([data-ae-mode='light']) .ae-mode .ae-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* ── registers ────────────────────────────────────────────────────── */

/* the name: heavy and spaced, never large */
.ae-name {
  font-weight: var(--ae-w-black);
  letter-spacing: 0.38em;
}

a.ae-name {
  text-decoration: none;
}

/* the lede: the page's whole argument, plainly */
.ae-lede {
  max-width: 34em;
  text-wrap: pretty;
}

/* a group: whitespace is the only divider */
.ae-group {
  margin-bottom: 2.6em;
}

.ae-group:last-child {
  margin-bottom: 0;
}

.ae-group p {
  margin-bottom: 0.15em;
}

/* a group heading: muted, spaced, medium */
.ae-h {
  font-weight: var(--ae-w-medium);
  color: var(--ae-ink-muted);
  letter-spacing: 0.18em;
  margin-bottom: 0.7em;
}

/* an item that matters: medium ink */
.ae-item {
  font-weight: var(--ae-w-medium);
}

/* supporting matter: muted ink */
.ae-dim {
  color: var(--ae-ink-muted);
}

/* THE accent: exactly one instance per view */
.ae-accent {
  color: var(--ae-accent);
  font-weight: var(--ae-w-medium);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.2em;
}

/* ── forms: a line, not a box ─────────────────────────────────────── */

.ae-label {
  display: block;
  font-weight: var(--ae-w-medium);
  margin-bottom: 0.1em;
}

.ae-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--ae-ink);
  cursor: text;
  border: 0;
  border-bottom: 1px solid var(--ae-line);
  border-radius: var(--ae-radius);
  padding: 0.4em 0;
  transition: border-color var(--ae-quick) var(--ae-ease);
}

.ae-input::placeholder {
  color: var(--ae-ink-faint);
}

.ae-input:focus-visible {
  outline: none;
  border-bottom-color: var(--ae-ink);
}

textarea.ae-input {
  resize: none;
  min-height: 5.5em;
}

/* buttons are not links: contained shape, ink, never resizing.
   Primary is solid ink; .ae-button-quiet is the hairline secondary.
   Accents are not spent on buttons. */
.ae-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: var(--ae-ink);
  border: 1px solid var(--ae-ink);
  border-radius: var(--ae-radius);
  color: var(--ae-surface);
  font-weight: var(--ae-w-medium);
  padding: 0.55em 1.5em;
  min-height: 44px;
  cursor: pointer;
  transition:
    opacity var(--ae-quick) var(--ae-ease),
    background-color var(--ae-quick) var(--ae-ease),
    transform var(--ae-quick) var(--ae-ease);
}

.ae-button:hover {
  opacity: 0.9;
}

.ae-button:active {
  transform: translateY(1px) scale(0.99);
}

.ae-button:disabled {
  cursor: default;
  opacity: 0.7;
  transform: none;
}

.ae-button-quiet {
  background: transparent;
  color: var(--ae-ink);
}

.ae-button-quiet:hover {
  background: var(--ae-wash);
  opacity: 1;
}

/* the send moment: the label gives way to the resolved state, gently,
   once. Success persists — disable the button instead of resetting it.
   Markup: <button class="ae-button ae-send">
             <span class="ae-send-label">Send message</span>
             <span class="ae-send-done" aria-hidden="true">Sent
               <svg class="ae-icon">…check…</svg></span>
           </button>
   Add .is-sent to resolve. The status icon sits AFTER the word.
   The button never changes size: the resting label defines the box and
   the resolved layer is absolutely stacked over it. */
.ae-send {
  position: relative;
  overflow: hidden;
}

.ae-send .ae-send-label,
.ae-send .ae-send-done {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition:
    opacity var(--ae-gentle) var(--ae-ease),
    transform var(--ae-gentle) var(--ae-ease);
}

.ae-send .ae-send-done {
  position: absolute;
  inset: 0;
  justify-content: center;
  opacity: 0;
  transform: translateY(45%);
}

.ae-send.is-sent .ae-send-label {
  opacity: 0;
  transform: translateY(-55%);
}

.ae-send.is-sent .ae-send-done {
  opacity: 1;
  transform: translateY(0);
}

.ae-send.is-sent,
.ae-send.is-sent:disabled {
  opacity: 1;
}

/* ── small screens ────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .ae-bar,
  .ae-stage {
    width: calc(100% - 2.4rem);
  }

  .ae-group {
    margin-bottom: 2em;
  }
}

/* ── reduced motion: everything is instant ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}