/* ==========================================================================
   Project Viewfinder — splash
   Self-contained on purpose. This is a different origin from stevencaputo.com,
   and its CSP is style-src 'self', so nothing may be borrowed across the host
   boundary. System serif only: no webfont, no request, nothing to wait for.
   ========================================================================== */

:root {
  --ink-900:   #07060a;
  --ink-800:   #0d0b09;
  --parchment: #e8ddc4;
  --parch-dim: #b9ad93;
  --muted:     #8c8069;
  --gold:      #c9a24a;
  --gold-hi:   #e3c877;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino,
             "Book Antiqua", Georgia, "Times New Roman", serif;
  --data:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo,
             Consolas, "DejaVu Sans Mono", monospace;

  --measure: 46rem;

  /* Paper grain as a data URI: no extra request, no CDN. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(201, 162, 74, 0.10), transparent 60%),
    linear-gradient(180deg, #12151c, var(--ink-800) 55%, var(--ink-900));
  color: var(--parchment);
  font-family: var(--display);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* --- The plate ------------------------------------------------------------ */

.plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1.5rem, 5vw, 4rem);
}

.plate__grain,
.plate__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.plate__grain {
  background-image: var(--grain);
  opacity: 0.5;
  mix-blend-mode: soft-light;
}
.plate__vignette {
  background: radial-gradient(130% 100% at 50% 34%,
    transparent 40%, rgba(6, 4, 3, 0.72) 100%);
}

/* The ruled frame, same device as the main site. */
.plate__frame {
  position: fixed;
  inset: clamp(0.6rem, 1.6vw, 1.25rem);
  border: 1px solid rgba(201, 162, 74, 0.20);
  outline: 1px solid rgba(201, 162, 74, 0.09);
  outline-offset: 4px;
  pointer-events: none;
  z-index: 2;
}

.plate__content {
  position: relative;
  z-index: 10;
  width: min(100%, var(--measure));
  padding: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
  animation: rise 1100ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plate__content { animation: none; }
}

/* --- Type ----------------------------------------------------------------- */

.kicker {
  margin: 0 0 clamp(1.4rem, 4vw, 2.4rem);
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The whole page is this sentence. */
.creed {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.9rem);
  line-height: 1.28;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: var(--parchment);
  text-shadow: 0 2px 30px rgba(6, 5, 4, 0.85);
}

.fleuron {
  margin: clamp(1.6rem, 4vw, 2.4rem) auto clamp(1rem, 2.5vw, 1.4rem);
  line-height: 0;
}
.fleuron svg { width: min(15rem, 60%); height: auto; }
.fleuron line { stroke: rgba(201, 162, 74, 0.42); stroke-width: 1; }
.fleuron path,
.fleuron circle { fill: var(--gold); }

.tagline {
  margin: 0;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-style: italic;
  color: var(--parch-dim);
}

/* --- Elsewhere ------------------------------------------------------------ */

.marks {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.mark {
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 0.86rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 74, 0.35);
  padding-bottom: 0.15rem;
}
.mark:hover { color: var(--gold-hi); border-bottom-color: var(--gold-hi); }
.mark:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.colophon {
  margin: clamp(2.4rem, 6vw, 3.6rem) 0 0;
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.colophon__rule {
  display: block;
  width: 4rem;
  height: 1px;
  margin: 0 auto 0.9rem;
  background: linear-gradient(to right, transparent,
    rgba(201, 162, 74, 0.42), transparent);
}

::selection { background: var(--gold); color: var(--ink-900); }