button, [role="button"], select, summary, input:not([type="checkbox"], [type="radio"]) { min-height: 2.25rem; }

      :root {
        --bg: #fcfcfa;
        --surface: #ffffff;
        --surface-2: #f1f4ec;
        --ink: #16211a;
        --ink-soft: #43544a;
        --line: #dde3d6;
        --green: #1e4633;
        --green-deep: #122b1f;
        --lime: #a8d61e;
        --lime-soft: #eef7d8;
        --gold: #b98a2f;
        --radius: 14px;
        --shadow: 0 10px 30px rgba(18, 43, 31, .10);
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #0d130f;
          --surface: #151d17;
          --surface-2: #1a251d;
          --ink: #eef3ea;
          --ink-soft: #b3c2b2;
          --line: #2b3a2e;
          --green: #8fd0a8;
          --green-deep: #0a1f14;
          --lime: #b8e356;
          --lime-soft: #243512;
          --gold: #d9ab4e;
          --shadow: 0 10px 30px rgba(0,0,0,.45);
        }
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: "Archivo", system-ui, sans-serif;
        font-size: 17px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }
      img { max-width: 100%; display: block; }
      button { font: inherit; cursor: pointer; }
      h1, h2, h3 { font-family: "Spectral", Georgia, serif; line-height: 1.15; margin: 0; }
      p { margin: 0; }
      .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

      /* ---------- Header ---------- */
      header.site {
        position: sticky; top: 0; z-index: 50;
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line);
      }
      .bar {
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px; min-height: 64px;
      }
      .wordmark {
        background: none; border: 0; padding: 8px 4px;
        font-family: "Spectral", Georgia, serif;
        font-size: 1.35rem; font-weight: 700; letter-spacing: .01em;
        color: var(--ink); white-space: nowrap;
      }
      .wordmark .calm { color: var(--green); }
      .wordmark .dot { color: var(--lime); }

      /* Desktop nav: horizontal bar with dropdown */
      nav.desktop { display: none; }
      @media (min-width: 820px) {
        nav.desktop { display: block; }
        .burger { display: none !important; }
        .mobile-panel { display: none !important; }
      }
      nav.desktop ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
      nav.desktop .nav-btn {
        background: none; border: 0; padding: 10px 16px; border-radius: 999px;
        font-weight: 600; font-size: .98rem; color: var(--ink);
        display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
      }
      nav.desktop .nav-btn:hover { background: var(--surface-2); }
      nav.desktop .nav-btn.active { background: var(--green-deep); color: #f2f7ee; }
      @media (prefers-color-scheme: dark) {
        nav.desktop .nav-btn.active { background: var(--lime); color: #14240a; }
      }
      .has-drop { position: relative; }
      .drop {
        position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 8px; display: none;
      }
      .has-drop.open .drop, .has-drop:focus-within .drop { display: block; }
      @media (hover: hover) { .has-drop:hover .drop { display: block; } }
      .drop button {
        display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
        width: 100%; text-align: left; background: none; border: 0; border-radius: 10px;
        padding: 10px 12px; color: var(--ink); min-height: 44px;
      }
      .drop button:hover { background: var(--surface-2); }
      .drop button strong { font-size: .98rem; }
      .drop button span { font-size: .83rem; color: var(--ink-soft); font-weight: 400; }
      .caret { transition: transform .2s ease; font-size: .7rem; }
      .has-drop.open .caret { transform: rotate(180deg); }

      /* Mobile nav: hamburger with accordion */
      .burger {
        background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
        width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
        color: var(--ink);
      }
      .mobile-panel {
        display: none; border-top: 1px solid var(--line);
        padding: 10px 20px 18px; background: var(--bg);
      }
      .mobile-panel.open { display: block; }
      .mobile-panel .m-btn {
        display: flex; width: 100%; align-items: center; justify-content: space-between;
        background: none; border: 0; border-bottom: 1px solid var(--line);
        padding: 14px 4px; font-weight: 700; font-size: 1.05rem; color: var(--ink); min-height: 52px;
      }
      .mobile-panel .m-btn.active { color: var(--green); }
      .m-sub { display: none; padding: 4px 0 10px 14px; }
      .m-sub.open { display: block; }
      .m-sub button {
        display: block; width: 100%; text-align: left; background: none; border: 0;
        padding: 11px 6px; color: var(--ink-soft); font-weight: 600; min-height: 44px;
      }
      .m-sub button.active { color: var(--green); }

      /* ---------- Views ---------- */
      .view { display: none; }
      .view.active { display: block; animation: fade .25s ease; }
      @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
      @media (prefers-reduced-motion: reduce) {
        .view.active { animation: none; }
        html { scroll-behavior: auto; }
      }

      /* ---------- Home ---------- */
      .hero { padding: 44px 0 8px; }
      .hero h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 700; max-width: 16ch; }
      .hero h1 em { font-style: italic; color: var(--green); }
      .hero .lede { margin-top: 16px; font-size: 1.13rem; color: var(--ink-soft); max-width: 58ch; }
      .editor-strip {
        margin-top: 26px; display: flex; align-items: center; gap: 14px;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 12px 16px; max-width: 560px; box-shadow: var(--shadow);
      }
      .editor-strip img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; }
      .editor-strip .who { font-size: .95rem; }
      .editor-strip .who strong { display: block; font-size: 1rem; }
      .editor-strip .who span { color: var(--ink-soft); }
      .editor-strip button {
        margin-left: auto; flex: none; background: none; border: 1px solid var(--line);
        border-radius: 999px; padding: 8px 14px; font-weight: 600; color: var(--green); min-height: 40px;
      }
      @media (max-width: 560px) {
        .editor-strip { flex-wrap: wrap; }
        .editor-strip .who { flex: 1 1 180px; }
        .editor-strip button { margin-left: auto; }
      }

      .cat-block { padding: 40px 0 8px; }
      .cat-head { display: grid; gap: 20px; margin-bottom: 22px; }
      @media (min-width: 820px) { .cat-head { grid-template-columns: 1.1fr .9fr; align-items: end; } }
      .cat-head img { border-radius: var(--radius); aspect-ratio: 16/9; object-fit: cover; width: 100%; box-shadow: var(--shadow); order: -1; }
      @media (min-width: 820px) { .cat-head img { order: 2; } }
      .cat-kicker { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
      .cat-head h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
      .cat-head p { color: var(--ink-soft); margin-top: 10px; max-width: 52ch; }
      .text-link {
        background: none; border: 0; padding: 10px 0; color: var(--green); font-weight: 700;
        display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
      }
      .text-link:hover { text-decoration: underline; }

      .cards { display: grid; gap: 18px; padding-bottom: 12px; }
      @media (min-width: 820px) { .cards.two { grid-template-columns: 1fr 1fr; } .cards.three { grid-template-columns: repeat(3, 1fr); } }
      .card {
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        overflow: hidden; text-align: left; padding: 0; width: 100%; color: var(--ink);
        box-shadow: 0 2px 10px rgba(18,43,31,.05); transition: transform .18s ease, box-shadow .18s ease;
        display: flex; flex-direction: column;
      }
      .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
      .card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
      .card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
      .card .tag { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
      .card h3 { font-size: 1.28rem; }
      .card p { color: var(--ink-soft); font-size: .97rem; }
      .card .go { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--green); font-size: .95rem; }
      .guide-card {
        border: 1px solid var(--green); background: var(--lime-soft);
      }
      @media (prefers-color-scheme: dark) { .guide-card { border-color: var(--lime); } }

      /* ---------- Page heads / articles ---------- */
      .page-head { padding: 42px 0 10px; max-width: 760px; }
      .page-head h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
      .page-head .lede { margin-top: 14px; color: var(--ink-soft); font-size: 1.1rem; }
      .crumb { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 16px; font-size: .92rem; }
      .crumb button { background: none; border: 0; color: var(--green); font-weight: 600; padding: 8px 4px; min-height: 36px; }
      .crumb .sep { color: var(--ink-soft); }
      .crumb .here { color: var(--ink-soft); padding: 8px 4px; }

      article.post { max-width: 760px; padding-bottom: 10px; }
      article.post .hero-img { border-radius: var(--radius); aspect-ratio: 16/9; object-fit: cover; width: 100%; margin: 20px 0 8px; box-shadow: var(--shadow); }
      .byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
      .byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
      .byline .t { font-size: .92rem; color: var(--ink-soft); }
      .byline .t strong { color: var(--ink); }
      article.post h2 { font-size: 1.55rem; margin: 30px 0 10px; }
      article.post h3 { font-size: 1.22rem; margin: 24px 0 8px; }
      article.post p { margin-bottom: 14px; color: var(--ink); }
      article.post ul, article.post ol { margin: 0 0 16px; padding-left: 22px; }
      article.post li { margin-bottom: 7px; }
      .callout {
        background: var(--surface-2); border-radius: var(--radius); padding: 18px 20px; margin: 22px 0;
      }
      .callout strong { display: block; margin-bottom: 6px; color: var(--green); }
      .next-box {
        margin: 34px 0 8px; border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--surface); padding: 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
      }
      .next-box .btn { margin: 0; }

      .btn {
        display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px;
        background: var(--green-deep); color: #f4f8ef; font-weight: 700; padding: 12px 22px; min-height: 48px;
      }
      @media (prefers-color-scheme: dark) { .btn { background: var(--lime); color: #14240a; } }
      .btn.ghost { background: none; border: 1px solid var(--line); color: var(--green); }
      @media (prefers-color-scheme: dark) { .btn.ghost { color: var(--lime); } }

      /* ---------- Tools (calculator / calendar) ---------- */
      .tool {
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 24px; margin: 26px 0 10px;
      }
      .tool h2 { font-size: 1.5rem; margin-bottom: 6px; }
      .tool .sub { color: var(--ink-soft); margin-bottom: 18px; }
      .tool-grid { display: grid; gap: 22px; }
      @media (min-width: 820px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
      .field { margin-bottom: 14px; }
      .field label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 6px; }
      .field input, .field select {
        width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
        background: var(--bg); color: var(--ink); font: inherit; min-height: 48px;
      }
      .result-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
      .result-row:last-child { border-bottom: 0; }
      .result-row .amt { font-weight: 800; font-variant-numeric: tabular-nums; }
      .result-row.total { font-size: 1.08rem; }
      .result-note { font-size: .9rem; color: var(--ink-soft); margin-top: 12px; }
      table.paydays { width: 100%; border-collapse: collapse; font-size: .97rem; }
      table.paydays th, table.paydays td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
      table.paydays th { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

      /* ---------- About ---------- */
      .about-grid { display: grid; gap: 28px; padding-bottom: 8px; }
      @media (min-width: 820px) { .about-grid { grid-template-columns: 340px 1fr; align-items: start; } }
      .about-grid figure { margin: 0; }
      .about-grid figure img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow); }
      .about-grid figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: 10px; }
      .about-copy h2 { font-size: 1.5rem; margin: 26px 0 10px; }
      .about-copy h2:first-child { margin-top: 0; }
      .about-copy p { margin-bottom: 14px; }
      .creed {
        display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0;
      }
      .creed span {
        border: 1px solid var(--green); color: var(--green); border-radius: 999px;
        padding: 7px 14px; font-weight: 800; font-size: .85rem; letter-spacing: .08em;
      }

      .plain { max-width: 760px; padding-bottom: 8px; }
      .plain p { margin-bottom: 14px; }
      .plain h2 { font-size: 1.4rem; margin: 24px 0 8px; }

      /* ---------- Footer ---------- */
      footer.site { border-top: 1px solid var(--line); margin-top: 56px; background: var(--surface); }
      .foot { padding: 30px 0 38px; display: grid; gap: 22px; }
      @media (min-width: 820px) { .foot { grid-template-columns: 1.2fr 1fr 1fr; } }
      .foot .brand { font-family: "Spectral", Georgia, serif; font-weight: 700; font-size: 1.2rem; }
      .foot p { color: var(--ink-soft); font-size: .95rem; margin-top: 6px; max-width: 40ch; }
      .foot h4 { margin: 0 0 10px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
      .foot ul { list-style: none; margin: 0; padding: 0; }
      .foot li button {
        background: none; border: 0; padding: 9px 0; color: var(--ink); font-weight: 500; min-height: 40px;
      }
      .foot li button:hover { color: var(--green); text-decoration: underline; }
      .foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; font-size: .88rem; color: var(--ink-soft); }
    
/* SEO multipage links */
a { color: inherit; }
a.nav-btn, a.wordmark, a.m-btn, a.drop-link, a.mobile-link, a.footer-link,
a[data-nav-link] { text-decoration: none; }
a.nav-btn, a.m-btn, a.drop-link, a.mobile-link, a.footer-link { cursor: pointer; }
a.wordmark { display: inline-block; }
a.drop-link { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; border:0; border-radius:10px; padding:10px 12px; color:var(--ink); min-height:44px; }
a.drop-link:hover { background:var(--surface-2); }
a.m-btn, a.mobile-link { display:block; text-align:left; width:100%; border:0; padding:12px 14px; color:var(--ink); font-weight:600; }
a.footer-link { color:inherit; }
a.content-cta { text-decoration:none; }
a:focus-visible, button:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* Static mobile navigation: visible without JavaScript or a hamburger control. */
@media (max-width: 819px) {
  .mobile-panel { display: block !important; }
  .mobile-panel .m-btn { display: flex; text-decoration: none; }
}