/* ARTIFACT — the still pages
 *
 * About and Contact. Shared shell for the two pages that hold nothing but text.
 *
 * They are deliberately the quietest surfaces on the site: no grain of interaction,
 * nothing latent, nothing that develops. Everything else here rewards attention with
 * change — the wheel spins, the frames expose, the sentences open. These do not. A
 * page that exists to state a fact should not perform while stating it.
 *
 * Left-anchored and single-column, matching the archive rather than centring. The
 * measure is capped near 54ch so the line length stays readable on a wide display
 * instead of running the full width of the ground.
 */

.still {
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
}

.still-page {
  max-width: 78ch;
  margin: 0 auto;
  padding: clamp(48px, 12vh, 120px) var(--pad) clamp(60px, 16vh, 160px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------- nav */

.still-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(56px, 16vh, 150px);
}

.still-nav a {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 300ms ease, border-color 300ms ease;
}

.still-nav a:hover,
.still-nav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.still-nav-right { display: flex; gap: 20px; }

/* ------------------------------------------------------------------- title */

/* The name is set once, at the top, at reading scale rather than architectural
   scale. The entrance owns the big type; repeating it here would make this page a
   second entrance instead of a quiet room off it. */
.still-title {
  margin: 0 0 clamp(34px, 7vh, 72px);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* -------------------------------------------------------------------- body */

.still-body {
  max-width: 54ch;
}

.still-body p {
  font-size: clamp(15.5px, 1.55vw, 18px);
  line-height: 1.76;
  color: var(--ink-dim);
  margin: 0;
}

.still-body p + p { margin-top: 1.5em; }

.still-body em { color: var(--ink); font-style: italic; }

/* ----------------------------------------------------------------- contact */

.still-mail {
  display: inline-block;
  margin-top: clamp(28px, 5vh, 54px);
  font-size: clamp(21px, 3.2vw, 40px);
  letter-spacing: -0.02em;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
  transition: color 380ms ease, border-color 380ms ease;
}

.still-mail:hover,
.still-mail:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* --------------------------------------------------------------- social */

/* First pass set these at 11px in --ink-faint (#4a4a4f). On a #0b0b0c ground that is
   barely above the background — Julien could not find them on the page at all. That
   token is for metadata nobody is meant to read; a link has to be findable before it
   can be restrained. Bigger, and lifted to --ink-dim with a visible rule under it. */
/* The same inline SVG as the entrance panel, same size, same corner. Only `color`
   differs — the SVG inherits it, so these are the panel's black there and bone here
   with nothing else swapped.

   This replaced a pair of text links set under the address. Those were legible after
   their contrast was fixed, but one placement across all three surfaces reads as a
   site; three pages each solving it their own way reads as three pages. */
.social {
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--ink);
}

.social a { display: block; line-height: 0; color: inherit; }

.social svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: .55;
  transition: opacity 300ms ease;
}

.social svg .fill { fill: currentColor; stroke: none; }

.social a:hover svg,
.social a:focus-visible svg { opacity: 1; }

/* The foot carries whatever is left — the marks, a credit — and sits at the bottom of
   the viewport rather than immediately under short copy, so a two-line contact page
   does not leave the eye stranded mid-screen. */
.still-foot {
  margin-top: auto;
  padding-top: clamp(50px, 10vh, 110px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.8;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}