/* ============================================================
   HOME BUSINESS STARTER KIT: visual identity. Site-specific.

   WHO THIS IS FOR
   People who need income that fits around home: parents of small
   kids, caregivers, people managing a disability or a chronic
   illness, people between jobs, people who retired early. Most
   have already been pitched something in a group chat that wanted
   money up front. Time and startup money are both tight, and
   trust is lower than either.

   WHAT THE DESIGN HAS TO SAY
   Organized, plain and on your side. The site works like the
   parts drawers in a hardware store: every option has a label,
   and the label tells you exactly what it takes.

   WHY IT DOESN'T LOOK LIKE A WORK-FROM-HOME SITE
   That category is laptops by a pool, stacks of cash and "be your
   own boss" in gold. This reader has learned that look ends with a
   payment link. Kraft paper, slab type and printed labels say
   toolbox, not jackpot.

   COLOR
   Kraft ground, cream labels, espresso ink. Maroon is the working
   color: sturdy, warm, and nothing like bank blue or money green.
   Caution yellow shows up as tape on the scam warnings and as the
   filled gauge on dark label heads, never as text on a light
   ground. Levels are always written out; the gauge only backs up
   the words. Every pair is checked by the build script.

   TYPE
   Zilla Slab for headings, like a stamped label. Public Sans for
   reading: plain, very legible, built for public information.
   ============================================================ */

:root {
  --kraft:       #efe6d6;
  --label:       #fffaf1;
  --ink:         #2a2119;
  --ink-soft:    #5a4a3b;
  --maroon:      #7b2d3a;
  --maroon-deep: #5f1f2b;
  --maroon-wash: #f6e4e2;
  --rule:        #d6c8b0;   /* decorative dividers only */
  --rule-strong: #8a7a64;   /* control borders, 3:1 or better */
  --tape:        #f2d36b;

  --paper:      var(--kraft);
  --accent:     var(--maroon);
  --accent-ink: #ffffff;
  --focus:      #1d5fa8;    /* blue, so it never blends into maroon controls */
  --measure:    66ch;

  --display: 'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  --body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[hidden] { display: none !important; }

body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; background: var(--kraft); color: var(--ink); }

.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.75rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.3rem); margin-bottom: 0.7rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.85rem; }
a { color: var(--maroon); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--maroon-deep); }

.eyebrow { font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--maroon); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 50ch; }

