/* The marketing site's language, applied to the blog. Shared by the list and
   the article so the two cannot drift apart. Palette and chrome metrics are
   lifted from public/index.html deliberately — if that file's nav or footer
   changes, this needs the same change. */
:root{
  --bg:#fff8ee;
  --paper:#ffffff;
  --ink:#2a2520;
  --muted:#7a7268;
  --primary:#ff7a4a;
  --primary-soft:#ffe1d2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Any rule below that sets display would otherwise beat the UA's
   [hidden]{display:none} — .feed is a grid and .tags is a flex, and both
   shipped visible while hidden once. Declared before them, with !important,
   so it covers every element added later too. */
[hidden]{display:none !important}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Nav and footer keep the content's 1200px. They were 1280px once and the
   wordmark sat ~33px left of the heading at in-between viewports; the padding
   has to track the content's at every breakpoint too. */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 40px;max-width:1200px;margin:0 auto;
}
.logo{
  font-family:"Momo Trust Display","Inter",system-ui,sans-serif;
  font-weight:400;font-size:32px;letter-spacing:-.01em;line-height:1;
}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a:not(.btn){color:var(--muted);font-weight:600;font-size:15px}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-links a.here{color:var(--ink)}

.btn{
  display:inline-block;padding:12px 22px;border-radius:999px;
  font-weight:700;font-size:15px;border:2px solid var(--ink);
  background:var(--ink);color:var(--bg);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .1s, box-shadow .1s;
  cursor:pointer;
}
.btn.alt{background:var(--paper);color:var(--ink)}
@media (prefers-reduced-motion: no-preference){
  .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
}

/* Masthead */
.masthead{max-width:820px;margin:0 auto;padding:50px 40px 10px}
.masthead h1{
  font-size:56px;line-height:1.05;letter-spacing:-.02em;
  margin:0 0 18px;font-weight:800;max-width:16ch;
}
.masthead h1 .squiggle{position:relative;display:inline-block}
.masthead h1 .squiggle::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-6px;height:10px;
  background:var(--primary);border-radius:8px;z-index:-1;opacity:.85;
}
.masthead p{font-size:19px;color:var(--muted);max-width:52ch;margin:0}

/* Post list. One column on a reading measure — a three-up grid would squeeze
   the titles, which are the only thing on a card doing real work. */
.feed{max-width:820px;margin:0 auto;padding:36px 40px 20px;display:grid;gap:20px}
.card{
  background:var(--paper);border:2px solid var(--ink);border-radius:24px;
  padding:28px;box-shadow:6px 6px 0 var(--ink);
  transition:transform .1s, box-shadow .1s;
}
@media (prefers-reduced-motion: no-preference){
  a.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
}
.card .when{font-size:14px;color:var(--muted);font-weight:600}
.card h2{
  margin:8px 0 10px;font-size:28px;line-height:1.15;
  letter-spacing:-.01em;font-weight:800;
}
.card p{margin:0;color:var(--muted);font-size:16px}
.card .cover{border-radius:14px;border:2px solid var(--ink);margin-bottom:18px}

/* Tags render in the case the CMS stores them in. */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{
  display:inline-block;padding:4px 12px;border-radius:999px;
  font-size:13px;font-weight:700;
  background:var(--primary-soft);color:#b4441c;
}

/* Article */
.back{
  display:inline-block;color:var(--muted);font-weight:600;font-size:15px;
  margin-bottom:26px;
}
.back:hover{color:var(--ink)}
.article{max-width:760px;margin:0 auto;padding:40px 40px 20px}
.article header{border-bottom:2px solid var(--ink);padding-bottom:26px;margin-bottom:8px}
.article .when{font-size:15px;color:var(--muted);font-weight:600}
.article h1{
  font-size:46px;line-height:1.08;letter-spacing:-.02em;
  margin:10px 0 14px;font-weight:800;
}
.article .excerpt{font-size:20px;color:var(--muted);margin:0}
.article .byline{font-size:15px;color:var(--muted);margin:14px 0 0;font-weight:600}

/* The body is whatever the CMS sends. Today that is p, h2, blockquote, em, ol,
   li and strong; links and unordered lists are covered because a blog post
   will have them sooner or later. */
.body{font-size:18px}
.body p{margin:22px 0}
.body h2{
  font-size:28px;line-height:1.2;letter-spacing:-.01em;font-weight:800;
  margin:40px 0 0;
}
.body blockquote{
  margin:28px 0;padding:4px 0 4px 24px;
  border-left:3px solid var(--primary);
  color:var(--muted);font-size:20px;
}
.body ol,.body ul{margin:22px 0;padding-left:24px}
.body li{margin:8px 0}
.body strong{font-weight:700}
.body a{color:#b4441c;text-decoration:underline;text-underline-offset:3px}

/* States. A blank page would read as a broken feature, so each one says which
   of the three things happened. */
.note{
  max-width:820px;margin:0 auto;padding:20px 40px 40px;
  color:var(--muted);font-size:17px;
}
.note.bad{color:#b4441c;font-weight:600}

footer{
  padding:32px 40px;max-width:1200px;margin:56px auto 0;
  display:flex;justify-content:space-between;
  color:var(--muted);font-size:14px;
  border-top:1px solid rgba(0,0,0,.08);
}

@media (max-width: 860px){
  .nav{padding:22px 24px}
  footer{padding:32px 24px}
  .masthead{padding:36px 24px 6px}
  .masthead h1{font-size:40px}
  .feed{padding:28px 24px 16px}
  .article{padding:28px 24px 16px}
  .article h1{font-size:34px}
  .note{padding:20px 24px 40px}
}
@media (max-width: 720px){
  .nav{padding:18px 24px;flex-wrap:wrap;gap:12px}
  .nav-links{gap:18px;font-size:14px}
  .nav-links a:not(.btn):not(.here){display:none}
  .masthead h1{font-size:34px}
  .card h2{font-size:23px}
  .article h1{font-size:29px}
  .body{font-size:17px}
  .body h2{font-size:24px}
  footer{flex-direction:column;gap:8px;align-items:flex-start;padding:24px}
}