/* ============================================================
   TASHA FRANCIS — tashafrancishomes.com
   Design system: Direction 2 "The Monument"
   Marcellus (display) · Figtree (body/UI) · IBM Plex Mono (data)
   Rules: cream carries, espresso punctuates; red is a scalpel
   (one substantial red element per viewport, ≤5% coverage);
   kitsch blacklist absolute. See Tasha-Design-Direction-v1.html.
   ============================================================ */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/marcellus-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --linen:#F7F2E9;
  --linen-2:#F1EADD;
  --ink:#1B1713;
  --espresso:#16120E;
  --kwred:#CE011F;
  --oxblood:#8F0013;
  --warmgray:#6F675E;
  --mutedlinen:#CFC5B4;
  --hairline:rgba(27,23,19,.16);
  --hairline-d:rgba(247,242,233,.18);
  --serif:'Marcellus',Georgia,serif;
  --sans:'Figtree',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--linen);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--linen)}

.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
.wrap-n{max-width:720px;margin:0 auto;padding:0 28px}

/* grain */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:.015em}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--warmgray)}
.eyebrow .tick{color:var(--kwred)}
.dark .eyebrow{color:var(--mutedlinen)}
.lede{font-size:18px;color:var(--warmgray);max-width:58ch}
.dark .lede{color:var(--mutedlinen)}
.redrule{width:56px;height:2px;background:var(--kwred)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--linen);border-bottom:1px solid var(--hairline)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1160px;margin:0 auto}
.logotype{font-family:var(--serif);font-size:20px;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.logotype .dot{color:var(--kwred)}
.site-head .brand{display:flex;align-items:center;gap:16px;min-width:0}
.site-head .brand .sep{width:1px;height:30px;background:var(--hairline);flex:none}
.site-head .kw-h{height:36px;width:auto;flex:none}
.nav-toggle{display:none}
.nav-burger{display:none;cursor:pointer;width:26px;height:20px;position:relative}
.nav-burger span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.nav-burger span:nth-child(1){top:0}.nav-burger span:nth-child(2){top:9px}.nav-burger span:nth-child(3){top:18px}
nav.main{display:flex;align-items:center;gap:26px}
nav.main a{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;text-decoration:none;color:var(--ink)}
nav.main a:hover{color:var(--oxblood)}
nav.main a.active{border-bottom:2px solid var(--kwred);padding-bottom:3px}
nav.main a.btn{margin-left:6px}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;padding:14px 26px;border-radius:2px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn.red{background:var(--kwred);color:var(--linen)}
.btn.red:hover{background:var(--oxblood)}
.btn.ink{background:var(--ink);color:var(--linen)}
.btn.ink:hover{background:var(--espresso)}
.btn.ghost-l{border-color:var(--hairline);color:var(--ink);background:transparent}
.btn.ghost-l:hover{border-color:var(--ink)}
.btn.ghost-d{border-color:var(--hairline-d);color:var(--linen);background:transparent}
.btn.ghost-d:hover{border-color:var(--linen)}
.btn.sm{padding:10px 18px;font-size:11px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- sections ---------- */
section{border-bottom:1px solid var(--hairline)}
.dark{background:var(--espresso);color:var(--linen);border-bottom:none}
.dark ::selection{background:var(--linen);color:var(--espresso)}
.band{padding:88px 0}
.band-lg{padding:110px 0}
.band-sm{padding:64px 0}

/* hero (home) */
.hero h1{font-size:clamp(36px,5.4vw,58px);line-height:1.12;max-width:16ch;margin:22px 0 18px}
.hero .body{color:var(--mutedlinen);max-width:52ch;font-size:16.5px;margin-bottom:34px}

/* full-bleed image */
.bleed img{width:100%;height:auto}
.bleed.vh img{max-height:74vh;object-fit:cover}

/* page head (interior pages) */
.page-head{padding:78px 0 58px}
.page-head h1{font-size:clamp(32px,4.6vw,48px);line-height:1.14;max-width:18ch;margin:20px 0 16px}
.page-head .lede{margin-top:4px}

/* editorial split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split.tight{gap:40px}
.split h2{font-size:clamp(26px,3.4vw,36px);line-height:1.18;margin:14px 0 16px}
.split p+p{margin-top:14px}
.split .body{color:var(--warmgray)}
.dark .split .body{color:var(--mutedlinen)}
figure.framed{border:1px solid var(--hairline);border-radius:2px;overflow:hidden;background:var(--linen-2)}
figure.framed figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--warmgray);padding:10px 14px;border-top:1px solid var(--hairline)}

/* niche door cards */
.doors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.door{border:1px solid var(--hairline);border-radius:2px;background:var(--linen);padding:26px 26px 24px;text-decoration:none;display:block;transition:border-color .15s ease}
.door:hover{border-color:var(--ink)}
.door .eyebrow{color:var(--kwred)}
.door h3{font-size:20px;margin:12px 0 8px}
.door p{font-size:14px;color:var(--warmgray)}
.door .go{font-family:var(--mono);font-size:11px;letter-spacing:.18em;margin-top:16px;display:block;color:var(--ink)}
.door:hover .go{color:var(--oxblood)}

/* content sections on hubs */
.hub-sec{padding:56px 0}
.hub-sec h2{font-size:clamp(24px,3vw,32px);margin:12px 0 14px;max-width:24ch}
.hub-sec .body{max-width:68ch;color:var(--ink)}
.hub-sec .body p+p{margin-top:14px}
.hub-sec .body strong{font-weight:600}
.hub-sec ul{margin:14px 0 0 20px}
.hub-sec li{margin-bottom:9px}
.hub-sec li::marker{color:var(--kwred)}

/* protocol steps */
.protocol{display:grid;gap:0;border:1px solid var(--hairline);border-radius:2px;background:var(--linen)}
.step{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:26px 28px;border-bottom:1px solid var(--hairline)}
.step:last-child{border-bottom:none}
.step .n{font-family:var(--mono);font-size:13px;color:var(--kwred);letter-spacing:.2em;padding-top:4px}
.step h3{font-size:21px;margin-bottom:6px}
.step p{font-size:15px;color:var(--warmgray);max-width:62ch}

/* quote band */
.quote{padding:96px 0}
.quote blockquote{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);line-height:1.3;max-width:26ch}
.quote .attr{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--mutedlinen);text-transform:uppercase}