/* ---- Header ------------------------------------------------ */
.site-header { background: var(--label); border-bottom: 3px solid var(--ink); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.brand .kit { font-family: var(--body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; color: #ffffff; background: var(--maroon); padding: 0.3rem 0.5rem; border-radius: 3px; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--rule-strong); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--maroon); color: var(--maroon); }

main { padding-block: 3rem 4.5rem; }
.hero { padding-bottom: 2.5rem; }
.hero h1 { max-width: 22ch; margin-bottom: 1rem; }
.section { margin-top: 3.5rem; }

/* ---- THE LABEL ---------------------------------------------
   Signature element: a printed parts-drawer label. The dark head
   carries the level in words; the body is the same spec sheet on
   every listing, so options compare at a glance. */
.labels { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); margin-top: 1.25rem; }
.label { background: var(--label); border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.label-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--ink); color: var(--label); padding: 0.5rem 0.9rem; }
.label-head .level { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.gauge { display: inline-flex; gap: 3px; flex-shrink: 0; }
.gauge .seg { width: 14px; height: 10px; border: 1px solid #cbbba0; border-radius: 1px; }
.gauge .seg.on { background: var(--tape); border-color: var(--tape); }
.label-body { padding: 1rem 1rem 1.1rem; }
.label-body > p { font-size: 1rem; }
.specs { margin: 0.85rem 0 0; border-top: 1px solid var(--rule); }
.specs div { display: grid; grid-template-columns: 7.25rem 1fr; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
.specs dt { font-weight: 700; font-size: 0.8125rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.15rem; }
.specs dd { margin: 0; font-size: 0.975rem; }
.watch { margin-top: 0.8rem; font-size: 0.975rem; padding-left: 0.75rem; border-left: 4px solid var(--maroon); }

/* ---- Level ladder ------------------------------------------ */
.ladder { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.ladder li { background: var(--label); border: 1px solid var(--rule-strong); border-top: 6px solid var(--maroon); border-radius: 6px; padding: 1rem 1.1rem 0.6rem; max-width: none; }
.ladder .gauge .seg, .level-group > h2 .gauge .seg { border-color: var(--rule-strong); }
.ladder .gauge .seg.on, .level-group > h2 .gauge .seg.on { background: var(--maroon); border-color: var(--maroon); }
.ladder h3 { margin-top: 0.6rem; }
.ladder p { font-size: 1rem; }
.ladder a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---- Directory --------------------------------------------- */
.filter { margin-top: 1.75rem; background: var(--label); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 1rem 1.1rem; max-width: 52rem; }
.filter fieldset { border: 0; margin: 0; padding: 0; }
.filter legend { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-bottom: 0.5rem; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.95rem; border: 2px solid var(--rule-strong); border-radius: 999px; background: #ffffff; font-weight: 600; cursor: pointer; }
.chip input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; accent-color: var(--maroon); }
.chip:has(input:checked) { border-color: var(--maroon); background: var(--maroon-wash); }
.filter-status { margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }
.level-group { margin-top: 3.25rem; }
.level-group > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem; }
.level-group > h2 .gauge .seg { width: 16px; height: 12px; }

/* ---- Caution tape: scam warnings only ---------------------- */
.caution { position: relative; background: var(--label); border: 2px solid var(--ink); border-radius: 6px; padding: 2.4rem clamp(1.1rem, 3vw, 2rem) 2.2rem; overflow: hidden; }
.caution::before, .caution::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(-45deg, var(--tape) 0 14px, var(--ink) 14px 28px); }
.caution::before { top: 0; }
.caution::after { bottom: 0; }
.tape-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.tape-list li { max-width: none; padding: 0.8rem 1rem; background: #ffffff; border: 1px solid var(--rule-strong); border-left: 6px solid var(--maroon); border-radius: 4px; }
.tape-list strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.asks { margin: 0.75rem 0 0; padding-left: 1.4rem; }
.asks li { margin-bottom: 0.55rem; }

/* ---- The kit checklist ------------------------------------- */
.kit { display: grid; gap: 1.25rem; margin-top: 0.5rem; }
.kit fieldset { background: var(--label); border: 2px solid var(--ink); border-radius: 6px; padding: 0.25rem 1.1rem 0.6rem; margin: 0; }
.kit legend { font-family: var(--display); font-weight: 700; font-size: 1.2rem; background: var(--ink); color: var(--label); padding: 0.3rem 0.8rem; border-radius: 3px; }
.check { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.6rem; align-items: start; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); cursor: pointer; font-weight: 600; }
.check:last-of-type { border-bottom: 0; }
.check input { width: 1.35rem; height: 1.35rem; min-height: 0; margin: 0.2rem 0 0; accent-color: var(--maroon); }
.check small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }

/* ---- Panels, buttons, forms -------------------------------- */
.panel { background: var(--label); border: 1px solid var(--rule-strong); border-radius: 6px; padding: clamp(1.25rem, 3vw, 2rem); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.25rem; background: var(--maroon); color: #ffffff; border: 2px solid var(--maroon); border-radius: 4px; font-weight: 700; text-decoration: none; cursor: pointer; font-size: 1rem; }
.btn:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); color: #ffffff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--label); color: var(--ink); border-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.prose h2 { margin-top: 2.25rem; font-size: clamp(1.45rem, 3vw, 1.9rem); }
.prose ul, .prose ol { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--rule-strong); border-radius: 4px; background: #ffffff; }
.signup button { justify-self: start; }
.fine { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.75rem; }

/* ---- Footer: dark band, light focus ring ------------------- */
.site-footer { background: var(--ink); color: var(--kraft); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.site-footer h2 { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tape); margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--label); display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--tape); }
.site-footer .fine { color: #d8cdb8; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--tape); }

@media (max-width: 30rem) {
  .specs div { grid-template-columns: 1fr; gap: 0.1rem; }
  .label-head { flex-wrap: wrap; }
}
@media print {
  .site-header, .site-footer, .skip-link, .no-print { display: none !important; }
  body { background: #ffffff; }
  main { padding: 0; }
  .kit fieldset { break-inside: avoid; }
}
@media (forced-colors: active) {
  .label, .ladder li, .chip, .panel, .caution, .kit fieldset, .btn { border: 1px solid; }
  .gauge .seg.on { background: CanvasText; }
}

/* Narrow screens: keep every page within 320px (WCAG 1.4.10 reflow). Added 2026-09-17 audit. */
a[href^="mailto:"] { overflow-wrap: anywhere; }