/*
  bobhuang.com — site stylesheet
  Single source of truth for every page (migrated out of per-page inline <style>).
  Layout: fluid 90% width. Palette: steel blue + teal accents on soft blue paper.
  Served from /wp-content/themes/ and cached per staticwebapp.config.json (1 day).
*/

:root {
  --ink:#1f2733; --mut:#5f6b7a;
  --acc:#1d6fa5; --acc-deep:#14507d; --acc2:#0e7490;
  --bg:#f2f5f8; --card:#ffffff;
  --line:#d9e4ee; --chip:#dcecf9; --chip-line:#bcd9ee;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; color:var(--ink);
  font:17px/1.75 Georgia,'Times New Roman',serif;
  background:var(--bg);
  background-image:linear-gradient(180deg,#d7e7f5 0%,#e9f1f8 320px,#f2f5f8 820px);
}

.wrap { max-width:90%; margin:0 auto; padding:24px 20px 80px; }

/* header: compact gradient banner replaces the old 960x198 image */
header.site {
  text-align:center; padding:30px 20px 22px; border-radius:14px;
  background-image:
    radial-gradient(1200px 320px at 18% -60%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(135deg,#173f5f 0%,#1d6fa5 55%,#0e7490 100%);
  box-shadow:0 6px 22px rgba(23,74,111,.35);
}
header.site a { color:inherit; text-decoration:none; }
h1.site { font-size:2.2rem; margin:0; letter-spacing:.5px; color:#fff;
  text-shadow:0 2px 6px rgba(10,40,60,.45); }
.tagline { color:#cfe6f5; font-style:italic; margin:.4rem 0 0; }

nav.top {
  text-align:center; margin:18px auto 40px; display:table; padding:7px 18px;
  background-image:linear-gradient(180deg,#2e7cb5,#1d5f92);
  border-radius:999px; box-shadow:0 3px 10px rgba(29,95,146,.35);
}
nav.top a { color:#eaf4fc; text-decoration:none; margin:0 12px; font-weight:600; }
nav.top a:hover { color:#ffd97a; text-decoration:underline; }

article {
  background:var(--card); border:1px solid var(--line); border-top:4px solid var(--acc);
  border-radius:10px; padding:36px 44px; margin-bottom:34px;
  box-shadow:0 5px 20px rgba(29,111,165,.12), 0 1px 4px rgba(31,39,51,.06);
}
article h2, article h1 { font-family:Georgia,serif; line-height:1.3; }
article h1 { margin:.1em 0 .3em; font-size:1.9rem; color:var(--acc-deep); }
article h2 { margin:1.6em 0 .5em; color:var(--acc-deep); padding-bottom:.15em;
  border-bottom:3px solid; border-image:linear-gradient(90deg,var(--acc),var(--acc2)) 1; }
article h3 { color:var(--acc2); }
article a { color:#14639c; }
article a:hover { color:var(--acc2); }
.meta { color:var(--mut); font-size:.85rem; font-family:system-ui,sans-serif; margin-bottom:1.4em; }
article img { max-width:100%; height:auto; border-radius:6px;
  box-shadow:0 2px 10px rgba(31,39,51,.14); }
figure { margin:1.6em 0; text-align:center; }
figcaption { color:var(--mut); font-size:.85rem; margin-top:.5em; font-family:system-ui,sans-serif; }
article .lede { color:#41546b; }

/* code: dark slate blocks, blue inline chips */
pre { background:#243447; color:#dce9f5; padding:16px 18px; overflow:auto;
  border-radius:8px; border-left:4px solid var(--acc2);
  font-size:.85rem; line-height:1.55; }
code { font-family:Consolas,Menlo,'Courier New',monospace; }
pre code { background:none; color:inherit; padding:0; border-radius:0; font-size:inherit; }
article p code, article li code, td code {
  background:var(--chip); color:#0b4f7a; padding:1px 6px; border-radius:5px; font-size:.88em; }

/* tables (older posts carry real HTML tables) */
article table { border-collapse:collapse; margin:1.4em auto; font-size:.95rem; }
article th { background-image:linear-gradient(180deg,#2e7cb5,#1d5f92); color:#fff;
  padding:8px 14px; text-align:left; }
article td { border:1px solid #cfdfeb; padding:7px 14px; }
article tbody tr:nth-child(even) { background:#eef5fb; }

blockquote {
  border-left:4px solid var(--acc2); margin-left:0; padding:10px 18px;
  background-image:linear-gradient(90deg,rgba(14,116,144,.10),rgba(14,116,144,0));
  color:#41546b; border-radius:0 8px 8px 0;
}
hr { border:0; height:2px; margin:2em 0;
  background-image:linear-gradient(90deg,transparent,var(--chip-line),transparent); }

/* archive / home lists */
.post-list { list-style:none; padding:0; }
.post-list li { margin:0 0 14px; }
.post-list a { color:var(--ink); text-decoration:none; font-weight:600; }
.post-list a:hover { color:var(--acc); text-decoration:underline; }
.post-list .d { color:var(--acc-deep); background:var(--chip); border:1px solid var(--chip-line);
  border-radius:6px; padding:1px 8px; font-size:.8rem; margin-right:10px; font-weight:600;
  font-family:system-ui,sans-serif; }
.year { font-size:1.35rem; margin:2em 0 .6em; color:var(--acc-deep); padding-bottom:.2em;
  border-bottom:3px solid; border-image:linear-gradient(90deg,var(--acc),var(--acc2)) 1; }
.more-link { text-align:center; margin-top:2em; }
.more-link a { color:var(--acc); font-weight:600; }

/* comments rescued from WordPress */
.comments { margin-top:2.5em; border-top:1px dashed #c9d8e6; padding-top:1.2em; }
.comment { background:#eaf3fb; border-left:3px solid #2e7cb5; border-radius:8px;
  padding:12px 16px; margin:10px 0; font-size:.95rem; }
.comment .who { font-family:system-ui,sans-serif; font-size:.85rem; color:var(--mut); }

footer.site { text-align:center; color:var(--mut); font-size:.85rem; margin-top:60px;
  font-family:system-ui,sans-serif; padding-top:18px;
  border-top:3px solid; border-image:linear-gradient(90deg,var(--acc),var(--acc2)) 1; }
footer.site a { color:var(--acc); }

.badge { background:var(--chip); color:var(--acc-deep); border:1px solid var(--chip-line);
  border-radius:4px; padding:1px 7px; font-size:.8rem; font-weight:600;
  font-family:system-ui,sans-serif; }
.img-lost { display:inline-block; background:#eef1f5; border:1px dashed #c9c2b4;
  color:var(--mut); border-radius:6px; padding:14px 18px; font-family:system-ui,sans-serif;
  font-size:.9rem; margin:4px 0; }

::selection { background:#bcd9ee; }

@media (max-width:700px) {
  .wrap { max-width:94%; padding:16px 12px 60px; }
  article { padding:24px 20px; }
  h1.site { font-size:1.7rem; }
  nav.top a { margin:0 7px; }
}