/* Far Relay — shared styles.
   Design tokens: ground #0A1018, ink #F2EDE4, accent #8FBECE / #A9D2DF, tile #0C141E.
   Archivo (wdth 125) = display, Manrope = UI, Spectral = prose. */

html, body { margin: 0; padding: 0; background: #0A1018; overflow-x: hidden; }
* { box-sizing: border-box; }
a { color: #8FBECE; text-decoration: none; }
a:hover { color: #F2EDE4; }
::selection { background: #8FBECE; color: #0A1018; }
input::placeholder { color: rgba(242,237,228,0.42); }
[hidden] { display: none !important; }

@keyframes fr-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fr-dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Archivo's expanded cut is the variable wdth axis at 125 — there is no separate
   "Archivo Expanded" family on Google Fonts. */
.fr-display {
  font-family: Archivo, system-ui, sans-serif;
  font-stretch: 125%;
}

.fr-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

/* ---------------------------------------------------------------- home ---- */

.fr-root {
  position: relative; min-height: 100dvh; width: 100%; overflow-x: hidden;
  background: #0A1018; color: #F2EDE4;
  font-family: Manrope, system-ui, sans-serif;
}
.fr-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.fr-veil {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 34%, rgba(20,32,46,0.55) 0%, rgba(10,16,24,0) 62%);
}

.fr-main {
  position: relative; min-height: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  align-items: center; justify-items: center;
  padding: clamp(16px, 3vmin, 44px);
  row-gap: clamp(14px, min(3vmin, 3vh), 40px);
}
.fr-stack {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, min(3.4vmin, 3.2vh), 40px);
  max-width: 560px; width: 100%; text-align: center;
  animation: fr-fade 1.4s ease-out both;
}

.fr-logo {
  width: clamp(150px, min(30vmin, 26vh), 360px); height: auto; display: block;
  filter: drop-shadow(0 0 28px rgba(143,190,206,0.10));
}

.fr-positioning {
  margin: 0; font-weight: 400;
  font-size: clamp(10px, 1.35vmin + 7px, 15px);
  letter-spacing: 0.30em; text-transform: uppercase; line-height: 1.9;
  color: rgba(242,237,228,0.88);
  text-wrap: pretty; max-width: 35ch;
}

.fr-lede {
  margin: 0;
  font-family: Spectral, Georgia, serif; font-weight: 300;
  font-size: clamp(14px, 0.7vmin + 13px, 17.5px);
  line-height: 1.6; letter-spacing: 0.005em;
  color: rgba(242,237,228,0.68);
  max-width: 42ch; text-wrap: pretty;
}

/* ------------------------------------------------------ work-in-progress -- */

.fr-row {
  width: min(980px, 92vw); flex: 0 0 auto;
  display: flex; gap: clamp(12px, 2.2vmin, 26px);
  align-items: flex-start; justify-content: center;
  overflow-x: auto; overflow-y: hidden;
  padding: 12px 8px 4px;
  scrollbar-width: none;
  animation: fr-fade 1.8s ease-out both;
}
.fr-row::-webkit-scrollbar { display: none; }

/* Tiles are sized by width, not height. Sizing them to a common height instead
   leaves the thumbs far narrower than their own captions — "Secret project" at
   this tracking needs ~147px, against a ~56px thumb — and the card reads as a
   small picture stranded above a much wider block of text. Width-driven, the
   thumb and its caption share an edge; aspect-ratio gives each its height, and
   the row top-aligns the differing heights. */
.fr-tile {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 11px;
  width: clamp(148px, 15vw, 180px);
  border-radius: 4px;
  transition: transform 460ms cubic-bezier(.2,.7,.2,1);
}
.fr-tile:hover { transform: translateY(-5px); }
.fr-tile:focus-visible { outline: 2px solid #8FBECE; outline-offset: 6px; }

.fr-thumb {
  position: relative;
  width: 100%;
  border-radius: 3px; overflow: hidden;
  background: #0C141E;
  border: 1px solid rgba(242,237,228,0.11);
  transition: border-color 460ms ease, box-shadow 460ms ease;
}
.fr-thumb--live { border-color: rgba(143,190,206,0.32); }
.fr-thumb--5x7  { aspect-ratio: 5 / 7; }
.fr-thumb--3x4  { aspect-ratio: 3 / 4; }

.fr-art {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}

.fr-thumb--secret {
  background:
    repeating-linear-gradient(135deg, rgba(242,237,228,0.035) 0 6px, rgba(242,237,228,0) 6px 12px),
    #0B121B;
  border: 1px dashed rgba(242,237,228,0.14);
}
.fr-secret-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9px; letter-spacing: 0.26em;
  color: rgba(242,237,228,0.22);
}

.fr-meta {
  display: grid; grid-template-rows: repeat(3, 14px);
  align-content: start; gap: 4px;
}
.fr-meta p { margin: 0; white-space: nowrap; font-size: 10.5px; }
.fr-title { letter-spacing: 0.17em; text-transform: uppercase; color: rgba(242,237,228,0.92); }
.fr-title--muted { color: rgba(242,237,228,0.62); }
.fr-sub { letter-spacing: 0.05em; color: rgba(242,237,228,0.60); }
.fr-status { letter-spacing: 0.09em; color: rgba(242,237,228,0.58); }
.fr-status--live {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; color: #A9D2DF;
}
.fr-status--live .fr-pip {
  width: 5px; height: 5px; border-radius: 50%;
  background: #8FBECE; box-shadow: 0 0 9px 1px rgba(143,190,206,0.75);
  animation: fr-dot 3.4s ease-in-out infinite;
}

/* Narrow screens stack the tiles instead of scrolling them sideways. A centred
   flex row that overflows clips its outer cards and leaves them unreachable —
   `justify-content: center` pushes the overflow past both edges — so the row
   becomes a column well before it runs out of width. */
@media (max-width: 767px) {
  .fr-row {
    flex-direction: column; align-items: center; justify-content: flex-start;
    width: 100%; overflow-x: visible;
    gap: clamp(22px, 6vw, 34px);
    padding: 12px 0 4px;
  }
  .fr-tile { width: min(200px, 54vw); }
  .fr-meta { grid-template-rows: none; }
}

/* ------------------------------------------------------------- signup ----- */

.fr-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: stretch; justify-content: center;
  width: 100%; max-width: 400px;
}
.fr-input {
  flex: 1 1 190px; min-width: 0;
  background: rgba(242,237,228,0.03); color: #F2EDE4;
  border: 1px solid rgba(242,237,228,0.20); border-radius: 2px;
  padding: 11px 13px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 14px; letter-spacing: 0.02em;
  outline: none;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.fr-input:hover { border-color: rgba(242,237,228,0.36); }
.fr-input:focus {
  border-color: #8FBECE;
  box-shadow: 0 0 0 3px rgba(143,190,206,0.18);
  background: rgba(242,237,228,0.05);
}
.fr-submit {
  flex: 0 0 auto; cursor: pointer;
  background: #8FBECE; color: #0A1018;
  border: 1px solid #8FBECE; border-radius: 2px;
  padding: 11px 20px;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 220ms ease, transform 220ms ease;
}
.fr-submit:hover { background: #A9D2DF; border-color: #A9D2DF; }
.fr-submit:active { transform: translateY(1px); }
.fr-submit:focus-visible { outline: 2px solid #F2EDE4; outline-offset: 3px; }
.fr-submit[disabled] { opacity: 0.55; cursor: default; }

.fr-note {
  margin: 0; min-height: 46px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; letter-spacing: 0.02em;
  color: #A9D2DF;
  animation: fr-fade 600ms ease-out both;
}
.fr-note--error { color: #E8B4A0; }
.fr-note .fr-pip {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #8FBECE; box-shadow: 0 0 12px 2px rgba(143,190,206,0.7);
}
.fr-note--error .fr-pip { background: #E8B4A0; box-shadow: 0 0 12px 2px rgba(232,180,160,0.6); }

/* ------------------------------------------------------------- footer ----- */

.fr-footer {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 4px 20px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}
.fr-footer a { color: rgba(242,237,228,0.64); transition: color 300ms ease; }
.fr-footer a:hover { color: #F2EDE4; }
.fr-footer a:focus-visible { outline: 2px solid #8FBECE; outline-offset: 4px; }
.fr-footer a[aria-current="page"] { color: rgba(242,237,228,0.9); }
.fr-footer .fr-year { color: rgba(242,237,228,0.30); }

/* ------------------------------------------------------ interior pages ---- */

.fr-page {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(36px, 8vh, 80px);
  padding: clamp(28px, 6vh, 64px) clamp(20px, 5vw, 40px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(20,32,46,0.6) 0%, rgba(10,16,24,0) 60%),
    #0A1018;
  color: #F2EDE4;
  font-family: Manrope, system-ui, sans-serif;
}
.fr-brand {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(242,237,228,0.72); transition: color 300ms ease;
}
.fr-brand:hover { color: #F2EDE4; }
.fr-brand:focus-visible { outline: 2px solid #8FBECE; outline-offset: 5px; }

.fr-prose {
  flex: 1; width: 100%; max-width: 54ch;
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vh, 30px);
  animation: fr-fade 900ms ease-out both;
}
.fr-prose h1 {
  margin: 0; font-weight: 400;
  font-size: clamp(13px, 1.2vmin + 9px, 16px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.9);
}
.fr-prose p {
  margin: 0;
  font-family: Spectral, Georgia, serif; font-weight: 300;
  font-size: clamp(15px, 0.5vmin + 14px, 18px);
  line-height: 1.7;
  color: rgba(242,237,228,0.78);
}
.fr-prose p a {
  color: #A9D2DF; border-bottom: 1px solid rgba(143,190,206,0.35);
}
.fr-prose p a:hover { color: #F2EDE4; }
.fr-prose p a:focus-visible { outline: 2px solid #8FBECE; outline-offset: 3px; }

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