/* vitals strip (Market Vitals component — activate with real data only) */
.vitals{border:1px solid var(--hairline);border-radius:2px;background:var(--linen-2);padding:22px 28px;display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.vitals .lab{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--kwred);text-transform:uppercase}
.vitals .kv{font-family:var(--mono);font-size:13px;letter-spacing:.05em}
.vitals .kv span{color:var(--warmgray)}

/* credentials strip */
.creds{display:flex;flex-wrap:wrap;gap:10px 0;border:1px solid var(--hairline);border-radius:2px;background:var(--linen-2)}
.cred{flex:1;min-width:200px;padding:20px 24px;border-right:1px solid var(--hairline)}
.cred:last-child{border-right:none}
.cred .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--kwred);text-transform:uppercase}
.cred .v{font-family:var(--serif);font-size:17px;margin-top:6px}

/* blog */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{border:1px solid var(--hairline);border-radius:2px;overflow:hidden;background:var(--linen);text-decoration:none;display:block;transition:border-color .15s ease}
.card:hover{border-color:var(--ink)}
.card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card .pad{padding:20px 22px 22px}
.card .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--warmgray)}
.card .meta b{color:var(--kwred);font-weight:500}
.card h3{font-size:21px;margin:10px 0 8px}
.card p{font-size:14px;color:var(--warmgray)}

