/* goodjunk.app. Same family as the admin site: warm paper, ink, deep sea-green, a rust sail. */

:root {
  --paper: #f6f3ed;
  --ink: #1d1c1a;
  --ink-2: #4a463f;
  --muted: #6f695f;
  --line: #e2dbcf;
  --sea: #1f4e4a;
  --sea-ink: #173c39;
  --sail: #b4532f;
  --sail-batten: #f6f3ed;
  --hull: #1f4e4a;
  --wave: #1f4e4a;
  --serif: "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151613;
    --ink: #eee9df;
    --ink-2: #c9c3b7;
    --muted: #9a9387;
    --line: #2b2c27;
    --sea: #7fb5ad;
    --sea-ink: #eee9df;
    --sail: #d0693f;
    --sail-batten: #151613;
    --hull: #5f9a91;
    --wave: #7fb5ad;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  text-align: center;
}

/* ---------- The junk ---------- */

.junk {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.junk .masts line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.junk .sails path { fill: var(--sail); }
.junk .battens line { stroke: var(--sail-batten); stroke-width: 2; opacity: 0.85; }
.junk .hull { fill: var(--hull); }
.junk .rail { fill: none; stroke: var(--paper); stroke-width: 1.5; opacity: 0.5; }
.junk .wave { fill: none; stroke: var(--wave); stroke-width: 2; stroke-linecap: round; }
.junk .wave-1 { opacity: 0.55; }
.junk .wave-2 { opacity: 0.28; }

.junk .ship { transform-box: view-box; transform-origin: 200px 210px; }

@media (prefers-reduced-motion: no-preference) {
  .junk .ship { animation: bob 7s ease-in-out infinite; }
  .junk .wave-1 { animation: drift 9s linear infinite; }
  .junk .wave-2 { animation: drift 13s linear infinite reverse; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(2.5px) rotate(-0.8deg); }
}

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(-40px); }
}

/* ---------- Words ---------- */

.soon {
  margin: 0 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea);
}
.soon::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--sail);
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 11vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sea-ink);
}
.wordmark em { font-style: italic; font-weight: 500; color: var(--sail); }

.lead {
  margin: 1.5rem 0 0;
  font-size: clamp(1.1rem, 3.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}

.note {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: 30rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.footer {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}