/*
 * thefell.ai — holding-pattern placeholder.
 *
 * Reading-register surface (per brand.md), bare minimum: locked wordmark,
 * single Cormorant status line, mono mailto. No card border (the hairline
 * is a divider between content sections, not a box around the column —
 * brand.md "single hairline rule" reading). Light-only — dark-mode skipped
 * because the locked v1 wordmark has a parchment-baked PNG raster that
 * does not survive a midnight ground. To be revisited under DEC-007 lock
 * revisit + proper rework sprint.
 */

@import url("assets/tokens/index.css");

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-base);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
}

.column {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.wordmark {
  display: block;
  width: 240px;
  max-width: 80%;
  height: auto;
}

.status {
  margin: 0;
  font-family: var(--font-serif, "Cormorant Garamond"), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-md);
  color: var(--ink-secondary);
  letter-spacing: 0.005em;
}

.rule {
  width: var(--space-7);
  height: var(--hairline-width);
  margin: var(--space-3) 0;
  padding: 0;
  border: 0;
  background: var(--rule-normal);
}

.contact { margin: 0; }

.email {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--ink-primary);
  text-decoration: none;
  letter-spacing: var(--tracking-data);
  transition:
    color var(--motion-instant) var(--ease-standard),
    text-decoration-color var(--motion-instant) var(--ease-standard);
  text-decoration-line: underline;
  text-decoration-thickness: 0.5px;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.email:hover, .email:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
  outline: none;
}

.email:focus-visible {
  outline: 2px solid var(--rule-strong);
  outline-offset: 4px;
}

@media (max-width: 480px) {
  body { padding: var(--space-6) var(--space-4); }
  .wordmark { width: 200px; }
}