/* article */
.article-head{padding:72px 0 44px}
.article-head h1{font-size:clamp(30px,4.2vw,44px);line-height:1.16;max-width:20ch;margin:18px 0 14px}
.article-head .byline{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--warmgray)}
.article{padding:52px 0 84px}
.article .wrap-n>p{margin-bottom:18px;font-size:17px;line-height:1.75}
.article h2{font-size:26px;margin:40px 0 14px}
.article ul{margin:0 0 18px 22px}
.article li{margin-bottom:10px;font-size:16.5px}
.article li::marker{color:var(--kwred)}
.article .callout{border:1px solid var(--hairline);border-left:2px solid var(--kwred);border-radius:2px;background:var(--linen-2);padding:18px 22px;margin:26px 0;font-size:15.5px;color:var(--warmgray)}
.article a{color:var(--oxblood);text-decoration-thickness:1px;text-underline-offset:3px}
figure.post-hero{margin:0 0 8px}
figure.post-hero img{width:100%;border-radius:2px;border:1px solid var(--hairline)}
figure.post-hero figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--warmgray);padding-top:10px}

/* forms */
form.lead{display:grid;gap:16px;max-width:560px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--warmgray);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--linen-2);border:1px solid var(--hairline);border-radius:2px;
  padding:13px 14px;font-family:var(--sans);font-size:15.5px;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--oxblood);outline-offset:1px;border-color:transparent}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;opacity:0}

/* contact direct block */
.direct{border:1px solid var(--hairline);border-radius:2px;background:var(--linen-2);padding:24px 26px}
.direct .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--kwred);text-transform:uppercase}
.direct .v{font-family:var(--serif);font-size:20px;margin:6px 0 18px}
.direct .v:last-child{margin-bottom:0}
.direct a{text-decoration:none}
.direct a:hover{color:var(--oxblood)}

/* CTA band */
.cta-band{background:var(--linen-2);border-bottom:none}
.cta-band .inner{padding:72px 0;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(24px,3.2vw,34px);max-width:20ch}
.cta-band p{color:var(--warmgray);margin-top:8px;max-width:44ch}

/* ---------- footer ---------- */
footer{background:var(--espresso);color:var(--mutedlinen);font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:44px;padding:72px 0 52px}
footer .logotype{color:var(--linen);font-size:22px}
footer .tag{margin-top:12px;max-width:34ch;line-height:1.6}
footer .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mutedlinen);margin-bottom:14px}
footer .lnk{display:block;color:var(--linen);text-decoration:none;margin-bottom:9px;font-size:14px}
footer .lnk:hover{color:var(--mutedlinen)}
footer address{font-style:normal;line-height:1.7}
footer address a{color:var(--linen);text-decoration:none}
footer address a:hover{color:var(--mutedlinen)}
footer .compliance{border-top:1px solid var(--hairline-d);padding:26px 0 40px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
footer .compliance img.kw{height:34px;width:auto}
footer .compliance .eho{display:flex;align-items:center;gap:8px}
footer .compliance p{font-size:12px;line-height:1.6;max-width:60ch}
footer .fineprint{font-size:11.5px;color:var(--warmgray);padding-bottom:34px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .doors{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:34px}
  footer .cols{grid-template-columns:1fr;gap:34px}
  .cards{grid-template-columns:1fr}
}
@media (max-width:760px){
  .band{padding:64px 0}
  .band-lg{padding:76px 0}
  .site-head .brand{gap:12px}
  .site-head .brand .sep{height:26px}
  .site-head .kw-h{height:30px}
  .nav-burger{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--linen);
    border-bottom:1px solid var(--hairline);flex-direction:column;align-items:flex-start;
    gap:0;padding:10px 28px 18px}
  nav.main a{padding:11px 0;width:100%}
  nav.main a.active{border-bottom:none;color:var(--oxblood)}
  nav.main a.btn{margin:10px 0 0;text-align:center}
  .nav-toggle:checked ~ nav.main{display:flex}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .field-row{grid-template-columns:1fr}
  .step{grid-template-columns:64px 1fr;padding:22px 20px}
}