/* =========================================================
   THE SMALL FIX — stylesheet
   Palette:  ink #1E2A28 | paper #FBFAF6 | teal #2F6F5E
             gold #D9A441 | coral #C1502E | blue #4C6FA5
             auto #37474F | line #E4E0D4
   Type: 'Fraunces' (display) / 'Inter' (body) / 'IBM Plex Mono' (meta)
   ========================================================= */

:root {
  --ink: #1E2A28;
  --ink-soft: #4A5A56;
  --paper: #FBFAF6;
  --paper-raised: #FFFFFF;
  --teal: #2F6F5E;
  --teal-dark: #1F4E42;
  --gold: #D9A441;
  --coral: #C1502E;
  --blue: #4C6FA5;
  --auto: #37474F;
  --line: #E4E0D4;
  --radius: 4px;
  --max: 880px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--ink);
}

a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 10;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.logo {
  font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 700;
  color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.logo .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--teal); color: #fff;
  border-radius: 50%; font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem; font-weight: 700;
}
.logo:hover { text-decoration: none; }
nav.main-nav { display: flex; gap: 22px; }
nav.main-nav a { color: var(--ink-soft); font-size: .95rem; font-weight: 500; }
nav.main-nav a:hover { color: var(--teal-dark); text-decoration: none; }

@media (max-width: 560px) {
  .site-header .wrap { padding-top: 12px; padding-bottom: 12px; flex-wrap: nowrap; }
  .logo { font-size: 1.05rem; gap: 6px; white-space: nowrap; }
  .logo .mark { width: 22px; height: 22px; font-size: .7rem; }
  nav.main-nav { gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  nav.main-nav::-webkit-scrollbar { display: none; }
  nav.main-nav a { font-size: .82rem; white-space: nowrap; }
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 55%, #3C8271 100%);
  padding: 60px 0 54px;
}
.hero .wrap { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; }
.hero-copy { flex: 1 1 auto; min-width: 0; }
.hero-art { flex: 0 0 220px; display: flex; justify-content: center; }
.hero-art svg { width: 100%; height: auto; max-width: 220px; }
@media (max-width: 720px) {
  .hero .wrap { flex-direction: column-reverse; gap: 24px; text-align: left; }
  .hero-art { flex: 0 0 auto; }
  .hero-art svg { max-width: 160px; }
}
.hero .eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 10px;
}
.hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); max-width: 12ch; color: #FFFFFF; }
.hero p.lede { max-width: 52ch; color: #E7F1EC; font-size: 1.1rem; margin-top: 14px; }

.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; z-index: 1;
  opacity: .35; filter: blur(2px);
}
.hero::before { width: 260px; height: 260px; background: var(--gold); top: -90px; right: -60px; }
.hero::after { width: 180px; height: 180px; background: var(--coral); bottom: -80px; right: 220px; opacity: .25; }
@media (max-width: 720px) { .hero::after { display: none; } }

.tip-ribbon {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.22); color: #FFFFFF;
  padding: 8px 16px; border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace; font-size: .78rem;
  margin-bottom: 20px;
}
.tip-ribbon .num { color: var(--gold); font-weight: 700; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 56px 0 20px; }
.section-title h2 { font-size: 1.4rem; }
.section-title a { font-size: .9rem; }

