/* ============================================================
   HomeFolk — Layout Directions · SHARED BASE
   Brand: Chili & Buttermilk. Geist type. Reused across A/B/C.
   Each direction adds its own structural CSS on top.
   ============================================================ */
:root{
  --paper:#FFF8F0; --card:#FFFCF8; --ink:#1E1512; --ink2:#2E201A;
  --sub:#6B5348; --muted:#A08878; --line:#EBDDD0; --line2:#F4EBE1;
  --accent:#C43A30; --accent-d:#A82F27; --accentsoft:#F7E2DB; --on-accent:#fff;
  --sec:#7C8A5A; --sec-d:#6A7650; --secsoft:#E8ECD8;
  --clay:#C2723C; --steel:#4D6A88; --orchid:#B07BAC; --teal:#5CB8B2;
  --cta-bright:#E0554A;
  --shadow-s:0 4px 14px rgba(40,28,20,.05);
  --shadow-m:0 14px 36px rgba(40,28,20,.09);
  --shadow-l:0 30px 70px -24px rgba(45,25,35,.34);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
html{scroll-behavior:smooth;}
body{font-family:'Geist',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;overflow-x:hidden;}
.mono{font-family:'Geist Mono',ui-monospace,monospace;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--accentsoft);color:var(--ink);}

/* ---------- type ---------- */
.eyebrow{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:9px;}
.eyebrow.rule::before{content:"";width:22px;height:1.5px;background:currentColor;display:inline-block;border-radius:1px;}
.eyebrow.sage{color:var(--sec);}
.eyebrow.muted{color:var(--muted);}
h1,h2,h3{letter-spacing:-.03em;line-height:1.02;font-weight:800;}
.lead{font-size:clamp(17px,1.5vw,19.5px);color:var(--sub);line-height:1.62;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:16px;font-weight:600;padding:14px 26px;border-radius:12px;transition:transform .15s,background-color .2s,box-shadow .2s,border-color .2s,color .2s;white-space:nowrap;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px -4px color-mix(in srgb,var(--accent) 55%,transparent);}
.btn-primary:hover{background:var(--accent-d);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{background:var(--ink2);}
.btn-lg{padding:17px 32px;font-size:17px;}
.btn-on-dark{background:var(--cta-bright);color:#fff;}
.btn-on-dark:hover{filter:brightness(.94);}
.btn-ghost-dark{background:transparent;color:var(--paper);border:1.5px solid rgba(255,248,240,.28);}
.btn-ghost-dark:hover{border-color:var(--paper);}

.badge{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:12px;transition:transform .15s;}
.badge:hover{transform:translateY(-2px);}
.badge .b-k{font-size:10.5px;line-height:1;opacity:.72;letter-spacing:.02em;}
.badge .b-v{font-size:17px;font-weight:600;line-height:1.15;margin-top:2px;}

.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--sub);}
.chip .dot{width:8px;height:8px;border-radius:50%;}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.04em;font-weight:500;}

.trust{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--sub);}
.trust svg{flex-shrink:0;}

/* ============================================================
   COMPACT PHONE MOCK — reused (Today board). Scale via --pm-w.
   ============================================================ */
.pm{--pm-w:248px;width:var(--pm-w);background:var(--ink);border-radius:34px;padding:8px;box-shadow:var(--shadow-l);flex-shrink:0;}
.pm-scr{background:var(--paper);border-radius:27px;overflow:hidden;position:relative;}
.pm-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:72px;height:19px;background:#000;border-radius:11px;z-index:5;}
.pm-status{display:flex;justify-content:space-between;align-items:center;padding:11px 18px 4px;font-size:11px;font-weight:600;color:var(--ink);}
.pm-status .sig{display:inline-flex;gap:4px;align-items:center;opacity:.8;}
.pm-status .sig i{width:3px;border-radius:1px;background:var(--ink);display:inline-block;}
.pm-status .sig i:nth-child(1){height:5px;}.pm-status .sig i:nth-child(2){height:7px;}.pm-status .sig i:nth-child(3){height:9px;}.pm-status .sig i:nth-child(4){height:11px;}
.pm-app{padding:6px 14px 0;}
.pm-eye{font-family:'Geist Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--muted);}
.pm-h1{font-size:19px;font-weight:800;letter-spacing:-.025em;margin-top:2px;line-height:1.05;}
.pm-prog{display:flex;align-items:center;gap:8px;margin-top:11px;}
.pm-track{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden;}
.pm-track i{display:block;height:100%;width:72%;background:var(--accent);border-radius:3px;}
.pm-prog span{font-family:'Geist Mono',monospace;font-size:9px;font-weight:600;color:var(--sub);}
.pm-hero{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px;margin-top:12px;box-shadow:0 6px 16px -8px rgba(30,21,18,.16);}
.pm-tag{display:inline-flex;align-items:center;gap:6px;font-family:'Geist Mono',monospace;font-size:8px;letter-spacing:.06em;color:var(--accent);font-weight:600;}
.pm-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.pm-task{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.1;}
.pm-cta{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--ink);color:var(--paper);border-radius:9px;padding:9px;font-size:12px;font-weight:600;margin-top:11px;}
.pm-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line2);}
.pm-box{width:17px;height:17px;border-radius:50%;border:1.6px solid var(--line);flex-shrink:0;}
.pm-box.on{background:var(--sec);border-color:var(--sec);display:grid;place-items:center;}
.pm-av{width:19px;height:19px;border-radius:50%;background:var(--sec);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;flex-shrink:0;}
.pm-name{font-size:12.5px;font-weight:500;flex:1;}
.pm-name.done{color:var(--muted);text-decoration:line-through;}
.pm-meta{font-family:'Geist Mono',monospace;font-size:9px;color:var(--accent);}
.pm-meta.q{color:var(--muted);}
.pm-tabs{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:9px 0 7px;margin-top:8px;font-family:'Geist Mono',monospace;font-size:8px;letter-spacing:.04em;}
.pm-tabs span{color:var(--muted);}
.pm-tabs span.on{color:var(--accent);}
.pm-home{width:96px;height:4px;border-radius:3px;background:var(--ink);opacity:.16;margin:5px auto 7px;}

/* (Entrance animation intentionally omitted: an opacity-from-0 reveal can be
   left frozen/hidden in environments that don't advance CSS animations or fire
   IntersectionObserver — print, PDF export, capture/preview. Content stays
   visible by default. ".rise" is now an inert marker class, safe to keep.) */