html, body { margin: 0; padding: 0; background: #faf8f3; }
body { color: #2b2a28; }
a { color: inherit; }
.wf { font-family: 'Patrick Hand', cursive; color: #2b2a28; }
.wf-stars {
  background:
    radial-gradient(circle at 18% 22%, #e4ddcf 1.5px, transparent 2px),
    radial-gradient(circle at 67% 14%, #e4ddcf 1.5px, transparent 2px),
    radial-gradient(circle at 84% 66%, #e4ddcf 1.5px, transparent 2px),
    radial-gradient(circle at 39% 79%, #e4ddcf 1.5px, transparent 2px),
    radial-gradient(circle at 52% 42%, #e4ddcf 1.5px, transparent 2px),
    #ffffff;
  background-size: 340px 300px;
}
.wf-box { border: 2px solid #2b2a28; background: #fff; box-sizing: border-box; }
.r1 { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.r2 { border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; }
.r3 { border-radius: 125px 10px 145px 12px / 12px 155px 10px 135px; }
.wf-mono { font-family: 'Courier New', monospace; }
.wf-annot { font-family: 'Caveat', cursive; }
.nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px;
  padding: 18px 56px; border-bottom: 2px solid #2b2a28; background: #fff;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 24px; letter-spacing: 0.06em; text-decoration: none; }
.brand-dot { width: 20px; height: 20px; border-radius: 50%; border: 2.5px dashed #E0563F; position: relative; display: inline-block; flex: none; }
.brand-dot::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #E0563F; }
.nav-links { display: flex; gap: 24px; margin-left: 22px; }
.nav-links a, .nav-action { font-family: 'Patrick Hand', cursive; font-size: 17px; color: #6f6a60; text-decoration: none; }
.nav-action { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.nav-button {
  font-family: 'Patrick Hand', cursive; font-size: 16px; font-weight: 700; padding: 7px 18px;
  background: #E0563F; color: #fff; border: 2px solid #E0563F; text-decoration: none;
}
.shell { max-width: 1240px; margin: 0 auto; padding: 0 56px; }
.hero { padding: 66px 0 44px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; background: #fff; margin-bottom: 24px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: #E0563F; display: block; }
h1, h2, h3 { font-family: 'Patrick Hand', cursive; color: #2b2a28; letter-spacing: 0; }
.hero h1 { margin: 0 auto; font-size: clamp(48px, 5vw, 72px); font-weight: 700; line-height: 0.98; max-width: 980px; }
.hero p { max-width: 720px; margin: 24px auto 0; font: 21px/1.4 'Patrick Hand', cursive; color: #6f6a60; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 24px 0 72px; }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; min-height: 245px; text-decoration: none; }
.post-card h2 { margin: 0; font-size: 28px; line-height: 1.05; }
.post-card p { margin: 0; font: 17px/1.4 'Patrick Hand', cursive; color: #6f6a60; }
.post-meta { font: 13px/1.3 'Courier New', monospace; color: #98917f; text-transform: uppercase; letter-spacing: 0.08em; }
.read-more { margin-top: auto; font: 18px/1 'Patrick Hand', cursive; color: #E0563F; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 42px; align-items: start; padding: 42px 0 76px; }
.article-card { padding: 42px clamp(24px, 5vw, 62px); }
.article-body { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.72; color: #2b2a28; }
.article-body h1 { margin: 0 0 22px; font-size: clamp(42px, 5vw, 64px); line-height: 0.98; }
.article-body h2 { margin: 46px 0 12px; font-size: 34px; line-height: 1.08; }
.article-body h3 { margin: 30px 0 8px; font-size: 25px; line-height: 1.15; }
.article-body p { margin: 0 0 18px; }
.article-body ul { margin: 0 0 24px 24px; padding: 0; }
.article-body li { margin: 0 0 9px; padding-left: 4px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0 30px; font-size: 16px; line-height: 1.45; }
.article-body td, .article-body th { border: 1.5px solid #2b2a28; padding: 10px 12px; vertical-align: top; }
.article-body td p { margin: 0; }
.side-note { position: sticky; top: 104px; padding: 22px; }
.side-note h2 { margin: 0 0 12px; font-size: 24px; }
.side-note p, .side-note a { font: 16px/1.35 'Patrick Hand', cursive; color: #6f6a60; }
.side-note a { color: #E0563F; }
.footer { padding: 36px 56px; border-top: 2px solid #2b2a28; background: #fff; display: flex; align-items: center; gap: 20px; }
.footer span, .footer a { font: 13px/1.3 'Courier New', monospace; color: #98917f; text-decoration: none; }
.footer a:last-child { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: wfPulse 2.2s ease-in-out infinite; }
}
@keyframes wfPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.07); opacity: 0.35; }
}
@media (max-width: 900px) {
  .nav { padding: 16px 22px; gap: 16px; flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; }
  .nav-action { margin-left: auto; }
  .shell { padding: 0 22px; }
  .blog-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .side-note { position: static; }
  .footer { padding: 28px 22px; flex-wrap: wrap; }
  .footer a:last-child { margin-left: 0; }
}