/*
  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;
  white-space:pre-wrap; overflow-wrap:anywhere; }
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; }
  /* six nav links no longer fit one line: let the pill wrap instead of
     pushing a horizontal scrollbar onto the page */
  nav.top { display:flex; flex-wrap:wrap; justify-content:center;
    padding:8px 14px; border-radius:18px; }
  nav.top a { margin:2px 8px; font-size:.95rem; }
}

/* ---------- colorful home page + about page ---------- */

.section-title { font-size:1.5rem; margin:2.4em 0 .9em; color:var(--acc-deep);
  padding-bottom:.2em; border-bottom:3px solid;
  border-image:linear-gradient(90deg,var(--acc),var(--acc2)) 1; }
.home-latest .section-title { margin-top:0; }

/* hero: colored panel with a faint grid, like a product landing page */
.hero { position:relative; overflow:hidden; margin:0 0 30px; padding:38px 40px 34px;
  border-radius:18px; color:#fff;
  background-image:
    radial-gradient(720px 320px at 10% -10%, rgba(236,72,153,.55), transparent 62%),
    radial-gradient(660px 300px at 90% 4%, rgba(34,211,238,.45), transparent 60%),
    linear-gradient(135deg,#16285f 0%,#3b2a86 46%,#0d5c72 100%);
  box-shadow:0 10px 30px rgba(22,40,95,.34); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 76%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 76%); }
.hero > * { position:relative; z-index:1; }
.hero-kicker { margin:0; color:#a5f3fc; font:600 .78rem/1 system-ui,sans-serif;
  letter-spacing:.18em; text-transform:uppercase; }
