/* Caliber — web design system, mapped from the app (Design System v2.2 "Quiet Luxury").
   Colors, type voices, and adaptive light/dark are lifted from CaliberColors.swift +
   CaliberFonts.swift so the site reads as the same product as the app. No emojis. */

:root{
  --bg:#FAFAF8; --surface:#FFFFFF; --elevated:#F5F4F1;
  --text:#1C1C1E; --text-2:#6B6B70; --text-3:#9D9DA3;
  --teal:#4A8577; --teal-deep:#3D7066; --coral:#B56B5B;
  --rule:#E7E5E0; --maxw:680px;
  --serif: ui-serif,"New York",Georgia,"Times New Roman",serif;       /* Coaching/display voice */
  --sans: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif; /* System voice */
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;            /* Data voice */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#151516; --surface:#1B1B1D; --elevated:#232326;
    --text:#EFEBE3; --text-2:#8E8E94; --text-3:#58585E;
    --teal:#5B9A8B; --teal-deep:#6FA99B; --coral:#C47B6B; --rule:#2A2A2D;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Header */
.site-header{
  max-width:var(--maxw); margin:0 auto; padding:30px 24px 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.wordmark{ font-family:var(--serif); font-size:22px; font-weight:500; color:var(--text); text-decoration:none; letter-spacing:.2px; }
.nav{ display:flex; gap:18px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.nav a{ color:var(--text-2); text-decoration:none; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--teal-deep); }

/* Document body */
main.doc{ max-width:var(--maxw); margin:0 auto; padding:40px 24px 56px; }
.eyebrow{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--coral); margin:0 0 10px; }
h1{ font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.15; margin:0 0 8px; letter-spacing:-.01em; }
h2{ font-family:var(--serif); font-weight:500; font-size:23px; margin:46px 0 12px; letter-spacing:-.01em; }
h3{ font-family:var(--sans); font-weight:600; font-size:16.5px; margin:28px 0 8px; }
.meta{ font-family:var(--mono); font-size:12.5px; color:var(--text-3); margin:2px 0 8px; }
p,li{ color:var(--text); }
.lead{ font-family:var(--serif); font-size:19px; line-height:1.5; color:var(--text); margin:0 0 8px; }
a{ color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover{ color:var(--teal); }
hr{ border:0; border-top:1px solid var(--rule); margin:36px 0; }
ul,ol{ padding-left:1.2em; }
li{ margin:6px 0; }
strong{ font-weight:600; }
table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:15px; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top; }
th{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); font-weight:500; }

/* Callouts */
.callout{ background:var(--elevated); border:1px solid var(--rule); border-radius:14px; padding:16px 18px; margin:24px 0; font-size:15.5px; color:var(--text-2); }
.callout.crisis{ border-left:3px solid var(--coral); }
.callout strong{ color:var(--text); }

/* Footer */
.site-footer{ max-width:var(--maxw); margin:0 auto; padding:26px 24px 56px; border-top:1px solid var(--rule); }
.site-footer p{ margin:5px 0; }
.site-footer .tag{ font-family:var(--serif); font-size:15px; color:var(--text-2); }
.site-footer .legal{ font-size:13px; color:var(--text-3); }
.site-footer .legal a{ color:var(--text-2); }

/* Home */
.hero{ max-width:var(--maxw); margin:0 auto; padding:72px 24px 40px; }
.hero h1{ font-size:44px; line-height:1.1; }
.hero .sub{ font-family:var(--serif); font-size:20px; color:var(--text-2); line-height:1.5; margin:14px 0 28px; max-width:34ch; }
.cardrow{ max-width:var(--maxw); margin:0 auto; padding:0 24px 56px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.card{ display:block; background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:20px; text-decoration:none; color:var(--text); transition:border-color .15s ease; }
.card:hover{ border-color:var(--teal); }
.card .k{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--coral); }
.card .t{ font-family:var(--serif); font-size:19px; margin:8px 0 2px; }
.card .d{ font-size:14px; color:var(--text-2); }

@media (max-width:560px){
  h1{font-size:28px} .hero h1{font-size:34px} body{font-size:16px}
  .cardrow{ grid-template-columns:1fr; }
}