/* River Finley — holding page
   System fonts only (no web fonts, no build step).
   Palette and type values are documented in README.md. */

:root {
  --bg:        #F1F1EC; /* cool eggshell background */
  --slate:     #20242A; /* near-black slate, primary text */
  --grey:      #5C636B; /* cool grey, secondary text */
  --hairline:  #C9CBC5; /* cool grey, hairline rule */
  --faint:     #686E76; /* faint grey, corner stamp (AA-compliant) */
  --accent:    #A8431A; /* single warm rust accent — the only sign of life */

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--slate);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* One screen at desktop; content held in a narrow, left-aligned column. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
}

.record {
  max-width: 34rem;
}

/* Name / wordmark — literary serif, large and confident. */
.name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Positioning label — letter-spaced monospace small caps, filed-record feel. */
.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-variant: small-caps;
  text-transform: lowercase; /* pairs with small-caps for even caps */
  letter-spacing: 0.28em;
  color: var(--grey);
  margin: 1.4rem 0 0;
}

/* Optional concept line — quiet serif. */
.concept {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--slate);
  max-width: 30rem;
  margin: 2.4rem 0 0;
}

/* One thin hairline rule. */
.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  width: 3.5rem;
  margin: 2.6rem 0 2.2rem;
}

/* Contact — the single warm accent. No button, no pill. */
.contact {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0;
}

.contact a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.contact a:hover,
.contact a:focus-visible {
  border-bottom-width: 2px;
}

.contact a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Faint corner stamp. */
.stamp {
  position: fixed;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--faint);
}

/* Motion: slow fade-in on load, only when the user has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .record, .stamp {
    animation: fade-in 1.4s ease both;
  }
  .stamp { animation-delay: 0.3s; }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Small screens: clean stacking, tested to 360px. The layout is single-column
   already; this just tightens spacing and prevents the stamp overlapping content. */
@media (max-width: 30rem) {
  .stamp {
    position: static;
    margin-top: 3rem;
    padding: 0 clamp(2rem, 6vw, 6rem) clamp(2rem, 6vw, 6rem);
  }
  body { justify-content: flex-start; padding-bottom: 0; }
}