/* Tiny Moat — shared design system (static, no build) */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@400;450;500;600&display=swap');

:root{
  --ink:#171B18; --ink-2:#20261F; --ink-3:#2A322A;
  --paper:#ECE6D9; --paper-2:#F4F0E7; --paper-3:#E4DCCB;
  --sage:#8B9678; --sage-deep:#5F6E54;
  --teal:#35544E; --teal-deep:#26403B;
  --clay:#B0805C; --sand:#D8C7A8;
  --on-dark:#EDE7DB; --muted-dark:#A8A18F;
  --on-paper:#2A2E27; --muted-paper:#6C6E60;
  --line-dark:rgba(237,231,219,.14); --line-paper:#DBD2C0;
  --shadow:0 24px 60px -30px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; color:var(--on-paper); background:var(--paper);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible{outline:2px solid var(--clay); outline-offset:3px; border-radius:4px;}
img{max-width:100%; display:block;}

.serif{font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:-.005em;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:15px; font-weight:500; padding:15px 22px; border-radius:12px;
  border:1px solid transparent; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  width:100%; max-width:340px;
}
.btn .arw{transition:transform .15s ease;}
.btn:hover{text-decoration:none;}
.btn:hover .arw{transform:translateX(4px);}
.btn-light{background:var(--paper); color:var(--ink);}
.btn-light:hover{background:#fff; transform:translateY(-1px);}
.btn-outline-light{background:transparent; color:var(--on-dark); border-color:var(--line-dark);}
.btn-outline-light:hover{border-color:var(--sage); background:rgba(237,231,219,.05);}
.btn-solid{background:var(--teal); color:var(--paper-2); width:auto;}
.btn-solid:hover{background:var(--teal-deep); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--on-paper); border-color:var(--line-paper); width:auto;}
.btn-ghost:hover{background:var(--paper-3); border-color:var(--sage-deep);}

/* ---------- social ---------- */
.social{display:flex; gap:10px;}
.social a{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px; border:1px solid var(--line-dark); color:var(--muted-dark);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.social a:hover{color:var(--on-dark); border-color:var(--sage); background:rgba(237,231,219,.05); text-decoration:none;}
.social svg{width:18px; height:18px; fill:currentColor;}
.social.on-paper a{border-color:var(--line-paper); color:var(--muted-paper);}
.social.on-paper a:hover{color:var(--teal); border-color:var(--sage-deep); background:var(--paper-3);}

/* ================= HOME : split hero ================= */
.hero{min-height:100vh; display:grid; grid-template-columns:clamp(300px, 34%, 560px) 1fr;}
.hero-panel{
  background:var(--ink); color:var(--on-dark);
  display:flex; flex-direction:column; justify-content:center;
  padding:56px clamp(24px,3vw,52px);
  background-image:radial-gradient(120% 90% at 0% 0%, rgba(139,150,120,.10), transparent 55%);
}
.wordmark{font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted-dark); font-weight:500; margin:0 0 30px;}
.hero-title{font-weight:300; font-size:clamp(32px,3.4vw,50px); line-height:1.12; letter-spacing:.005em; margin:0 0 24px; color:var(--on-dark);}
.hero-lead{font-size:17px; color:var(--muted-dark); max-width:42ch; margin:0 0 4px; font-weight:400;}
.hero-thesis{font-size:18px; font-style:italic; font-weight:300; color:var(--sand); margin:16px 0 36px; max-width:42ch;}
.hero-cta{display:flex; flex-direction:column; gap:12px; margin-bottom:36px;}
.hero-foot{margin-top:2px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.hero-foot .copy{font-size:13px; color:var(--muted-dark);}
.hero-art{position:relative; overflow:hidden; background:linear-gradient(160deg,#E6DCC6,#9BA585 45%,#33534D);}
.hero-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* ================= SUBPAGE shell ================= */
.topbar{
  position:sticky; top:0; z-index:10; background:rgba(23,27,24,.92); backdrop-filter:blur(8px);
  color:var(--on-dark); border-bottom:1px solid var(--line-dark);
}
.topbar .row{max-width:920px; margin:0 auto; padding:16px clamp(20px,4vw,32px); display:flex; align-items:center; justify-content:space-between; gap:16px;}
.topbar .brand{display:flex; align-items:center; gap:11px; color:var(--on-dark); font-weight:500;}
.topbar .brand:hover{text-decoration:none; color:#fff;}
.topbar .brand svg{width:26px; height:26px;}
.topbar nav{display:flex; gap:22px; font-size:14.5px;}
.topbar nav a{color:var(--muted-dark);}
.topbar nav a:hover{color:var(--on-dark); text-decoration:none;}
.topbar nav a.active{color:var(--sand);}

.page-head{background:var(--ink); color:var(--on-dark); padding:64px clamp(20px,4vw,32px) 60px;}
.page-head .inner{max-width:920px; margin:0 auto;}
.page-head .eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--sage); font-weight:600; margin:0 0 18px;}
.page-head h1{font-weight:300; font-size:clamp(34px,4.4vw,52px); line-height:1.1; letter-spacing:.005em; margin:0 0 18px;}
.page-head .sub{font-size:18px; color:var(--muted-dark); max-width:60ch; margin:0;}

/* role summary card (hiring) */
.facts{max-width:920px; margin:-34px auto 0; padding:0 clamp(20px,4vw,32px);}
.facts .card{background:var(--paper-2); border:1px solid var(--line-paper); border-radius:16px; box-shadow:var(--shadow); padding:26px clamp(22px,3vw,34px); display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px 28px;}
.facts .f .k{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-paper); font-weight:600; margin:0 0 4px;}
.facts .f .v{font-size:15.5px; color:var(--on-paper); font-weight:500;}

/* ---------- prose ---------- */
.prose{max-width:760px; margin:0 auto; padding:56px clamp(20px,4vw,32px) 20px;}
.prose h2{font-family:'Jost',sans-serif; font-weight:500; font-size:27px; line-height:1.2; letter-spacing:-.005em; margin:52px 0 16px; color:var(--ink);}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:18px; font-weight:600; margin:30px 0 10px; color:var(--ink-2);}
.prose p{margin:0 0 16px; color:var(--on-paper);}
.prose ul{margin:0 0 18px; padding-left:0; list-style:none;}
.prose ul li{position:relative; padding-left:26px; margin:9px 0;}
.prose ul li::before{content:""; position:absolute; left:6px; top:12px; width:7px; height:7px; border-radius:2px; background:var(--sage); transform:rotate(45deg);}
.prose strong{color:var(--ink); font-weight:600;}
.prose hr{border:none; border-top:1px solid var(--line-paper); margin:46px 0;}
.prose .lead{font-size:18.5px; color:var(--muted-paper);}

.callout{display:flex; gap:14px; align-items:flex-start; background:var(--paper-3); border:1px solid var(--line-paper); border-left:3px solid var(--sage); border-radius:12px; padding:16px 20px; margin:24px 0;}
.callout .ic{font-size:20px; line-height:1.4;}
.callout.accent{background:#E9EEE7; border-left-color:var(--teal);}

.split2{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:22px 0;}
.pane{background:var(--paper-2); border:1px solid var(--line-paper); border-radius:14px; padding:22px 24px;}
.pane h3{margin-top:0;}
.pane.good{border-top:3px solid var(--sage-deep);}
.pane.bad{border-top:3px solid var(--clay);}

.tbl-wrap{overflow-x:auto; margin:22px 0;}
table.tm{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px;}
table.tm th, table.tm td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-paper); vertical-align:top;}
table.tm thead th{background:var(--ink); color:var(--on-dark); font-weight:500; letter-spacing:.02em;}
table.tm tbody tr:nth-child(even){background:var(--paper-2);}

.earn{display:flex; gap:16px; flex-wrap:wrap; margin:16px 0;}
.earn .chip{background:var(--paper-2); border:1px solid var(--line-paper); border-radius:12px; padding:14px 20px;}
.earn .chip b{font-family:'Jost',sans-serif; font-weight:500; font-size:23px; color:var(--teal); display:block;}
.earn .chip span{font-size:13px; color:var(--muted-paper);}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:var(--muted-dark); padding:44px clamp(20px,4vw,32px);}
.foot .inner{max-width:920px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;}
.foot .brand{display:flex; align-items:center; gap:11px; color:var(--on-dark);}
.foot .brand svg{width:28px; height:28px;}
.foot .copy{font-size:13px;}
.foot a{color:var(--muted-dark);}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr; min-height:auto;}
  .hero-art{order:-1; height:40vh; min-height:280px;}
  .hero-panel{padding:44px 24px 48px;}
  .hero-cta .btn{max-width:none;}
  .split2{grid-template-columns:1fr;}
  .topbar nav{gap:16px;}
  .foot .inner{flex-direction:column; text-align:center;}
}
@media (max-width:520px){
  .topbar nav a.hide-sm{display:none;}
}