:root{
  --brass:#b8871f; --brass-deep:#8a6414;
  --walnut:#6b4423; --ink:#2a1c10; --muted:#7c6b56;
  --cream:#f4ecdd; --paper:#fbf6ec; --line:#e6dcc8;
  --accent:#c8531c;               /* warm terracotta link */
  --shadow:0 1px 2px rgba(42,28,16,.06),0 8px 24px rgba(42,28,16,.08);
  --maxw:720px;
}
@media (prefers-color-scheme: dark){
  :root{
    --brass:#d8a94a; --brass-deep:#c2953a;
    --walnut:#c79a6a; --ink:#efe6d6; --muted:#a1917a;
    --cream:#171310; --paper:#1f1a15; --line:#332b22;
    --accent:#e8905e;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Header ---- */
.masthead{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(184,135,31,.12), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--cream));
  border-bottom:1px solid var(--line);
}
.masthead-inner{
  max-width:var(--maxw); margin:0 auto; padding:34px 24px 30px;
  display:flex; align-items:center; gap:16px;
}
.logo{width:46px; height:46px; flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(42,28,16,.18))}
.brand{display:flex; flex-direction:column; line-height:1.15}
.brand b{font-weight:800; letter-spacing:-.01em; font-size:20px; color:var(--ink)}
.brand span{color:var(--muted); font-size:13px}

/* pendulum sway on the logo */
.pendulum{transform-origin:50px 72px; animation:sway 2.4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@media (prefers-reduced-motion: reduce){.pendulum{animation:none}}

/* ---- Content ---- */
main{max-width:var(--maxw); margin:0 auto; padding:40px 24px 24px}
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:18px; padding:38px 40px; box-shadow:var(--shadow);
}
h1{
  font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:34px; line-height:1.1; letter-spacing:-.01em; margin:0 0 6px;
  color:var(--ink);
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:12px;
  font-weight:700; color:var(--brass); margin:0 0 10px;
}
h2{
  font-family:Georgia,serif; font-weight:700; font-size:21px;
  margin:34px 0 10px; color:var(--ink);
}
h2::before{
  content:""; display:block; width:34px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--brass),transparent); margin-bottom:12px;
}
p,li{color:var(--ink)}
strong{color:var(--ink)}
hr{border:0; border-top:1px solid var(--line); margin:28px 0}
code{
  background:var(--cream); border:1px solid var(--line); border-radius:6px;
  padding:1px 6px; font-size:.9em;
}
.effective{
  display:inline-block; font-size:13px; color:var(--muted);
  background:var(--cream); border:1px solid var(--line);
  border-radius:999px; padding:4px 12px; margin:2px 0 20px;
}

/* doc link cards (per-app hub) */
.links{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.links a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; background:var(--cream); border:1px solid var(--line);
  border-radius:12px; color:var(--ink); font-weight:600; text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.links a:hover{border-color:var(--brass); transform:translateY(-1px); text-decoration:none}
.links a::after{content:"→"; color:var(--brass); font-weight:700}

/* brand landing: app cards */
.app-list{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px}
.app-list a{
  display:block; padding:20px 22px; background:var(--cream);
  border:1px solid var(--line); border-radius:14px; text-decoration:none;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.app-list a:hover{border-color:var(--brass); transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none}
.app-name{display:block; font-weight:800; font-size:17px; color:var(--ink)}
.app-name .soon{
  font-style:normal; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:middle;
}
.app-tag{display:block; color:var(--muted); font-size:14px; margin-top:3px}

/* per-app sub-nav (shown on app pages) */
.subnav{
  max-width:var(--maxw); margin:0 auto; padding:16px 24px 0;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.subnav .crumb{color:var(--muted); font-size:13px; margin-right:4px}
.subnav .crumb a{color:var(--muted)}
.subnav a{
  font-size:13px; font-weight:600; color:var(--muted);
  padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper);
}
.subnav a:hover{border-color:var(--brass); color:var(--brass); text-decoration:none}
.subnav a.active{background:var(--brass); border-color:var(--brass); color:#fff}

/* ---- Footer ---- */
footer{
  max-width:var(--maxw); margin:14px auto 0; padding:26px 24px 48px;
  color:var(--muted); font-size:13px; display:flex; gap:16px; flex-wrap:wrap;
  align-items:center; border-top:1px solid var(--line);
}
footer nav{display:flex; gap:16px; flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--brass)}
footer .spacer{flex:1}

@media (max-width:560px){
  .card{padding:26px 22px; border-radius:14px}
  h1{font-size:28px}
}