/* ============================================================
   Texas Coworking — Design System  (site.css)
   "Hill Country Modern": editorial + architectural.
   Deep ink, Texas gold, warm paper. Fraunces display / Inter text.
   Single source of shared tokens + base styles for the network.
   ============================================================ */

/* ---- Fonts (load once per page) ----
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
*/

:root{
  /* Palette — warm paper editorial */
  --ink:#16140f;          /* near-black warm ink (primary text / dark surfaces) */
  --ink-2:#221f18;
  --paper:#faf6ee;        /* page background, warm paper */
  --paper-2:#f3ecdd;      /* alt section background */
  --card:#ffffff;         /* card surface on paper */
  --line:#e2d9c6;         /* hairline border */
  --line-strong:#cdbf a3; /* (kept readable below) */

  --text:#2a261d;         /* body text */
  --dim:#5a5446;          /* secondary text */
  --muted:#8a8170;        /* tertiary / labels */

  /* Brand accents */
  --gold:#c79a3a;         /* Texas gold — primary brand accent */
  --gold-deep:#9a7322;    /* gold pressed / borders */
  --gold-soft:#f1e4c4;    /* gold tint fill */
  --rust:#b4502e;         /* secondary accent (warm clay) */
  --sage:#5f7355;         /* tertiary accent (hill-country green) */
  --sky:#3f6f86;          /* link / cool accent */

  /* Type */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Scale (modular ~1.25) */
  --t-xs:.74rem; --t-sm:.86rem; --t-base:1rem; --t-md:1.18rem;
  --t-lg:1.5rem; --t-xl:2rem; --t-2xl:2.75rem; --t-3xl:3.75rem;

  /* Space / radius / shadow */
  --sp:1rem;
  --r-sm:8px; --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(22,20,15,.05),0 8px 28px -16px rgba(22,20,15,.25);
  --shadow-lg:0 24px 60px -28px rgba(22,20,15,.42);
  --wrap:1080px;
}
:root{ --line-strong:#cdbfa3; }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---- Type base ---- */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,var(--t-3xl));font-weight:700}
h2{font-size:clamp(1.9rem,4vw,var(--t-2xl))}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-md)}
p{margin:0 0 1em}
a{color:var(--sky);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
strong,b{color:var(--ink);font-weight:600}
img{max-width:100%;display:block}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* Eyebrow / kicker label */
.kicker{display:inline-block;font-family:var(--sans);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.7rem}

/* Lede / subhead */
.lede{font-size:var(--t-md);color:var(--dim);line-height:1.6;font-weight:400}

/* ---- Layout ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
.section{padding:clamp(48px,7vw,88px) 0}
.section--alt{background:var(--paper-2)}
.section--ink{background:var(--ink);color:#e8e3d6}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--ink .kicker{color:var(--gold)}
.section-head{max-width:720px;margin:0 0 2.4rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);
  font-weight:600;font-size:var(--t-sm);line-height:1;cursor:pointer;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:var(--ink);box-shadow:0 10px 24px -12px rgba(199,154,58,.8)}
.btn-primary:hover{background:var(--gold-deep);color:#fff;box-shadow:0 14px 30px -12px rgba(154,115,34,.85)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-soft)}
.section--ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.section--ink .btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(199,154,58,.1)}
.btn-sm{padding:10px 18px;font-size:var(--t-xs)}

/* ---- Cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.card h3{font-size:var(--t-md);margin-bottom:.35rem}
.card p{font-size:var(--t-sm);color:var(--dim);margin:0}
.card .card-eyebrow{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.6rem;display:block}
.card-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:var(--gold-soft);color:var(--gold-deep);font-size:1.3rem;margin-bottom:14px}
a.card{color:inherit}
a.card:hover{text-decoration:none}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---- Stat strip ---- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--card)}
.statrow .stat{padding:24px 16px;text-align:center;border-right:1px solid var(--line)}
.statrow .stat:last-child{border-right:0}
.stat-n{font-family:var(--display);font-size:var(--t-xl);font-weight:700;color:var(--ink);line-height:1}
.stat-l{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ---- Pill / tag ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;
  padding:6px 14px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deep);
  border:1px solid rgba(199,154,58,.3)}

/* ---- Nav (design-system reference; homepage keeps its network nav) ---- */
.ds-nav{position:sticky;top:0;z-index:50;background:rgba(250,246,238,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.ds-nav .nav-i{max-width:var(--wrap);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.ds-nav .brand{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink)}
.ds-nav .brand .a{color:var(--gold-deep)}
.ds-nav .links{display:flex;gap:22px}
.ds-nav .links a{color:var(--dim);font-size:var(--t-sm);font-weight:500}
.ds-nav .links a:hover{color:var(--gold-deep)}

/* ---- Footer ---- */
.ds-footer{background:var(--ink);color:#b9b2a0;padding:48px 0 36px;font-size:var(--t-sm)}
.ds-footer a{color:#d9cfb8}
.ds-footer a:hover{color:var(--gold)}
.ds-footer .foot-net a{margin:0 8px;line-height:2.1}

/* ---- Utilities ---- */
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack-cta{display:flex;gap:12px;flex-wrap:wrap}
.stack-cta.center{justify-content:center}
*:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}

@media(max-width:720px){
  .statrow{grid-template-columns:repeat(2,1fr)}
  .statrow .stat:nth-child(2){border-right:0}
  .statrow .stat:nth-child(1),.statrow .stat:nth-child(2){border-bottom:1px solid var(--line)}
  .ds-nav .links{display:none}
}