/* ============================================================
   GRUMPY MAN LABS — shared site styles
   Cream + ink, sparing warm accent. Serif brand / grotesque UI.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  /* surfaces */
  --cream:        #f2efe8;
  --cream-2:      #f7f5ef;   /* lifted card */
  --cream-3:      #ebe7dd;   /* sunken band */
  --paper:        #fbfaf6;
  --line:         rgba(35,38,44,.10);
  --line-soft:    rgba(35,38,44,.06);

  /* ink */
  --ink:          #23262c;
  --ink-2:        #3c4047;   /* body */
  --muted:        #8c887e;   /* warm grey */
  --muted-2:      #aaa599;

  /* accent (overridable via Tweaks) */
  --accent:       #8E2B2B;   /* Oxblood — was #e0521c */
  --accent-soft:  color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-ink:   #ffffff;

  /* app-world (dark, fixed) */
  --app-bg:       #0b0b0d;
  --app-card:     #16181e;
  --app-card-2:   #1b1e25;
  --app-line:     rgba(255,255,255,.07);
  --app-white:    #f3f2ef;
  --app-muted:    #888c94;
  --app-teal:     #38d6b5;
  --app-ember:    #f2552a;

  /* type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* rhythm */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 22px;

  --bg: var(--cream);
  --fg: var(--ink);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .5s ease, color .5s ease;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}
.accent-dot{ color:var(--accent); }
.serif{ font-family:var(--serif); font-weight:600; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .5s ease, border-color .5s ease;
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand__mark{ width:38px; height:38px; object-fit:contain; }
.dark .brand__mark{ filter:invert(1) brightness(1.4); }
.brand__name{
  font-weight:700; font-size:15px; line-height:1.05; letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap;
}
.brand__name small{ display:block; font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.16em; }

.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  position:relative; transition:color .2s ease;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-5px; height:1.5px;
  background:var(--accent); transition:right .25s ease;
}
.nav__links a:hover::after{ right:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s;
  white-space:nowrap;
}
.btn .arr{ transition:transform .22s cubic-bezier(.3,.7,.4,1); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--primary{ background:var(--ink); color:var(--cream); box-shadow:0 8px 24px rgba(35,38,44,.18); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(35,38,44,.24); }
.dark .btn--primary{ background:var(--app-white); color:var(--app-bg); }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--sm{ padding:10px 18px; font-size:14px; }
.btn--accent{ background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 24px var(--accent-soft); }
.btn--accent:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* pill / tag */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 12px; border-radius:999px;
  background:var(--cream-2); border:1px solid var(--line);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  white-space:nowrap;
}
.pill i{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.dark .pill{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:var(--app-white); }

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line); margin-top:0;
  padding:64px 0 40px;
}
.foot__top{ display:flex; flex-wrap:wrap; gap:48px 80px; justify-content:space-between; }
.foot__brand{ max-width:300px; }
.foot__brand .brand{ margin-bottom:18px; }
.foot__tag{ color:var(--muted); font-size:15px; }
.foot__cols{ display:flex; gap:64px; flex-wrap:wrap; }
.foot__col h4{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 16px;
}
.foot__col a, .foot__col span{
  display:block; font-size:15px; color:var(--ink-2); margin-bottom:11px; transition:color .2s;
}
.foot__col a:hover{ color:var(--accent); }
.foot__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line-soft);
  font-size:13.5px; color:var(--muted);
}
.foot__social{ display:flex; gap:10px; }
.foot__social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-2); transition:.2s;
}
.foot__social a:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }
.dark .foot__social a{ border-color:rgba(255,255,255,.14); }

/* ============================================================
   PHONE FRAME  (reused for app mockups)
   ============================================================ */
.phone{
  --w: 300px;
  width:var(--w);
  aspect-ratio:393 / 852;
  border-radius:calc(var(--w) * 0.155);
  background:linear-gradient(150deg,#3a3d42,#16171a 38%,#0c0d0f);
  padding:calc(var(--w) * 0.032);
  box-shadow:
    0 2px 4px rgba(0,0,0,.5) inset,
    0 0 0 1.5px rgba(255,255,255,.07) inset,
    0 50px 90px -30px rgba(20,16,10,.5),
    0 30px 60px -40px rgba(20,16,10,.45);
  position:relative;
}
.phone__screen{
  width:100%; height:100%; overflow:hidden; position:relative;
  border-radius:calc(var(--w) * 0.125);
  background:var(--app-bg);
  font-family:var(--sans);
  --pw: var(--w); /* internal unit base */
}
.phone__island{
  position:absolute; top:calc(var(--w)*0.035); left:50%; transform:translateX(-50%);
  width:30%; height:calc(var(--w)*0.085); background:#000; border-radius:999px; z-index:9;
}

/* ---------- app status bar ---------- */
.app-status{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--pw)*0.038) calc(var(--pw)*0.075) calc(var(--pw)*0.012);
  font-size:calc(var(--pw)*0.043); font-weight:600; position:relative; z-index:2;
}
.app-status .right{ display:flex; align-items:center; gap:calc(var(--pw)*0.018); }
.app-status svg{ display:block; }

/* real screenshot filling the phone screen */
.phone__shot{ width:100%; height:100%; object-fit:cover; display:block; }