/* Moth & Marrow — holding page.
   Ink on paper: the palette is sampled from the logo render, so the mark's
   remaining paper grain sits on the same stock as the page. */

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/ebgaramond-latin.woff2") format("woff2");
  font-weight: 400 700;          /* variable axis — one file covers the range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+FFFD;
}

:root {
  --paper:  #EAE3D5;
  --ink:    #241D16;
  --muted:  #241D16A8;
  --hair:   #241D1638;
  --grain:  0.05;
  --serif:  "EB Garamond", Iowan Old Style, Palatino, "Palatino Linotype",
            "Book Antiqua", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14110E;
    --ink:   #E8E0CF;
    --muted: #E8E0CFA0;
    --hair:  #E8E0CF33;
    --grain: 0.035;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  /* Two rows: the mark centres in the space that is left after the footer has
     taken the height it needs, which optically seats it just above centre. */
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.62;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* Paper fibre + a vignette, so the page reads as stock rather than as a flat fill.
   Both are painted, never interactive. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
body::before {
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  background: radial-gradient(120% 80% at 50% 42%, transparent 42%, #0000001f 100%);
}

.stamp,
.foot { position: relative; z-index: 2; }

.stamp {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 34rem;
}

/* --- the mark ---------------------------------------------------------- */

.mark { margin: 0 0 clamp(1.6rem, 4vh, 2.4rem); font-size: 0; line-height: 0; }

.mark img {
  display: block;
  width: min(392px, 76vw);
  height: auto;
}

/* --- type -------------------------------------------------------------- */

.kicker {
  margin: 0;
  font-size: clamp(0.68rem, 0.6rem + 0.3vw, 0.8rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  margin-right: -0.34em;   /* re-centre against the trailing letter-space */
  color: var(--muted);
}

.rule {
  width: 5.5rem;
  height: 1px;
  margin: clamp(1.4rem, 3.5vh, 2rem) 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--hair) 22%, var(--hair) 78%, transparent);
}

.line   { margin: 0; text-wrap: balance; }
.line br { display: none; }
@media (min-width: 34rem) { .line br { display: inline; } }

.contact { margin: clamp(1.4rem, 3.5vh, 2rem) 0 0; font-size: 0.94em; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--hair);
  transition: text-decoration-color 200ms ease;
}
a:hover,
a:focus-visible { text-decoration-color: currentColor; }
a:focus-visible { outline: 1px solid var(--muted); outline-offset: 0.35em; }

.foot {
  padding-top: 3rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

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

/* --- entrance ----------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .stamp > * {
    animation: settle 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .mark        { animation-delay:   0ms; }
  .kicker      { animation-delay: 220ms; }
  .rule        { animation-delay: 320ms; }
  .line        { animation-delay: 400ms; }
  .contact     { animation-delay: 520ms; }

  @keyframes settle {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- 404 ---------------------------------------------------------------- */

.mark--small img { width: min(232px, 52vw); }
.mark--small + .kicker { font-size: clamp(0.78rem, 0.7rem + 0.3vw, 0.92rem); }