.hk-guide-post{
  --guide-accent:#0b63e5;
  --guide-accent-2:#ff8a1f;
  --guide-soft:#f3f7fc;
  --guide-ink:#10213d;
  --guide-muted:#5d6b80;
}
.hk-guide-post .site-main{max-width:1120px;margin-inline:auto}
.hk-guide-post article.type-post{background:#fff;border:1px solid #e3e9f1;border-radius:24px;padding:clamp(22px,4vw,52px);box-shadow:0 18px 55px rgba(16,33,61,.07);overflow:hidden}
.hk-guide-post .entry-header{margin-bottom:22px}
.hk-guide-post .entry-title{font-size:clamp(34px,4.4vw,54px);line-height:1.12;letter-spacing:-.02em;color:var(--guide-ink);margin:12px 0 14px}
.hk-guide-kicker{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.09em;color:var(--guide-muted)}
.hk-guide-kicker span{background:var(--guide-accent);color:#fff;padding:7px 10px;border-radius:999px;font-weight:800}
.hk-guide-kicker b{font-weight:700}
.hk-guide-deck{font-size:clamp(18px,2vw,22px);line-height:1.65;color:var(--guide-muted);max-width:900px;margin:0}
.hk-guide-post .entry-content>.wp-post-image{display:block;width:100%;height:auto;margin:26px 0 34px;border-radius:20px;box-shadow:0 16px 38px rgba(16,33,61,.13)}
.hk-guide-post .entry-content{font-size:17px;line-height:1.82;color:#27364c}
.hk-guide-post .entry-content>p:first-of-type,.hk-guide-answer{background:var(--guide-soft);border-left:5px solid var(--guide-accent);border-radius:14px;padding:20px 22px;font-size:18px;line-height:1.75;margin:0 0 32px}
.hk-guide-post .entry-content h2{font-size:clamp(26px,3vw,34px);line-height:1.28;color:var(--guide-ink);margin:48px 0 16px;padding-top:4px}
.hk-guide-post .entry-content h2:after{content:"";display:block;width:54px;height:4px;border-radius:10px;background:var(--guide-accent);margin-top:10px}
.hk-guide-post .entry-content h3{font-size:22px;color:var(--guide-ink);margin:32px 0 12px}
.hk-guide-post .entry-content a{color:var(--guide-accent);text-decoration-thickness:1px;text-underline-offset:3px}
.hk-guide-post .entry-content ul,.hk-guide-post .entry-content ol{padding-left:1.35em}
.hk-guide-post .entry-content li{margin:.45em 0}
.hk-guide-post .entry-content table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #dfe6ef;border-radius:14px;overflow:hidden;background:#fff}
.hk-guide-post .entry-content th{background:var(--guide-soft);color:var(--guide-ink);font-weight:800}
.hk-guide-post .entry-content th,.hk-guide-post .entry-content td{padding:13px 14px;border-bottom:1px solid #e6ebf2;text-align:left;vertical-align:top}
.hk-guide-post .entry-content tr:last-child td{border-bottom:0}
.hk-guide-figure{margin:34px 0 40px;padding:10px;background:#fff;border:1px solid #dde5ef;border-radius:20px;box-shadow:0 14px 34px rgba(16,33,61,.08)}
.hk-guide-figure img{display:block;width:100%;height:auto;border-radius:14px}
.hk-guide-figure figcaption{font-size:13px;color:var(--guide-muted);padding:10px 8px 2px;line-height:1.55}
.hk-guide-sources{margin:46px 0 10px;padding:22px 24px;border-radius:18px;background:#f7f9fc;border:1px solid #dfe6ef}
.hk-guide-sources h2{margin-top:0!important;font-size:24px!important}.hk-guide-sources ul{margin-bottom:0}
.hk-guide-theme-split-tech{--guide-accent:#0b63e5;--guide-accent-2:#f97316;--guide-soft:#eef6ff}
.hk-guide-theme-blueprint-indigo{--guide-accent:#4361ee;--guide-accent-2:#7c3aed;--guide-soft:#f0f2ff}
.hk-guide-theme-editorial-teal{--guide-accent:#0f9d91;--guide-accent-2:#f0a22e;--guide-soft:#eefaf8}
.hk-guide-theme-data-dark{--guide-accent:#2878d7;--guide-accent-2:#79a514;--guide-soft:#eff5fb}
.hk-guide-theme-industrial-navy{--guide-accent:#173f73;--guide-accent-2:#c85145;--guide-soft:#f1f4f7}
.hk-guide-theme-network-cyan{--guide-accent:#008fc1;--guide-accent-2:#0066cc;--guide-soft:#edf9fd}
.hk-guide-theme-night-vision{--guide-accent:#008f75;--guide-accent-2:#c99122;--guide-soft:#eef8f5}
.hk-guide-theme-outdoor-slate{--guide-accent:#39775d;--guide-accent-2:#c17a27;--guide-soft:#f1f6f2}
.hk-guide-theme-retail-amber{--guide-accent:#cf7d00;--guide-accent-2:#174a7e;--guide-soft:#fff7e9}
.hk-guide-theme-dual-neutral{--guide-accent:#1e66d0;--guide-accent-2:#c43c3c;--guide-soft:#f2f5fa}

@media(max-width:768px){
 .hk-guide-post article.type-post{border-radius:16px;padding:20px 16px;box-shadow:none}
 .hk-guide-post .entry-title{font-size:32px}
 .hk-guide-deck{font-size:17px}
 .hk-guide-post .entry-content>.wp-post-image{margin:20px 0 28px;border-radius:12px}
 .hk-guide-post .entry-content{font-size:16px;line-height:1.75}
 .hk-guide-post .entry-content h2{margin-top:38px;font-size:26px}
 .hk-guide-post .entry-content>div[style*="overflow-x"]{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
 .hk-guide-post .entry-content table{min-width:640px}
 .hk-guide-figure{margin:28px -4px 34px;padding:6px;border-radius:14px}
 .hk-guide-figure img{border-radius:10px}
 .hk-guide-kicker{flex-wrap:wrap}
}


/* TouchFlow article adaptation. Activated only by _hubkub_guide_design=touchflow. */
.hk-guide-design-touchflow{
 --tf-primary:#3B82F6;
 --tf-primary-press:#2563EB;
 --tf-secondary:#F97171;
 --tf-tertiary:#34D399;
 --tf-bg:#FFFFFF;
 --tf-surface:#F9FAFB;
 --tf-divider:#F3F4F6;
 --tf-border:#E5E7EB;
 --tf-text:#111827;
 --tf-muted:#6B7280;
 background:var(--tf-bg);
}
.hk-guide-design-touchflow .site-main{max-width:1120px;margin-inline:auto;padding-inline:18px}
.hk-guide-design-touchflow article.type-post{
 background:transparent;border:0;border-radius:0;padding:30px 0 48px;box-shadow:none;overflow:visible
}
.hk-guide-design-touchflow .entry-header{max-width:980px;margin:0 auto 24px}
.hk-guide-design-touchflow .hk-guide-kicker{gap:12px;color:var(--tf-muted);font-size:12px;letter-spacing:.08em}
.hk-guide-design-touchflow .hk-guide-kicker span{
 min-height:36px;display:inline-flex;align-items:center;padding:6px 14px;
 background:var(--tf-primary);border-radius:9999px;box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.hk-guide-design-touchflow .entry-title{
 color:var(--tf-text);font-size:clamp(38px,4vw,50px);line-height:1.16;letter-spacing:-.018em;
 margin:18px 0 12px
}
.hk-guide-design-touchflow .hk-guide-deck{
 color:var(--tf-muted);font-size:17px;line-height:1.6;max-width:860px;margin:0
}
.hk-guide-design-touchflow .entry-content{max-width:980px;margin-inline:auto;color:#374151;font-size:17px;line-height:1.72}
.hk-guide-design-touchflow .entry-content>.wp-post-image{
 width:100%;margin:24px 0 36px;border-radius:24px;
 box-shadow:0 4px 12px rgba(0,0,0,.08)
}
.hk-guide-design-touchflow .entry-content>p:first-of-type,
.hk-guide-design-touchflow .hk-guide-answer{
 background:var(--tf-surface);border:0;border-left:4px solid var(--tf-primary);
 border-radius:16px;padding:18px 20px;margin:0 0 36px;
 box-shadow:0 1px 3px rgba(0,0,0,.06);font-size:17px;line-height:1.65
}
.hk-guide-design-touchflow .entry-content h2{
 color:var(--tf-text);font-size:clamp(24px,2.7vw,32px);line-height:1.3;
 margin:48px 0 18px;padding:0
}
.hk-guide-design-touchflow .entry-content h2:after{
 width:48px;height:4px;margin-top:12px;background:var(--tf-secondary);border-radius:9999px
}
.hk-guide-design-touchflow .entry-content h3{color:var(--tf-text);font-size:20px;line-height:1.4;margin:30px 0 12px}
.hk-guide-design-touchflow .entry-content a{color:var(--tf-primary);text-underline-offset:4px}
.hk-guide-design-touchflow .entry-content li{margin:6px 0}
.hk-guide-design-touchflow .entry-content>div[style*="overflow-x"]{
 margin:24px 0 36px;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.hk-guide-design-touchflow .entry-content table{border:1px solid var(--tf-border);border-radius:16px;background:#fff}
.hk-guide-design-touchflow .entry-content th{background:#EFF6FF;color:var(--tf-text)}
.hk-guide-design-touchflow .entry-content th,
.hk-guide-design-touchflow .entry-content td{padding:14px 18px;border-bottom:1px solid var(--tf-divider)}
.hk-guide-design-touchflow .hk-guide-figure{
 margin:36px 0;padding:18px;background:var(--tf-surface);border:0;border-radius:24px;
 box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.hk-guide-design-touchflow .hk-guide-figure img{border-radius:16px}
.hk-guide-design-touchflow .hk-guide-figure figcaption{
 color:var(--tf-muted);font-size:13px;line-height:1.55;padding:12px 6px 0
}
.hk-guide-design-touchflow .hk-guide-sources{
 margin:48px 0 0;padding:18px 20px;border:0;border-radius:16px;background:var(--tf-surface);
 box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.hk-guide-design-touchflow .hk-guide-sources h2{font-size:24px!important;margin:0 0 12px!important}
.hk-guide-design-touchflow .hk-guide-sources h2:after{background:var(--tf-tertiary)}
.hk-guide-design-touchflow .hk-guide-sources li{min-height:52px;padding:12px 0;border-bottom:1px solid var(--tf-divider)}
.hk-guide-design-touchflow .hk-guide-sources li:last-child{border-bottom:0}
.hk-guide-design-touchflow .hk-guide-sources a{display:inline-flex;align-items:center;min-height:44px}

@media(max-width:768px){
 .hk-guide-design-touchflow .site-main{padding-inline:18px}
 .hk-guide-design-touchflow article.type-post{padding:24px 0 42px}
 .hk-guide-design-touchflow .entry-title{font-size:32px;line-height:1.25;margin-top:12px}
 .hk-guide-design-touchflow .hk-guide-deck{font-size:17px;line-height:1.55}
 .hk-guide-design-touchflow .entry-content{font-size:16px;line-height:1.68}
 .hk-guide-design-touchflow .entry-content>.wp-post-image{margin:18px 0 30px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
 .hk-guide-design-touchflow .entry-content>p:first-of-type,.hk-guide-design-touchflow .hk-guide-answer{padding:18px;border-radius:16px;margin-bottom:30px}
 .hk-guide-design-touchflow .entry-content h2{font-size:24px;margin-top:36px}
 .hk-guide-design-touchflow .entry-content>div[style*="overflow-x"]{margin:18px -2px 30px}
 .hk-guide-design-touchflow .hk-guide-figure{margin:30px 0;padding:12px;border-radius:16px}
 .hk-guide-design-touchflow .hk-guide-figure img{border-radius:12px}
 .hk-guide-design-touchflow .hk-guide-sources{padding:18px;border-radius:16px}
}

/* TouchFlow body typography โ€” owner approved 2026-10-02. */
.hk-guide-design-touchflow .entry-content,
.hk-guide-design-touchflow .hk-guide-deck,
.hk-guide-design-touchflow .hk-guide-kicker{
  font-family:"Bai Jamjuree","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;
}


/* TouchFlow per-guide theme rotation โ€” owner approved rollout 2026-10-02.
   The first approved split-tech guide keeps the canonical TouchFlow palette.
   Remaining guides retain their persisted visual themes without changing layout. */
.hk-guide-design-touchflow.hk-guide-theme-blueprint-indigo{--tf-primary:#4361ee;--tf-secondary:#7c3aed;--tf-tertiary:#34d399;--tf-surface:#f0f2ff}
.hk-guide-design-touchflow.hk-guide-theme-editorial-teal{--tf-primary:#0f9d91;--tf-secondary:#f0a22e;--tf-tertiary:#34d399;--tf-surface:#eefaf8}
.hk-guide-design-touchflow.hk-guide-theme-data-dark{--tf-primary:#2878d7;--tf-secondary:#79a514;--tf-tertiary:#34d399;--tf-surface:#eff5fb}
.hk-guide-design-touchflow.hk-guide-theme-industrial-navy{--tf-primary:#173f73;--tf-secondary:#c85145;--tf-tertiary:#34d399;--tf-surface:#f1f4f7}
.hk-guide-design-touchflow.hk-guide-theme-network-cyan{--tf-primary:#008fc1;--tf-secondary:#0066cc;--tf-tertiary:#34d399;--tf-surface:#edf9fd}
.hk-guide-design-touchflow.hk-guide-theme-night-vision{--tf-primary:#008f75;--tf-secondary:#c99122;--tf-tertiary:#34d399;--tf-surface:#eef8f5}
.hk-guide-design-touchflow.hk-guide-theme-outdoor-slate{--tf-primary:#39775d;--tf-secondary:#c17a27;--tf-tertiary:#34d399;--tf-surface:#f1f6f2}
.hk-guide-design-touchflow.hk-guide-theme-retail-amber{--tf-primary:#cf7d00;--tf-secondary:#174a7e;--tf-tertiary:#34d399;--tf-surface:#fff7e9}
.hk-guide-design-touchflow.hk-guide-theme-dual-neutral{--tf-primary:#1e66d0;--tf-secondary:#c43c3c;--tf-tertiary:#34d399;--tf-surface:#f2f5fa}