/* ============================================================
   CHALK — car-market notes board for Mini Nash
   Chalkboard aesthetic: dark slate surface, chalk-white hand,
   thoughts pinned as paper notes, articles drawn as chalk cards.
   Deliberately light (few effects) — fast pages rank + load better.
   ============================================================ */

:root {
  --board:        #15201b;
  --board-edge:   #0d1612;
  --chalk:        #eef1e8;
  --chalk-dim:    #aab4a9;
  --chalk-faint:  #707b72;
  --accent:       #ff2d4d;
  --chalk-blue:   #93d2ff;
  --chalk-yellow: #ffe69a;
  --note:         #f7f3e1;
  --note-2:       #eaf2f6;
  --note-3:       #fbe7ea;
  --ink:          #1f232a;

  --font-hand:  'Caveat', 'Bradley Hand', 'Comic Sans MS', cursive;
  --font-body:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --maxw: 1100px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--chalk);
  line-height: 1.65;
  background:
    radial-gradient(ellipse 60% 50% at 18% 8%,  rgba(255,255,255,0.045), transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 92%, rgba(255,255,255,0.035), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--board) 0%, var(--board-edge) 130%);
  background-attachment: fixed;
}

/* faint chalk-dust streaks — cheap, static */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,0.012) 38px 39px),
    repeating-linear-gradient(-100deg, transparent 0 54px, rgba(255,255,255,0.01) 54px 55px);
  mix-blend-mode: screen;
  z-index: 0;
}

a { color: inherit; }

/* ---------- layout ---------- */
.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 5vw, 3rem);
}
.back {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.back:hover { color: var(--chalk); border-color: rgba(255,255,255,0.4); }
.topbar__waitlist {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.topbar__waitlist:hover { text-decoration: underline; }

/* ---------- masthead ---------- */
.masthead { margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.masthead__title {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(4rem, 16vw, 9rem);
  line-height: 0.85;
  margin: 0;
  color: var(--chalk);
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.masthead__title .dot { color: var(--accent); }
.masthead__sub {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 2.5vw, 0.95rem);
  letter-spacing: 0.1em;
  color: var(--chalk-dim);
  margin: 0.6rem 0 0;
  max-width: 46ch;
}
.masthead__rule {
  margin-top: 1.4rem;
  height: 0;
  border: none;
  border-top: 2px dashed rgba(255,255,255,0.18);
}

/* ---------- board (masonry) ---------- */
.board { columns: 3 270px; column-gap: 1.5rem; }

.card-link { text-decoration: none; color: inherit; display: block; break-inside: avoid; margin: 0 0 1.5rem; }

.note, .article-card {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  animation: rise 600ms var(--ease) forwards;
}
.card-link .article-card { margin: 0; }

/* paper sticky notes for short thoughts */
.note {
  background: var(--note);
  color: var(--ink);
  padding: 1.4rem 1.3rem 1.2rem;
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  font-size: 1.18rem;
  line-height: 1.45;
}
.note--blue { background: var(--note-2); }
.note--pink { background: var(--note-3); }
.note:nth-child(4n)   { transform: translateY(14px) rotate(-1.4deg); }
.note:nth-child(4n+1) { transform: translateY(14px) rotate(0.9deg); }
.note:nth-child(4n+2) { transform: translateY(14px) rotate(-0.6deg); }
.note:nth-child(4n+3) { transform: translateY(14px) rotate(1.3deg); }
/* tape */
.note::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 64px; height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.12);
}
.note__tags { display: block; margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: #7a6f55; }

/* chalk-drawn cards for articles */
.article-card {
  border: 2px dashed rgba(255,255,255,0.28);
  border-radius: 8px;
  padding: 1.5rem 1.4rem;
  background: rgba(255,255,255,0.025);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), background 220ms var(--ease);
}
.card-link:hover .article-card { border-color: var(--accent); background: rgba(255,45,77,0.06); transform: translateY(-3px); }
.article-card__kicker { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.article-card__title {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  margin: 0.5rem 0 0.6rem;
}
.article-card__excerpt { color: var(--chalk-dim); font-size: 0.95rem; margin: 0; }
.article-card__more { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--chalk); }
.article-card__more::after { content: " →"; color: var(--accent); }

/* ---------- single article ---------- */
.post { max-width: 720px; margin: 0 auto; }
.post__head { margin-bottom: 2rem; }
.post__kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.post__title {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 5rem);
  line-height: 0.92;
  margin: 0.6rem 0 0.9rem;
}
.post__meta { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--chalk-faint); }
.post__body { font-size: 1.12rem; color: #dde2da; }
.post__body h2 { font-family: var(--font-hand); font-weight: 700; font-size: 2.1rem; color: var(--chalk); margin: 2.2rem 0 0.6rem; }
.post__body p { margin: 0 0 1.2rem; }
.post__body strong { color: var(--chalk); }
.post__body a { color: var(--chalk-blue); }
.post__body blockquote {
  margin: 1.6rem 0;
  padding: 0.4rem 0 0.4rem 1.2rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--chalk);
}
.post__cta {
  margin: 2.6rem 0 0;
  padding: 1.6rem;
  border: 2px dashed rgba(255,255,255,0.22);
  border-radius: 10px;
  text-align: center;
}
.post__cta p { margin: 0 0 1rem; color: var(--chalk-dim); }
.post__cta a {
  display: inline-block;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--chalk);
  text-decoration: none;
  border: 1px solid var(--accent);
  padding: 0.7rem 1.3rem;
  border-radius: 6px;
  transition: background 200ms var(--ease);
}
.post__cta a:hover { background: rgba(255,45,77,0.15); }

/* ---------- footer ---------- */
.foot { margin-top: 4rem; padding-top: 1.5rem; border-top: 2px dashed rgba(255,255,255,0.14); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--chalk-faint); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot a { color: var(--chalk-dim); text-decoration: none; }
.foot a:hover { color: var(--chalk); }

@keyframes rise { to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } }
/* keep note rotation after rising */
.note:nth-child(4n)   { --rot: -1.4deg; }
.note:nth-child(4n+1) { --rot: 0.9deg; }
.note:nth-child(4n+2) { --rot: -0.6deg; }
.note:nth-child(4n+3) { --rot: 1.3deg; }

@media (max-width: 640px) {
  .board { columns: 1; }
  .foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .note, .article-card { animation: none; opacity: 1; transform: none; }
  .note:nth-child(4n), .note:nth-child(4n+1), .note:nth-child(4n+2), .note:nth-child(4n+3) { transform: rotate(var(--rot, 0deg)); }
}