/* Shipright by SuccessByCS — public feed.
   Follows the SuccessByCS brand kit: paper and ink, graph paper background,
   square corners, 1px hairlines, offset blue shadows.

   Fonts are local only. The brand fonts (Playfair Display, DM Sans,
   JetBrains Mono) are named first and used when they are installed on the
   reader's machine; otherwise the stack falls back to system faces. Nothing
   is fetched from a remote font service. */

:root {
  --paper: #f3efe5;
  --paper-deep: #ece6da;
  --ink: #151412;
  --body-soft: #3d3a35;
  --red: #a71e22;
  --blue: #0b4396;
  --lime: #d9f842;
  --rule: #18151255;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(20px, 7vw, 120px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--body-soft);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;

  background-color: var(--paper);
  background-image:
    linear-gradient(#1815120b 1px, transparent 1px),
    linear-gradient(90deg, #1815120b 1px, transparent 1px),
    radial-gradient(#1815120a .6px, transparent .6px);
  background-size: 56px 56px, 56px 56px, 5px 5px;
}

/* ---------- Header ---------- */

.header {
  padding: 22px var(--gutter) 0;
}

.wordmark {
  display: inline-block;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 8px 0 #0b439618;

  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wordmark strong { color: var(--blue); }
.wordmark-sep { color: var(--rule); }
.wordmark-sub { color: var(--red); }

/* ---------- Main ---------- */

.main { padding: clamp(40px, 7vw, 86px) var(--gutter) 0; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--red);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  max-width: 20ch;
  margin: 0 0 24px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: .92;
}

h1 mark {
  background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%);
  color: var(--ink);
}

.lede {
  max-width: 62ch;
  margin: 0;
  font-size: 18px;
}

/* ---------- Notices ---------- */

.notice {
  max-width: 76ch;
  margin: 36px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  font-size: 15px;
}

.notice-label {
  display: inline-block;
  margin-right: 10px;
  color: var(--red);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.notice-error { border-color: var(--red); }

.retry {
  margin-left: 12px;
  padding: 6px 14px;
  border: 1px solid var(--ink);
  background: var(--lime);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.retry:hover { background: #c5e535; }

/* ---------- Feed ---------- */

.feed-section { padding: clamp(44px, 6vw, 76px) 0 0; }

.feed-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1;
}

.feed-meta {
  margin: 0;
  color: var(--body-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.feed {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post {
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}

.post-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin-bottom: 14px;
}

.platform {
  padding: 4px 10px;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.published {
  color: var(--body-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.post-text {
  max-width: 62ch;
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  /* Post text arrives with its own line breaks. Keep them. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.post-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.post-link:hover { color: var(--red); }

.empty {
  max-width: 62ch;
  margin: 34px 0 0;
  padding: 28px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 8px 0 #0b439618;
}

.empty h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.055em;
}

.empty p { margin: 0; }

/* ---------- Footer ---------- */

.footer {
  margin-top: clamp(56px, 8vw, 110px);
  padding: 26px var(--gutter) 40px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

.footer p { margin: 0; max-width: 76ch; }

.footer code {
  font-family: var(--mono);
  font-size: 13px;
}

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