.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 40px; }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30,42,40,.10); }
.card .tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--teal);
}
.card .tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.card h3 { font-size: 1.2rem; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--teal-dark); text-decoration: none; }
.card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.card .meta { font-size: .8rem; color: #8A8578; font-family: 'IBM Plex Mono', monospace; }

.card-money { border-top-color: var(--gold); }
.card-money .tag { color: #A9781F; }
.card-money .tag::before { background: var(--gold); }

.card-home { border-top-color: var(--teal); }
.card-home .tag { color: var(--teal-dark); }
.card-home .tag::before { background: var(--teal); }

.card-focus { border-top-color: var(--blue); }
.card-focus .tag { color: var(--blue); }
.card-focus .tag::before { background: var(--blue); }

.card-wellbeing { border-top-color: var(--coral); }
.card-wellbeing .tag { color: var(--coral); }
.card-wellbeing .tag::before { background: var(--coral); }

.card-auto { border-top-color: var(--auto); }
.card-auto .tag { color: var(--auto); }
.card-auto .tag::before { background: var(--auto); }

article.post { padding-top: 44px; padding-bottom: 20px; max-width: 68ch; margin: 0 auto; }
article.post .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: .78rem;
  color: var(--teal); text-transform: uppercase; letter-spacing: .06em;
}
article.post .eyebrow.eyebrow-auto { color: var(--auto); }
article.post h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-top: 10px; }
article.post .meta {
  font-family: 'IBM Plex Mono', monospace; font-size: .82rem;
  color: #8A8578; margin-bottom: 30px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
article.post h2 { margin-top: 1.6em; font-size: 1.4rem; }
article.post p { margin: 1.1em 0; }
article.post ul, article.post ol { padding-left: 1.3em; }
article.post li { margin: .4em 0; }
article.post blockquote {
  border-left: 3px solid var(--gold);
  margin: 1.6em 0; padding: .2em 1.2em; color: var(--ink-soft);
  font-style: italic;
}

/* ---------- photo banner (post template variant) ---------- */
article.post .post-photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(1.15) saturate(1.05);
  background: var(--line);
  border-radius: var(--radius);
  margin: 20px 0 6px;
  display: block;
}
article.post .photo-credit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  color: #B3AD9C;
  margin: 0 0 20px;
}

/* ---------- numbered-step list (post template variant) ---------- */
article.post ol.step-list {
  list-style: none;
  padding: 0;
  margin: 1.6em 0;
  counter-reset: step;
}
article.post ol.step-list li {
  counter-increment: step;
  position: relative;
  padding: 18px 20px 18px 60px;
  margin: 0 0 14px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
article.post ol.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 18px; top: 18px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
article.post ol.step-list li strong { display: block; margin-bottom: 4px; font-size: 1.02rem; }

/* ---------- FAQ block (Auto / long-form article format) ---------- */
article.post .faq-block {
  margin: 2em 0; padding: 20px 22px;
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius);
}
article.post .faq-block h2 { margin-top: 0; font-size: 1.2rem; }
article.post .faq-item { margin: 1.1em 0; }
article.post .faq-item .q { font-weight: 600; margin-bottom: .3em; display: block; }
article.post .faq-item .a { margin: 0; color: var(--ink-soft); }

/* ---------- related posts block ---------- */
article.post .related-posts {
  margin: 2.5em 0; padding-top: 1.5em; border-top: 1px solid var(--line);
}
article.post .related-posts h2 { font-size: 1.15rem; margin-bottom: .8em; }
article.post .related-posts ul { list-style: none; padding: 0; margin: 0; }
article.post .related-posts li { margin: .5em 0; }

/* ---------- ad slots ---------- */
.ad-slot {
  display: none; /* hidden — Auto ads handles real placement; re-enable manual slots only if you switch to manual ad units */
}

.author-box {
  display: flex; gap: 14px; align-items: center;
  margin-top: 40px; padding: 18px; background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.author-box .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal); color: #fff; display: flex;
  align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700;
}
.author-box .name { font-weight: 600; font-size: .92rem; }
.author-box .bio { font-size: .85rem; color: var(--ink-soft); margin: 0; }

.page { padding-top: 44px; padding-bottom: 44px; max-width: 68ch; margin: 0 auto; }
.page h1 { margin-bottom: .6em; }
.page h2 { margin-top: 1.4em; }

footer.site-footer {
  border-top: 1px solid var(--line); margin-top: 60px;
  padding: 34px 0; color: var(--ink-soft); font-size: .88rem;
}
footer.site-footer .wrap {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
footer.site-footer nav { display: flex; gap: 16px; }
footer.site-footer a { color: var(--ink-soft); }

.btn {
  display: inline-block; background: var(--teal); color: #fff;
  padding: 10px 20px; border-radius: var(--radius); font-weight: 600;
  font-size: .92rem;
}
.btn:hover { background: var(--teal-dark); text-decoration: none; }

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