.hero-title { margin:.55rem 0 .6rem; font-size:2.05rem; line-height:1.24; color:#fff; }
.hero-sub { margin:0 0 1.5rem; max-width:48rem; font-size:1.05rem; color:#dbeafe; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 1.3rem; }
.btn { display:inline-block; padding:9px 18px; border-radius:999px; color:#fff;
  border:1px solid rgba(255,255,255,.55); font:600 .95rem/1 system-ui,sans-serif;
  text-decoration:none; transition:transform .12s ease, background .12s ease; }
.btn:hover { transform:translateY(-1px); }
.btn.solid { background-image:linear-gradient(135deg,#22d3ee,#6f42c1);
  border-color:transparent; color:#081a2b; }
.btn.light { background:#fff; border-color:transparent; color:#16285f; }
.btn.ghost:hover { background:rgba(255,255,255,.18); }
.chips { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.chips li { padding:6px 12px; border-radius:999px; color:#e0f2fe;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  font:600 .78rem/1 system-ui,sans-serif; letter-spacing:.02em; }

/* recent posts as a colorful card grid (scoped: the archive keeps its list) */
.home-latest .post-list { display:grid; gap:16px; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); }
.home-latest .post-list li { position:relative; overflow:hidden; margin:0; padding:20px 20px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 3px 14px rgba(29,111,165,.12);
  transition:transform .14s ease, box-shadow .14s ease; }
.home-latest .post-list li::before { content:""; position:absolute; left:0; right:0; top:0;
  height:5px; background-image:linear-gradient(90deg,var(--c1),var(--c2)); }
.home-latest .post-list li:nth-child(5n+1) { --c1:#1d6fa5; --c2:#22d3ee; }
.home-latest .post-list li:nth-child(5n+2) { --c1:#6f42c1; --c2:#ec4899; }
.home-latest .post-list li:nth-child(5n+3) { --c1:#0e7490; --c2:#4ade80; }
.home-latest .post-list li:nth-child(5n+4) { --c1:#d97706; --c2:#fbbf24; }
.home-latest .post-list li:nth-child(5n+5) { --c1:#be123c; --c2:#fb7185; }
.home-latest .post-list li:hover { transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(29,111,165,.20); }
.home-latest .post-list .d { display:inline-block; margin:0 0 10px; }
.home-latest .post-list a { display:block; font-size:1.06rem; line-height:1.45; color:var(--ink); }
.home-latest .post-list a:hover { color:var(--acc-deep); }

/* category cards */
.topic-grid { display:grid; gap:16px; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); }
.topic-grid a { display:block; height:100%; padding:16px 18px; color:inherit;
  background:var(--card); border:1px solid var(--line); border-left:5px solid var(--c1);
  border-radius:12px; box-shadow:0 3px 12px rgba(29,111,165,.10); text-decoration:none;
  transition:transform .14s ease, box-shadow .14s ease; }
.topic-grid a:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(29,111,165,.18); }
.topic-grid strong { display:block; margin-bottom:4px; color:var(--acc-deep); font-size:1.02rem; }
.topic-grid span { display:block; color:var(--mut); font:.85rem/1.5 system-ui,sans-serif; }

/* the home page series row: one sideways-scrolling line, so the page does not
   get taller every time a series is published. It keeps the .topic-grid card
   styling above and only changes the layout and the overflow. */
/* the padding is not cosmetic: overflow-x:auto clips vertically too, so the
   cards need room for their shadow and the 3px hover lift */
.series-scroll { display:flex; flex-wrap:nowrap; gap:14px; overflow-x:auto;
  padding:8px 4px 16px; scroll-snap-type:x proximity; scrollbar-width:thin;
  scrollbar-color:var(--chip-line) transparent;
  /* The fade that says "there is more to the right". A mask rather than a
     coloured overlay, because the page background is a vertical gradient so
     there is no single colour to fade into. site_chrome.SHIM adds .at-end once
     the row reaches its end and drops the fade: a mask keeps fading whatever
     sits under it, so without that the last card would end up half washed out. */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent); }
.series-scroll.at-end { -webkit-mask-image:none; mask-image:none; }
.series-scroll > li { flex:0 0 auto; width:min(260px,78vw); scroll-snap-align:start; }
/* the row is focusable, so a keyboard user can scroll it with the arrow keys */
.series-scroll:focus-visible { outline:2px solid var(--acc); outline-offset:3px;
  border-radius:12px; }
.series-scroll::-webkit-scrollbar { height:8px; }
.series-scroll::-webkit-scrollbar-thumb { background:var(--chip-line); border-radius:99px; }
.series-scroll::-webkit-scrollbar-track { background:transparent; }
.t-blue { --c1:#1d6fa5; --c2:#22d3ee; }
.t-violet { --c1:#6f42c1; --c2:#ec4899; }
.t-teal { --c1:#0e7490; --c2:#4ade80; }
.t-amber { --c1:#d97706; --c2:#fbbf24; }
.t-rose { --c1:#be123c; --c2:#fb7185; }
.t-green { --c1:#15803d; --c2:#a3e635; }

/* card grid, reused by the About page project cards */
.card-grid { display:grid; gap:16px; list-style:none; margin:1.4em 0; padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); }
.card-grid > li { position:relative; overflow:hidden; padding:20px 20px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 3px 14px rgba(29,111,165,.12); }
.card-grid > li::before { content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background-image:linear-gradient(90deg,var(--c1,#1d6fa5),var(--c2,#22d3ee)); }
.card-grid h3 { margin:.1em 0 .4em; font-size:1.08rem; color:var(--acc-deep); }
.card-grid h3 a { text-decoration:none; }
.card-grid p { margin:0 0 .6em; font-size:.96rem; }
.card-grid .tag { display:block; color:var(--mut); font:.8rem/1.4 system-ui,sans-serif; }

/* series banner under the title of a post that is part of a series */
.series-back { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin:.1em 0 1.7em; padding:10px 14px; border-radius:10px;
  border:1px solid var(--chip-line); border-left:4px solid var(--acc);
  background-image:linear-gradient(90deg,rgba(29,111,165,.12),rgba(14,116,144,.05));
  color:#41546b; font:.9rem/1.5 system-ui,sans-serif; }
.series-back .part { padding:2px 9px; border-radius:6px; color:#fff;
  background-image:linear-gradient(135deg,var(--acc),var(--acc2));
  font:600 .78rem/1.5 system-ui,sans-serif; white-space:nowrap; }
.series-back a { color:var(--acc-deep); font-weight:600; }

/* previous/next part links under that banner */
.series-nav { display:flex; flex-wrap:wrap; gap:10px; margin:-1.1em 0 1.7em; }
.series-nav a { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); text-decoration:none; }
.series-nav a:hover { border-color:var(--acc); box-shadow:0 3px 14px rgba(29,111,165,.14); }
.series-nav a.next { margin-left:auto; text-align:right; align-items:flex-end; }
.series-nav .dir { color:var(--acc-deep); font:600 .78rem/1.5 system-ui,sans-serif;
  white-space:nowrap; }
.series-nav .t { font:.95rem/1.4 Georgia,"Iowan Old Style",serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* series pages: the ordered list of parts */
.part-list { list-style:none; padding:0; margin:1.2em 0 0; }
.part-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  padding:10px 0; border-bottom:1px solid var(--line); }
.part-list li:last-child { border-bottom:0; }
.part-list .part { flex:0 0 auto; padding:2px 9px; border-radius:6px; color:#fff;
  background-image:linear-gradient(135deg,var(--acc),var(--acc2));
  font:600 .78rem/1.5 system-ui,sans-serif; white-space:nowrap; }
.part-list a { flex:1 1 60%; color:var(--ink); font-weight:600; text-decoration:none; }
.part-list a:hover { color:var(--acc); text-decoration:underline; }
.part-list .d { flex:0 0 auto; padding:1px 8px; border-radius:6px; color:var(--acc-deep);
  background:var(--chip); border:1px solid var(--chip-line);
  font:600 .78rem/1.5 system-ui,sans-serif; }
.series-cross { margin-top:1.8em; padding-top:1em; border-top:1px dashed #c9d8e6;
  color:var(--mut); font:.88rem/1.7 system-ui,sans-serif; }
/* the "subscribe to this series" line on a series page */
.series-feed { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  margin:.5em 0 0; color:var(--mut); font:.9rem/1.6 system-ui,sans-serif; }
.series-feed a { color:var(--acc-deep); font-weight:600; }

/* buttons that sit on the white article surface (About page) */
.btn-line { display:inline-block; margin:0 8px 8px 0; padding:8px 16px; border-radius:999px;
  background:var(--chip); border:1px solid var(--chip-line); color:var(--acc-deep);
  font:600 .92rem/1 system-ui,sans-serif; text-decoration:none; }
.btn-line:hover { background:#cfe3f6; color:#0b4f7a; }
.about-links { margin:1.4em 0 .4em; }

/* light chips for the About page focus list */
ul.stack { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:1.1em 0; padding:0; }
ul.stack li { padding:5px 12px; border-radius:999px; background:var(--chip);
  border:1px solid var(--chip-line); color:var(--acc-deep);
  font:600 .82rem/1 system-ui,sans-serif; }

@media (max-width:700px) {
  .hero { padding:26px 20px 24px; border-radius:14px; }
  .hero-title { font-size:1.6rem; }
  .hero-sub { font-size:1rem; }
}

/* ---------- contact form ---------- */

.contact-panel {
  margin-top: 20px;
  padding: 20px;
  background: #F6F6FB;
  border: 1px solid #D8D8EC;
  border-radius: 8px;
}

.contact-panel h2 { margin-top: 0; }

.contact-form .form-row { margin: 0 0 14px; }

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  max-width: 560px;
  padding: 8px 10px;
  font: inherit;
  border: 1px solid #D8D8EC;
  border-radius: 4px;
  background: #fff;
}

.contact-form textarea { resize: vertical; }

.contact-form .hint { color: #586091; font-weight: normal; }

.contact-form button {
  padding: 9px 18px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #180068;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.contact-form button:hover { background: #8838A8; }

.contact-form button[disabled] { opacity: 0.6; cursor: wait; }

.hp-field {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}