/* ========================================================
   HIGH-END TYPOGRAPHY & PIXEL-PERFECT POLISH (LIGHT MODE)
   ======================================================== */
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Lexend:wght@600;700;800&family=Manrope:wght@600;700;800;900&family=Merriweather:ital,wght@0,400;0,700;0,900;1,400&family=Montserrat:wght@600;700;800;900&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400&family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Space+Grotesk:wght@500;600;700&family=Syne:wght@700;800&family=Urbanist:wght@600;700;800&family=Work+Sans:wght@400;500;600;700&display=swap');

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px;
  line-height: 1.65;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .brand, .section-bar strong {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.03em;
}

/* Serif Overrides for Paper & Premium Layouts */
.layout-paper .brand, .layout-paper h1, .layout-paper h2, .layout-paper h3,
.layout-paper .paper-card h3, .layout-paper .paper-headline h1,
.layout-premium h1, .layout-premium h2, .layout-premium h3,
.layout-premium .bms-feed-card h3 {
  font-family: 'Newsreader', Georgia, serif !important;
}

/* Monospace Overrides for Engineering Metrics */
.specs-grid strong, .wire-stats strong, .wire-time, .wire-clock,
.bms-grid strong, .paper-doi, .airflow-item strong, .eco-stats strong,
.bench-meter strong, .tech-spec-row strong {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* Category Navigation Polish */
.category-nav {
  gap: 24px;
}
.category-nav > a {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  padding: 13px 4px;
  border-bottom: 2px solid transparent;
  text-transform: capitalize;
  transition: all .15s ease;
}
.category-nav > a:hover {
  color: var(--accent);
}
.category-nav > a.active, .category-nav > a:first-child {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Uniform Card Clamping & Alignment */
.hero-caption h1 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-caption p, .hero-side-copy p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-side h2, .compact-copy h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.35;
}
.air-item-card h3, .paper-card h3, .tech-feed-card h3,
.clean-feed-item h3, .eco-case-card h3, .bms-feed-card h3,
.course-module-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  font-size: 17px;
  line-height: 1.35;
}
.air-item-card p, .paper-card p, .tech-feed-card p,
.clean-feed-item p, .eco-case-card p, .bms-feed-card p,
.course-module-card p, .wire-content p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

/* Subtle Cards Lift Effect (No Gradients) */
.air-item-card, .course-module-card, .tech-feed-card,
.clean-feed-item, .eco-case-card, .bms-feed-card,
.hero-main, .hero-side, .zone-box, .protocol-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform .2s ease, box-shadow .2s ease;
}
.air-item-card:hover, .course-module-card:hover, .tech-feed-card:hover,
.clean-feed-item:hover, .eco-case-card:hover, .bms-feed-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* Clean Floating Demo Navigator */
.demo-floating {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 99px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 5px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  color: #f1f5f9;
  opacity: 0.92;
}
.demo-floating span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0 6px;
}
.demo-floating a {
  background: #1e293b;
  color: #cbd5e1;
  padding: 5px 10px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  transition: all .15s;
}
.demo-floating a:hover {
  background: var(--accent);
  color: white;
}

:root{--accent:#1260cd;--ink:#091c3c;--text:#15243a;--muted:#66768b;--line:#e4e9ef;--surface:#f5f7fa;--bg:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 'DM Sans',Arial,sans-serif}a{text-decoration:none;color:inherit}a:hover{color:var(--accent)}button,input{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}h1,h2,h3,p,figure{margin:0}svg{flex:none;vertical-align:middle}.container{width:min(1210px,calc(100% - 44px));margin:auto}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}.microbar{background:var(--ink);color:#cbd6e3;font-size:10px;letter-spacing:.03em}.micro-inner{min-height:30px;display:flex;align-items:center;justify-content:space-between;gap:10px}.micro-links{display:flex;gap:17px}.masthead{background:#fff}.mast-inner{display:flex;align-items:center;justify-content:space-between;min-height:98px;gap:15px}.mast-left{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.brand-mark{background:var(--accent);color:white;width:34px;height:36px;border-radius:4px;font-size:20px;font-weight:900;letter-spacing:-7px;padding-left:7px;padding-right:11px;display:flex;align-items:center}.brand{font:900 clamp(25px,3vw,36px)/1 'Manrope',Arial,sans-serif;letter-spacing:-.08em;color:var(--ink);white-space:nowrap}.brand span{color:var(--accent)}.brand-caption{display:block;width:100%;padding-left:44px;font-weight:800;font-size:9px;color:#8692a2;letter-spacing:.18em;margin-top:-4px;text-transform:uppercase}.mast-right{display:flex;align-items:center;gap:11px;font-size:11px;color:#7e8a9a}.mast-right>span{margin-right:8px}.circle-action{border:1px solid #dce3eb;background:white;color:var(--ink);border-radius:50%;width:39px;height:39px;display:grid;place-items:center}.mobile-only{display:none}.nav-shell{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:white}.category-nav{display:flex;align-items:stretch;gap:29px;min-height:50px;overflow-x:auto;scrollbar-width:none}.category-nav>a{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:12px;font-weight:800;border-bottom:3px solid transparent;padding-top:3px}.category-nav>a:first-child{border-color:var(--accent);color:var(--accent)}.category-nav .nav-more{margin-left:auto;color:#79889a;font-size:11px}.search-drawer{border-bottom:1px solid var(--line);background:#f6f9fc;padding:24px 0}.search-drawer[hidden]{display:none}.search-form label{display:block;font-size:12px;font-weight:800;margin-bottom:9px}.search-form>div{display:flex;gap:8px}.search-form input{flex:1;min-width:0;border:1px solid #dce3ed;border-radius:5px;padding:13px}.search-form button,.archive-search button{border:0;background:var(--accent);color:white;border-radius:5px;padding:0 17px;display:flex;gap:8px;align-items:center;font-size:12px;font-weight:800}.news-ticker{background:#f5f7fb;border-bottom:1px solid var(--line)}.ticker-row{display:flex;align-items:center;gap:17px;min-height:45px}.ticker-label{background:var(--accent);color:white;padding:7px 9px;border-radius:3px;white-space:nowrap;font-size:9px;letter-spacing:.07em;font-weight:900}.ticker-text{display:flex;gap:30px;flex:1;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(to right,black 90%,transparent)}.ticker-text a{font-size:11px;font-weight:700;flex:none}.ticker-text a:before{content:'•';color:var(--accent);margin-right:8px}.ticker-all{font-size:11px;color:var(--accent);font-weight:800;white-space:nowrap}.editorial-intro{display:flex;justify-content:space-between;align-items:end;gap:15px;padding:28px 0 14px}.editorial-intro h2{font-size:14px;margin-top:5px;font-weight:700;color:#2c3c54}.editorial-intro>span{font-size:10px;color:#8c98a6}.intro-overline{font-size:10px;color:var(--accent);font-weight:900;letter-spacing:.13em;text-transform:uppercase}.section-bar{min-height:47px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.section-bar>div{display:flex;align-items:center;gap:12px}.section-bar strong{font:900 18px/1.25 'Manrope',Arial,sans-serif;letter-spacing:-.05em;color:var(--ink)}.section-tag{font-size:10px;color:#8896a6}.section-bar>a{font-size:11px;white-space:nowrap;font-weight:800;color:var(--accent)}.red-dot{background:#f3493e;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 3px #fce6e4}.hero-grid{display:grid;grid-template-columns:minmax(0,1.77fr) minmax(0,1fr);gap:21px}.hero-main{min-width:0}.hero-photo{display:block;aspect-ratio:1.77;background:#eaf0f4;overflow:hidden;border-radius:6px}.hero-photo img,.hero-side-photo img,.news-visual img,.compact-photo img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.hero-photo:hover img,.hero-side-photo:hover img,.news-visual:hover img,.compact-photo:hover img{transform:scale(1.03)}.hero-caption{padding-top:17px}.pill-label,.kicker{font-size:10px;color:var(--accent);font-weight:900;letter-spacing:.04em;text-transform:uppercase}.pill-label{font-size:9px;letter-spacing:.12em}.hero-caption h1{font:900 clamp(26px,2.8vw,38px)/1.17 'Manrope',Arial,sans-serif;letter-spacing:-.06em;margin:9px 0;color:#12223b}.hero-caption p{font-size:13px;line-height:1.75;color:var(--muted)}.hero-meta{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:10px;color:#8491a1}.hero-meta span:first-child{color:var(--accent);font-weight:800}.hero-meta i{background:#aab6c2;width:3px;height:3px;border-radius:50%}.hero-rail{display:grid;grid-template-rows:1fr 1fr;gap:19px}.hero-side{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:13px;min-height:0}.hero-side-photo{display:block;overflow:hidden;border-radius:6px;background:#e8eef3;height:56%;min-height:110px}.hero-side-copy{padding-top:10px}.hero-side h2{font:800 clamp(15px,1.3vw,18px)/1.3 'Manrope',Arial,sans-serif;letter-spacing:-.035em;margin:5px 0 7px}.byline{font-size:10px;color:#8b98a7}.topic-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:23px 0}.topic-list span{font-size:10px;font-weight:900;margin-right:7px}.topic-list a{border:1px solid #e0e7ed;background:#f9fafc;color:#556a7e;border-radius:4px;padding:7px 11px;font-size:10px;font-weight:700}.below-grid{display:grid;grid-template-columns:minmax(0,1.78fr) minmax(290px,1fr);gap:40px;padding:30px 0 63px}.section-bar.lower{margin-bottom:0}.compact-item{display:grid;grid-template-columns:205px 1fr;gap:20px;border-bottom:1px solid var(--line);padding:21px 0}.compact-photo{display:block;background:#ebf0f4;aspect-ratio:1.52;overflow:hidden;border-radius:5px}.compact-copy{padding-top:4px}.compact-copy h3{font:800 20px/1.35 'Manrope',Arial,sans-serif;letter-spacing:-.043em;margin:7px 0 10px}.more-button{border:1px solid #cbd6e3;background:white;color:var(--ink);padding:12px 17px;margin-top:22px;font-size:12px;font-weight:800;border-radius:5px}.more-button:hover{color:var(--accent);border-color:var(--accent)}.sidebar .side-box{background:white;border:1px solid #e1e7ed;border-radius:5px;padding:23px;margin-bottom:20px}.side-box h2{font:900 17px/1.25 'Manrope',sans-serif;letter-spacing:-.05em;margin-bottom:18px}.accent-line{display:inline-block;background:var(--accent);height:19px;width:4px;vertical-align:middle;margin-right:7px}.ranking{list-style:none;padding:0;margin:0}.ranking li{border-bottom:1px solid var(--line);padding:13px 0;display:grid;grid-template-columns:34px 1fr;gap:9px}.ranking li:last-child{border-bottom:0}.ranking li>span{font:900 22px/1 'Manrope',Arial,sans-serif;color:var(--accent);letter-spacing:-.06em}.ranking a{font-size:13px;font-weight:800;line-height:1.45;display:block}.ranking small{display:block;font-size:10px;color:#8b97a4;margin-top:6px}.newsletter{background:#eef4fe;border-radius:5px;padding:25px;margin:22px 0;color:#1c3961}.news-icon{font-size:18px;display:grid;place-items:center;background:#d9e8ff;border-radius:50%;width:38px;height:38px;margin-bottom:15px}.newsletter small{font-size:9px;font-weight:900;letter-spacing:.09em;color:var(--accent)}.newsletter h2{font:900 23px/1.17 'Manrope',Arial,sans-serif;letter-spacing:-.05em;margin:9px 0}.newsletter p{color:#647792;font-size:12px;margin-bottom:17px}.newsletter-form{display:flex}.newsletter-form input{min-width:0;flex:1;border:1px solid #d3deec;border-radius:5px 0 0 5px;padding:10px;font-size:11px}.newsletter-form button{border:0;background:var(--accent);color:white;border-radius:0 5px 5px 0;padding:0 11px;font-size:11px;font-weight:800;white-space:nowrap}.newsletter .form-note{display:block;font-size:9px;letter-spacing:0;font-weight:500;color:#6a7e96;margin-top:11px}.links a{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:12px;font-weight:800}.links svg{width:13px}.feature-band{padding:43px 0 65px;background:#f5f7fa;border-top:1px solid var(--line)}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:21px;margin-top:22px}.news-card{overflow:hidden;border-radius:6px;background:white;border:1px solid var(--line)}.news-visual{display:block;aspect-ratio:1.62;background:#eaf0f4;overflow:hidden}.card-body{padding:18px}.news-card h3{font:800 18px/1.36 'Manrope',Arial,sans-serif;letter-spacing:-.045em;margin:7px 0}.news-card p{color:#7b899b;font-size:11px;line-height:1.65;margin-bottom:10px}.site-footer{background:var(--ink);color:#e4eefa;padding:54px 0 26px}.footer-cols{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:67px}.brand-foot{color:white;font-size:27px}.brand-foot span{color:#9ecaff}.footer-cols p{font-size:12px;line-height:1.85;color:#b8c9db;max-width:390px;margin:16px 0}.footer-cols small{font-size:10px;color:#92aac0}.footer-cols>div:not(:first-child){display:flex;flex-direction:column;align-items:start;gap:10px}.footer-cols b{margin-bottom:8px;font-size:12px}.footer-cols a:not(.brand){font-size:11px;color:#bed0df}.footer-bottom{border-top:1px solid #ffffff30;margin-top:45px;padding-top:17px;display:flex;justify-content:space-between;font-size:10px;color:#9eb2c6}.demo-floating{position:fixed;bottom:17px;left:50%;transform:translateX(-50%);z-index:20;background:#13223a;border:1px solid #32455f;border-radius:99px;display:flex;gap:4px;align-items:center;padding:6px 12px;box-shadow:0 10px 35px #0003;color:#e3ebf4}.demo-floating span{font-size:9px;font-weight:900;padding:0 7px}.demo-floating a{border-radius:30px;background:#263952;color:white;padding:7px 10px;font-size:11px;font-weight:800}
/* Article */.breadcrumb{display:flex;gap:10px;padding:23px 0;color:#8090a0;font-size:11px}.article-grid{display:grid;grid-template-columns:minmax(0,790px) minmax(270px,1fr);gap:45px;padding:14px 0 65px}.story h1{font:900 clamp(35px,3.7vw,52px)/1.15 'Manrope',Arial,sans-serif;letter-spacing:-.065em;margin:12px 0 17px}.article-deck{font-size:17px;color:#607187;line-height:1.7}.article-author{display:flex;gap:12px;align-items:center;border-block:1px solid var(--line);padding:16px 0;margin:25px 0 19px}.avatar{width:42px;height:42px;border-radius:50%;background:var(--accent);color:white;display:grid;place-items:center;font-size:20px;font-weight:900}.article-author>div:nth-child(2){display:flex;flex-direction:column;gap:3px}.article-author strong{font-size:11px}.article-author span{font-size:10px;color:#8b98a6}.article-actions{margin-left:auto;display:flex;gap:5px}.article-actions button{border:1px solid #dce3ec;background:white;color:var(--ink);padding:9px 10px;border-radius:4px;display:flex;gap:6px;align-items:center;font-size:10px;font-weight:800}.article-actions button.active{color:var(--accent);border-color:var(--accent)}.story-image img{width:100%;aspect-ratio:1.8;object-fit:cover;background:#e8eff5;border-radius:5px}.story-image figcaption{font-size:10px;color:#8795a3;margin-top:8px}.reading-controls{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin:27px 0 22px;color:#7f90a2;font-size:11px}.reading-controls button{border:1px solid #d6e0e9;background:white;border-radius:3px;padding:4px 9px;font-weight:800}.reading-time{margin-left:auto}.article-copy{font-size:17px;line-height:1.96;color:#2b394d}.article-copy p{margin:0 0 21px}.article-copy h2{font:900 24px/1.3 'Manrope',Arial,sans-serif;letter-spacing:-.04em;margin:32px 0 17px}.lead-paragraph:first-letter{float:left;color:var(--accent);font-size:48px;line-height:1;font-weight:900;padding-right:5px}.editor-note{border-left:4px solid var(--accent);background:#eef4fb;padding:20px;margin:24px 0}.editor-note strong{font-size:13px}.editor-note p{font-size:13px;line-height:1.75;margin:8px 0 0}.article-end{border-top:1px solid var(--line);padding:17px 0;margin-top:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.article-end span{font-size:10px;font-weight:900;margin-right:10px}.article-end a{border:1px solid #dce4ed;border-radius:3px;padding:5px 9px;font-size:11px}.related{padding-bottom:68px}
/* Archives */.archive-page{padding-bottom:73px}.archive-head{padding:32px;background:#f3f7fb;border-radius:6px}.archive-head h1{font:900 clamp(34px,4vw,51px)/1.13 'Manrope',sans-serif;letter-spacing:-.06em;margin:9px 0}.archive-head p{font-size:13px;color:#657587}.archive-search{display:flex;gap:8px;max-width:620px;margin-top:22px}.archive-search input{flex:1;min-width:0;padding:12px 15px;border:1px solid #dce4ec;border-radius:5px}.archive-body{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(275px,1fr);gap:40px;margin-top:32px}.archive-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:21px}.archive-cats a{font-size:11px;font-weight:700;padding:7px 11px;border:1px solid #e0e7ed;border-radius:4px}.archive-cats a.active,.archive-cats a:hover{background:var(--accent);border-color:var(--accent);color:white}.archive-main .search-item[hidden]{display:none}.archive-main .compact-item{grid-template-columns:200px 1fr}#archive-empty{padding:45px;text-align:center}#archive-empty h2{margin-bottom:7px}#archive-empty p{color:#8794a2;margin-bottom:13px}.about-page{max-width:900px;padding-bottom:120px}.about-page h1{font:900 clamp(38px,5vw,66px)/1.12 'Manrope',sans-serif;letter-spacing:-.065em;margin:18px 0 24px}.about-page>p{font-size:17px;line-height:1.85;color:#56697f;margin-bottom:18px}.inline-link{display:inline-block}
/* Alternative editorial systems */
.layout-tech{--bg:#f8fbfe}.layout-tech .hero-grid{grid-template-columns:1.5fr 1fr;gap:14px}.layout-tech .hero-main,.layout-tech .hero-side{border:1px solid #dce9f0;background:white;border-radius:8px;padding:11px}.layout-tech .hero-caption{padding:13px 9px}.layout-tech .section-bar{border-color:var(--accent)}.layout-tech .feature-band{background:#edf5fa}
.layout-industrial .masthead{background:var(--ink)}.layout-industrial .brand{color:white;font-style:italic}.layout-industrial .brand span{color:#ffad91}.layout-industrial .brand-caption{color:#b1bdcc}.layout-industrial .circle-action{background:#ffffff15;color:white;border-color:#ffffff44}.layout-industrial .hero-photo,.layout-industrial .hero-side-photo{border-radius:0}.layout-industrial .hero-caption h1,.layout-industrial .section-bar strong{text-transform:uppercase}.layout-industrial .section-bar{border-bottom-width:4px}.layout-industrial .pill-label{background:var(--accent);color:white;padding:5px}
.layout-paper{--bg:#fcfaf6}.layout-paper .mast-inner{justify-content:center;min-height:127px}.layout-paper .mast-left{flex-direction:column;align-items:center;gap:9px}.layout-paper .brand-mark{display:none}.layout-paper .brand{font:700 45px Georgia,serif;letter-spacing:-.06em}.layout-paper .brand-caption{padding:0;margin:0}.layout-paper .mast-right{position:absolute;right:24px}.layout-paper .mast-right>span{display:none}.layout-paper .hero-grid{grid-template-columns:1fr 1fr;gap:30px}.layout-paper .hero-photo,.layout-paper .hero-side-photo{border-radius:0}.layout-paper .hero-caption h1,.layout-paper .hero-side h2,.layout-paper .compact-copy h3,.layout-paper .story h1,.layout-paper .news-card h3{font-family:Georgia,serif;font-weight:700;letter-spacing:-.025em}.layout-paper .hero-caption h1{font-size:39px}.layout-paper .feature-band{background:#f3f0e9}
.layout-grid .hero-grid{grid-template-columns:1.1fr 1fr;gap:15px}.layout-grid .hero-side{display:grid;grid-template-columns:42% 1fr;gap:13px;padding:10px;border:1px solid #e4e9ed;border-radius:6px}.layout-grid .hero-side-photo{height:100%;min-height:0}.layout-grid .hero-side h2{font-size:16px}.layout-grid .hero-caption h1{font-size:32px}
.layout-wire .microbar{background:var(--accent)}.layout-wire .mast-inner{min-height:79px}.layout-wire .brand{font-size:27px}.layout-wire .hero-side{display:grid;grid-template-columns:41% 1fr;gap:12px}.layout-wire .hero-side-photo{height:100%;min-height:0}.layout-wire .hero-side h2{font-size:15px}.layout-wire .compact-item{grid-template-columns:162px 1fr;padding:16px 0}.layout-wire .compact-copy h3{font-size:17px}.layout-wire .sidebar .side-box{border-top:4px solid var(--accent)}
.layout-clean{--bg:#fafdfe}.layout-clean .masthead{border-bottom:2px solid var(--accent)}.layout-clean .brand-mark{border-radius:50%}.layout-clean .hero-photo,.layout-clean .hero-side-photo,.layout-clean .news-card{border-radius:13px}.layout-clean .hero-grid{grid-template-columns:1.48fr 1fr;gap:25px}.layout-clean .feature-band{background:#eaf4f2}.layout-clean .newsletter{background:#e5f3ef}
.layout-eco{--bg:#fbfdfa}.layout-eco .masthead{background:#edf6ed}.layout-eco .hero-caption{border-left:4px solid var(--accent);padding-left:17px}.layout-eco .hero-photo{border-radius:10px}.layout-eco .feature-band{background:#eaf4e8}.layout-eco .newsletter{background:#e6f2e6}.layout-eco .section-bar{border-color:#316f43}
.layout-academy{--bg:#fffdfa}.layout-academy .masthead{background:#fff5eb}.layout-academy .hero-photo,.layout-academy .news-card{border-radius:12px}.layout-academy .hero-side{border:1px solid #f0e5dc;border-radius:9px;padding:10px;background:#faf5ee}.layout-academy .feature-band{background:#fbf3e9}
.layout-premium{--bg:#fcfbff}.layout-premium .masthead{background:#f7f4fc}.layout-premium .hero-caption h1,.layout-premium .hero-side h2,.layout-premium .news-card h3{font-family:Georgia,serif;font-weight:700;letter-spacing:-.03em}.layout-premium .hero-caption h1{font-size:42px}.layout-premium .hero-photo,.layout-premium .news-card{border-radius:0}.layout-premium .feature-band{background:#f1edf9}.layout-premium .section-bar{border-bottom:1px solid #b5a9c9}
@media(max-width:1080px){.category-nav{gap:19px}.mast-right>span{display:none}.below-grid{gap:26px}.article-grid{gap:25px}.hero-caption h1{font-size:30px}.hero-side h2{font-size:16px}.layout-paper .mast-right{position:static}}
@media(max-width:850px){.container{width:calc(100% - 34px)}.micro-inner>span:nth-child(2){display:none}.mast-inner{min-height:77px}.brand{font-size:26px!important}.mobile-only{display:grid}.category-nav{gap:17px;min-height:45px}.category-nav>a{font-size:11px}.ticker-all{display:none}.hero-grid,.layout-grid .hero-grid,.layout-paper .hero-grid{grid-template-columns:1fr}.hero-main{display:grid;grid-template-columns:1fr 1fr;gap:20px}.hero-photo{aspect-ratio:1.3}.hero-caption{padding-top:5px}.hero-rail{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hero-side{display:flex;min-height:238px}.hero-side-photo,.layout-grid .hero-side-photo,.layout-wire .hero-side-photo{height:140px}.layout-grid .hero-side,.layout-wire .hero-side{display:block}.below-grid,.article-grid,.archive-body{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:15px}.sidebar .side-box,.newsletter{margin:0}.sidebar .links,.article-sidebar{display:none}.footer-cols{gap:25px}.layout-paper .mast-inner{min-height:75px}.layout-paper .mast-left{flex-direction:row}.layout-paper .brand-caption{display:none}}
@media(max-width:600px){.container{width:calc(100% - 30px)}.micro-inner{font-size:9px}.mast-inner{min-height:69px}.brand-mark{width:26px;height:28px;font-size:15px}.brand{font-size:22px!important}.brand-caption{font-size:7px;padding-left:35px}.circle-action{width:34px;height:34px}.category-nav{gap:15px}.category-nav>a{font-size:10px}.category-nav>a:nth-child(n+5):not(.nav-more){display:none}.category-nav .nav-more{font-size:0;margin-left:0}.ticker-row{min-height:40px;gap:9px}.ticker-label{font-size:8px}.ticker-text a{font-size:10px}.editorial-intro{padding-top:20px;padding-bottom:10px}.editorial-intro h2{font-size:12px}.editorial-intro>span,.section-tag{display:none}.section-bar strong{font-size:16px}.section-bar>a{font-size:10px}.hero-main{display:block}.hero-photo{aspect-ratio:1.56}.hero-caption{padding-top:13px}.hero-caption h1,.layout-paper .hero-caption h1,.layout-premium .hero-caption h1{font-size:29px}.hero-caption p{font-size:12px}.hero-rail{gap:13px}.hero-side{min-height:0}.hero-side-photo,.layout-grid .hero-side-photo,.layout-wire .hero-side-photo{height:110px}.hero-side h2{font-size:13px!important}.hero-side .byline{font-size:9px}.topic-list{padding:14px 0;gap:6px}.topic-list span{width:100%;font-size:9px}.topic-list a{padding:5px 8px;font-size:9px}.below-grid{padding-top:22px;padding-bottom:33px}.compact-item,.archive-main .compact-item,.layout-wire .compact-item{grid-template-columns:110px 1fr;gap:11px;padding:15px 0}.compact-photo{aspect-ratio:1}.compact-copy h3,.layout-wire .compact-copy h3{font-size:14px;line-height:1.33;margin:3px 0 6px}.compact-copy .kicker,.compact-copy .byline{font-size:9px}.sidebar{display:block}.sidebar .side-box{margin-bottom:17px}.newsletter{margin-bottom:16px}.feature-band{padding:26px 0 36px}.feature-cards{grid-template-columns:1fr;gap:12px}.news-card{display:grid;grid-template-columns:122px 1fr}.news-visual{aspect-ratio:auto;height:100%}.card-body{padding:12px}.news-card h3{font-size:14px}.news-card p{display:none}.footer-cols{grid-template-columns:1fr 1fr;gap:20px}.footer-cols>div:first-child{grid-column:span 2}.site-footer{padding:36px 0 25px}.footer-bottom{flex-direction:column;gap:8px;margin-bottom:48px}.demo-floating{bottom:9px}.demo-floating span{font-size:8px}.story h1{font-size:34px}.article-deck{font-size:15px}.article-author{flex-wrap:wrap}.article-actions{width:100%;margin-left:0}.article-copy{font-size:16px}.archive-head{padding:24px 20px}.archive-search{flex-wrap:wrap}.archive-search input{width:100%;flex:auto}.archive-search button{padding:10px}.about-page h1{font-size:39px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}


/* ========================================================
   NICHE SPECIALIZED HERO WIDGETS & DISTINCT HERO LAYOUTS
   ======================================================== */
.tech-specs-card, .industrial-audit-card, .design-meta-bar, .airflow-status-card,
.wire-status-card, .cleanroom-badge-card, .eco-kpi-card, .academy-roadmap-card,
.bms-telemetry-card, .encyclopedia-badge-card {
  margin-bottom: 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 20px;
}

/* 01. Chillerpedia Tech Specs */
.tech-specs-card {
  border-top: 3px solid var(--accent);
  background: #f8fafc;
}
.tech-specs-card .card-tag {
  font-size: 10px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.specs-grid div span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 3px;
}
.specs-grid div strong {
  display: block;
  font-size: 12px;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 02. HVAC Journal Industrial Audit */
.industrial-audit-card {
  border-left: 4px solid var(--accent);
  background: #fafaf9;
  border-radius: 0;
}
.audit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.audit-head strong {
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink);
}
.audit-head span {
  font-size: 10px;
  color: var(--muted);
  font-family: monospace;
}
.industrial-audit-card p {
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 10px;
}
.audit-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.audit-tags span {
  font-size: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
}

/* 03. HVAC Design Blueprint Bar */
.design-meta-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fcfaf6;
  border: 1px solid #ebe5d8;
  font-family: Georgia, serif;
  font-size: 11px;
  color: #475569;
  border-radius: 0;
}

/* 04. Air Handling Flow Bar */
.airflow-status-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.airflow-header {
  font-size: 10px;
  font-weight: 900;
  color: #166534;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.airflow-indicators {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.airflow-item {
  font-size: 12px;
  color: #14532d;
  display: flex;
  align-items: center;
  gap: 6px;
}
.airflow-item strong {
  font-family: monospace;
}
.dot-green {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px #dcfce7;
}

/* 05. Cooling Tower Wire Card */
.wire-status-card {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
}
.wire-title {
  font-size: 10px;
  font-weight: 900;
  color: #0369a1;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.wire-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.wire-stats span {
  display: block;
  font-size: 10px;
  color: #0284c7;
  margin-bottom: 2px;
}
.wire-stats strong {
  font-size: 13px;
  color: #0c4a6e;
  font-family: monospace;
}

/* 06. Cleanroom Tech Badges */
.cleanroom-badge-card {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 12px;
}
.iso-title {
  font-size: 10px;
  font-weight: 900;
  color: #0f766e;
  letter-spacing: .07em;
  margin-bottom: 10px;
}
.iso-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.chip-iso {
  background: #0d9488;
  color: white;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
}
.cleanroom-badge-card small {
  display: block;
  font-size: 10px;
  color: #115e59;
}

/* 07. HVAC Energy KPI Card */
.eco-kpi-card {
  background: #f7fee7;
  border: 1px solid #d9f99d;
  border-radius: 8px;
}
.eco-head {
  font-size: 10px;
  font-weight: 900;
  color: #3f6212;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.eco-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.eco-stats span {
  display: block;
  font-size: 10px;
  color: #4d7c0f;
  margin-bottom: 2px;
}
.eco-stats strong {
  font-size: 13px;
  color: #1a2e05;
  font-family: monospace;
}

/* 08. Refrigerasiku Academy Roadmap */
.academy-roadmap-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
}
.academy-head {
  font-size: 10px;
  font-weight: 900;
  color: #92400e;
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.steps-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.step {
  background: white;
  border: 1px solid #fcd34d;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #78350f;
  display: flex;
  align-items: center;
  gap: 8px;
}
.step span {
  background: #f59e0b;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
}

/* 09. Building Control BMS Widget */
.bms-telemetry-card {
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-radius: 6px;
}
.bms-head {
  font-size: 10px;
  font-weight: 900;
  color: #6b21a8;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.bms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.bms-grid span {
  display: block;
  font-size: 10px;
  color: #7e22ce;
  margin-bottom: 2px;
}
.bms-grid strong {
  font-size: 13px;
  color: #3b0764;
  font-family: monospace;
}

/* 10. HVAC Pedia Encyclopedia Registry */
.encyclopedia-badge-card {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-top: 3px solid #1260cd;
  border-radius: 6px;
}
.enc-head {
  font-size: 10px;
  font-weight: 900;
  color: #1e3a8a;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.enc-topics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.enc-topics a {
  font-size: 11px;
  font-weight: 700;
  background: white;
  border: 1px solid #cbd5e1;
  padding: 5px 11px;
  border-radius: 4px;
  color: #1e293b;
  transition: all .15s;
}
.enc-topics a:hover {
  border-color: #1260cd;
  color: #1260cd;
  background: #f0f7ff;
}

/* ========================================================
   LAYOUT PAPER (HVAC Design) HERO
   ======================================================== */
.hero-paper {
  border-bottom: 1px solid #e4e9ef;
  padding-bottom: 26px;
  margin-bottom: 24px;
}
.paper-headline {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 30px;
}
.paper-headline h1 {
  font: 700 clamp(32px, 3.6vw, 48px)/1.15 Georgia, serif;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 10px 0 12px;
}
.paper-submeta {
  font-family: Georgia, serif;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 20px;
}
.paper-hero-photo {
  display: block;
  aspect-ratio: 2.1;
  overflow: hidden;
  background: #eef2f6;
  margin-bottom: 22px;
}
.paper-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paper-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  text-align: left;
  line-height: 1.8;
  font-size: 14px;
  color: #334155;
}
.paper-columns .lead-col:first-letter {
  float: left;
  font-size: 44px;
  line-height: .9;
  font-weight: 700;
  font-family: Georgia, serif;
  padding-right: 8px;
  color: var(--accent);
}
.paper-read-link {
  display: inline-block;
  margin-top: 10px;
  font-weight: 800;
  font-size: 12px;
  color: var(--accent);
}
.paper-side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid #e4e9ef;
  padding-top: 20px;
}
.paper-side-item {
  border-left: 2px solid #cbd5e1;
  padding-left: 16px;
}
.paper-side-item h2 {
  font: 700 18px/1.3 Georgia, serif;
  margin: 6px 0 8px;
}
.paper-side-item p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ========================================================
   LAYOUT GRID (Air Handling) 3-COLUMN TRI-GRID HERO
   ======================================================== */
.hero-tri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.tri-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tri-card.main {
  border-top: 3px solid var(--accent);
}
.tri-photo {
  display: block;
  aspect-ratio: 1.65;
  background: #f1f5f9;
  overflow: hidden;
}
.tri-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s;
}
.tri-photo:hover img {
  transform: scale(1.03);
}
.tri-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tri-body h2 {
  font: 800 17px/1.3 'Manrope', Arial, sans-serif;
  letter-spacing: -.03em;
  margin: 7px 0 9px;
}
.tri-body p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.tri-body .hero-meta {
  margin-top: auto;
}

@media(max-width: 850px) {
  .paper-columns, .paper-side-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-tri-grid {
    grid-template-columns: 1fr;
  }
}


/* ========================================================
   DISTINCT STRUCTURAL BODY LAYOUTS FOR 10 NICHE PORTALS
   ======================================================== */

/* LAYOUT 1: HVAC DESIGN (PAPER / ARCHITECTURAL GALLERY) */
.paper-body-section { padding: 20px 0 60px; }
.paper-blueprint-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.paper-card { border-bottom: 1px solid #e4e9ef; padding-bottom: 24px; }
.paper-card-photo { aspect-ratio: 1.8; overflow: hidden; display: block; margin-bottom: 14px; background: #eef2f6; }
.paper-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.paper-card-photo:hover img { transform: scale(1.02); }
.paper-discipline { font-size: 10px; color: var(--accent); font-weight: 800; letter-spacing: .08em; display: block; margin-bottom: 6px; }
.paper-card h3 { font: 700 22px/1.3 Georgia, serif; letter-spacing: -.02em; margin-bottom: 8px; }
.paper-card p { font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 10px; }
.paper-card-meta { font-size: 11px; color: #8491a1; font-family: Georgia, serif; }

/* LAYOUT 2: AIR HANDLING (FULL 3-COLUMN AIRFLOW GRID) */
.air-feed-section { padding: 20px 0 60px; }
.air-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.air-item-card { border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; background: white; display: flex; flex-direction: column; }
.air-card-visual { aspect-ratio: 1.6; overflow: hidden; display: block; background: #f1f5f9; }
.air-card-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.air-card-visual:hover img { transform: scale(1.03); }
.air-card-content { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.air-tag { font-size: 10px; font-weight: 900; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 6px; }
.air-item-card h3 { font: 800 17px/1.35 'Manrope', Arial, sans-serif; letter-spacing: -.03em; margin-bottom: 8px; }
.air-item-card p { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.air-item-card .byline { margin-top: auto; }

/* LAYOUT 3: COOLING TOWER (REAL-TIME TIMESTAMPED WIRE) */
.wire-body-section { padding: 20px 0 60px; }
.wire-split-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 36px; }
.wire-feed-list { display: flex; flex-direction: column; }
.wire-entry { display: grid; grid-template-columns: 75px 1fr; gap: 16px; border-bottom: 1px solid #e2e8f0; padding: 18px 0; }
.wire-time { font-family: monospace; color: var(--accent); display: flex; flex-direction: column; align-items: flex-start; }
.wire-clock { font-size: 15px; font-weight: 900; }
.wire-time small { font-size: 9px; color: #94a3b8; }
.wire-badge { font-size: 9px; font-weight: 800; background: #e0f2fe; color: #0369a1; padding: 2px 7px; border-radius: 3px; display: inline-block; margin-bottom: 6px; text-transform: uppercase; }
.wire-content h3 { font: 800 17px/1.3 'Manrope', Arial, sans-serif; letter-spacing: -.03em; margin: 4px 0 6px; }
.wire-content p { font-size: 12px; color: var(--muted); line-height: 1.6; }
.wire-sidebar-calc { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.wire-sidebar-calc div { display: flex; justify-content: space-between; border-bottom: 1px dashed #e2e8f0; padding-bottom: 6px; }
.wire-sidebar-calc strong { font-family: monospace; color: var(--accent); }
.wire-bullet-list { list-style: square; padding-left: 18px; margin: 0; font-size: 12px; line-height: 1.8; }

/* LAYOUT 4: REFRIGERASIKU (VOCATIONAL ACADEMY / MODULES) */
.academy-body-section { padding: 20px 0 60px; }
.academy-layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: 36px; }
.academy-modules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.course-module-card { border: 1px solid #fde68a; background: #fffdf5; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.module-number { background: #f59e0b; color: white; font-size: 10px; font-weight: 900; padding: 6px 12px; letter-spacing: .06em; }
.module-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.module-level { font-size: 9px; font-weight: 800; color: #b45309; text-transform: uppercase; margin-bottom: 6px; display: block; }
.course-module-card h3 { font: 800 16px/1.3 'Manrope', Arial, sans-serif; letter-spacing: -.03em; margin: 4px 0 8px; }
.course-module-card p { font-size: 12px; color: #78350f; line-height: 1.6; margin-bottom: 14px; }
.module-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #fef3c7; padding-top: 10px; font-size: 11px; }
.btn-module { background: #d97706; color: white; padding: 5px 11px; border-radius: 4px; font-size: 11px; font-weight: 800; }
.btn-module:hover { background: #b45309; color: white; }
.bnsp-box { background: #fffbeb; border-color: #fcd34d; }
.bnsp-points { margin-top: 12px; font-size: 12px; font-weight: 700; color: #92400e; display: flex; flex-direction: column; gap: 8px; }

/* LAYOUT 5: CHILLERPEDIA (TECHNICAL ENGINEERING DATASHEET) */
.tech-body-section { padding: 20px 0 60px; }
.tech-body-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); gap: 36px; }
.tech-spec-cards-feed { display: flex; flex-direction: column; gap: 18px; }
.tech-feed-card { display: grid; grid-template-columns: 190px 1fr; gap: 18px; border: 1px solid #dce9f0; background: white; border-radius: 8px; padding: 14px; }
.tech-feed-visual { aspect-ratio: 1.45; overflow: hidden; border-radius: 4px; background: #f1f5f9; }
.tech-feed-visual img { width: 100%; height: 100%; object-fit: cover; }
.tech-pill-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tech-spec-badge { background: var(--accent); color: white; font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 3px; }
.tech-cat { font-size: 10px; font-weight: 800; color: var(--muted); }
.tech-feed-card h3 { font: 800 18px/1.3 'Manrope', Arial, sans-serif; letter-spacing: -.03em; margin: 4px 0 8px; }
.tech-spec-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; padding: 8px 12px; margin-top: 10px; font-size: 10px; }
.tech-spec-row span { display: block; color: var(--muted); }
.tech-spec-row strong { color: var(--ink); font-family: monospace; }
.compressor-table { font-size: 11px; margin-top: 10px; }
.c-row { display: grid; grid-template-columns: 1.4fr 1fr 0.6fr; padding: 6px 0; border-bottom: 1px solid #e2e8f0; }
.c-row.head { font-weight: 800; color: var(--accent); border-bottom: 2px solid var(--accent); }

/* LAYOUT 6: HVAC JOURNAL (ACADEMIC / RESEARCH PAPERS) */
.industrial-body-section { padding: 20px 0 60px; }
.journal-split-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); gap: 36px; }
.journal-papers-list { display: flex; flex-direction: column; gap: 20px; }
.journal-paper-entry { border: 1px solid #e2e8f0; border-left: 4px solid var(--accent); background: white; padding: 20px; }
.paper-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 10px; }
.journal-vol-badge { background: var(--ink); color: white; padding: 3px 8px; font-weight: 900; letter-spacing: .06em; }
.paper-doi { color: var(--muted); font-family: monospace; }
.journal-paper-entry h2 { font: 900 20px/1.3 'Manrope', Arial, sans-serif; letter-spacing: -.04em; margin: 6px 0 10px; text-transform: uppercase; }
.paper-abstract { background: #f8fafc; border: 1px solid #e2e8f0; padding: 12px 14px; font-size: 12px; line-height: 1.6; color: #334155; margin-bottom: 12px; }
.paper-footer-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); }
.journal-read-paper { font-weight: 800; color: var(--accent); }
.dark-side { background: #181920 !important; color: #e2e8f0 !important; border-color: #2e303d !important; }
.dark-side h2 { color: white !important; }
.journal-std-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 11px; line-height: 1.5; }

/* LAYOUT 7: CLEANROOM TECH (PHARMACEUTICAL / STERILE STANDARDS) */
.clean-body-section { padding: 20px 0 60px; }
.clean-zones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
.zone-box { border: 1px solid #99f6e4; background: #f0fdfa; border-radius: 8px; padding: 16px; }
.zone-title { font-size: 11px; font-weight: 900; color: #0f766e; letter-spacing: .06em; margin-bottom: 6px; }
.zone-box p { font-size: 11px; color: #115e59; line-height: 1.5; }
.clean-articles-split { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); gap: 36px; }
.clean-feed { display: flex; flex-direction: column; gap: 18px; }
.clean-feed-item { display: grid; grid-template-columns: 190px 1fr; gap: 18px; border: 1px solid #ccfbf1; background: white; border-radius: 10px; padding: 14px; }
.clean-photo { aspect-ratio: 1.4; overflow: hidden; border-radius: 6px; background: #f0fdfa; }
.clean-photo img { width: 100%; height: 100%; object-fit: cover; }
.clean-chip { font-size: 9px; font-weight: 800; background: #0d9488; color: white; padding: 2px 7px; border-radius: 99px; display: inline-block; margin-bottom: 6px; }
.clean-feed-item h3 { font: 800 17px/1.3 'Manrope', Arial, sans-serif; letter-spacing: -.03em; margin: 4px 0 8px; }
.checklist-items { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #0f766e; font-weight: 700; }

/* LAYOUT 8: HVAC ENERGY (SUSTAINABILITY & EFFICIENCY DASHBOARD) */
.eco-body-section { padding: 20px 0 60px; }
.eco-split-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); gap: 36px; }
.eco-feed { display: flex; flex-direction: column; gap: 18px; }
.eco-case-card { display: grid; grid-template-columns: 200px 1fr; gap: 18px; border: 1px solid #d9f99d; background: white; border-radius: 8px; padding: 14px; }
.eco-visual { aspect-ratio: 1.45; overflow: hidden; border-radius: 6px; background: #f7fee7; }
.eco-visual img { width: 100%; height: 100%; object-fit: cover; }
.eco-badge { font-size: 9px; font-weight: 800; color: #3f6212; display: block; margin-bottom: 6px; }
.eco-case-card h3 { font: 800 17px/1.3 'Manrope', Arial, sans-serif; letter-spacing: -.03em; margin: 4px 0 8px; }
.eco-saving-bar { background: #f7fee7; border: 1px solid #bef264; border-radius: 4px; padding: 6px 12px; font-size: 11px; color: #365314; margin-top: 10px; }
.eco-saving-bar strong { color: #15803d; font-family: monospace; font-size: 12px; }
.bench-meter { display: flex; flex-direction: column; gap: 10px; font-size: 11px; }
.bench-meter div { display: flex; justify-content: space-between; border-bottom: 1px solid #d9f99d; padding-bottom: 6px; }
.bench-meter strong { font-family: monospace; color: #15803d; }

/* LAYOUT 9: BUILDING CONTROL (BMS & SMART IOT OTOMASI) */
.bms-body-section { padding: 20px 0 60px; }
.bms-protocols-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
.protocol-card { border: 1px solid #e9d5ff; background: #faf5ff; border-radius: 8px; padding: 16px; }
.protocol-card strong { color: #6b21a8; font-size: 12px; display: block; margin-bottom: 6px; }
.protocol-card p { font-size: 11px; color: #7e22ce; line-height: 1.5; }
.bms-split-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); gap: 36px; }
.bms-feed { display: flex; flex-direction: column; gap: 18px; }
.bms-feed-card { display: grid; grid-template-columns: 200px 1fr; gap: 18px; border: 1px solid #e9d5ff; background: white; border-radius: 8px; padding: 14px; }
.bms-feed-visual { aspect-ratio: 1.45; overflow: hidden; border-radius: 6px; background: #faf5ff; }
.bms-feed-visual img { width: 100%; height: 100%; object-fit: cover; }
.bms-tag { font-size: 9px; font-weight: 800; color: #6b21a8; display: block; margin-bottom: 6px; }
.bms-feed-card h3 { font: 700 19px/1.3 Georgia, serif; letter-spacing: -.03em; margin: 4px 0 8px; }
.gateway-status { display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: #3b0764; }

/* Responsive Overrides for Distinct Layouts */
@media(max-width: 850px) {
  .paper-blueprint-grid, .air-card-grid, .academy-modules-grid,
  .clean-zones-grid, .bms-protocols-grid {
    grid-template-columns: 1fr;
  }
  .wire-split-layout, .academy-layout, .tech-body-grid,
  .journal-split-layout, .clean-articles-split, .eco-split-layout, .bms-split-layout {
    grid-template-columns: 1fr;
  }
  .tech-feed-card, .clean-feed-item, .eco-case-card, .bms-feed-card {
    grid-template-columns: 140px 1fr;
  }
}

@media(max-width: 600px) {
  .tech-feed-card, .clean-feed-item, .eco-case-card, .bms-feed-card {
    grid-template-columns: 1fr;
  }
  .wire-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}


/* ========================================================
   UNIVERSAL MOBILE-FIRST RESPONSIVE & TOUCH POLISH (V2.1)
   ======================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}
img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}
button, a, input, select, textarea {
  touch-action: manipulation;
}

/* ========================================================
   MOBILE NAVIGATION DRAWER (TOUCH & ACCESSIBILITY)
   ======================================================== */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
}
.mobile-drawer[hidden] {
  display: none !important;
}
.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: drawerFadeIn .2s ease;
}
.mobile-drawer-panel {
  position: relative;
  width: min(340px, 86vw);
  height: 100%;
  background: #ffffff;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: drawerSlideIn .22s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
  box-sizing: border-box;
}
@keyframes drawerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes drawerSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}
.mobile-drawer-brand {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.04em;
}
.mobile-drawer-brand span {
  color: var(--accent);
}
.mobile-drawer-dismiss {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #475569;
  cursor: pointer;
  transition: all .15s ease;
}
.mobile-drawer-dismiss:active {
  background: #e2e8f0;
  color: #0f172a;
}
.mobile-drawer-search {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.mobile-drawer-search input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 16px !important; /* Prevents iOS auto-zoom! */
  background: #f8fafc;
  box-sizing: border-box;
}
.mobile-drawer-search button {
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: 6px;
  padding: 0 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.mobile-drawer-section {
  margin-bottom: 20px;
}
.mobile-drawer-section strong {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 8px;
}
.mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-drawer-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  border-bottom: 1px solid #f8fafc;
  transition: background .12s ease;
}
.mobile-drawer-links a:active,
.mobile-drawer-links a:hover {
  background: #f1f5f9;
  color: var(--accent);
}
body.mobile-drawer-open {
  overflow: hidden !important;
}

/* ========================================================
   SMOOTH HORIZONTAL TOUCH CATEGORY RAIL
   ======================================================== */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.category-nav {
  display: flex !important;
  align-items: stretch;
  gap: 16px;
  min-height: 46px;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  padding: 0 4px;
}
.category-nav::-webkit-scrollbar {
  display: none;
}
.category-nav > a {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px !important;
  font-weight: 700;
  padding: 11px 8px;
  border-bottom: 2px solid transparent;
  color: #475569;
  text-decoration: none;
}
.category-nav > a:hover,
.category-nav > a.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.category-nav .nav-more {
  display: none !important;
}

/* ========================================================
   RESPONSIVE BREAKPOINTS (TABLETS & PHABLETS <= 850px)
   ======================================================== */
@media(max-width: 850px) {
  .container {
    width: calc(100% - 32px) !important;
  }
  .micro-inner > span:nth-child(2) {
    display: none !important;
  }
  .mast-inner {
    min-height: 72px !important;
  }
  .brand {
    font-size: clamp(20px, 4.5vw, 28px) !important;
  }
  .mobile-only {
    display: grid !important;
  }
  .mast-right > span {
    display: none !important;
  }

  /* Layout 1: HVAC Design Blueprint */
  .paper-columns, .paper-blueprint-grid, .paper-side-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .paper-hero .paper-headline h1 {
    font-size: 30px !important;
  }

  /* Layout 2: Air Handling */
  .hero-tri-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .air-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  /* Split Layouts Collapsing */
  .wire-split-layout, .academy-layout, .tech-body-grid,
  .journal-split-layout, .clean-articles-split, .eco-split-layout, .bms-split-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .clean-zones-grid, .bms-protocols-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* Cards in Split Layouts */
  .tech-feed-card, .clean-feed-item, .eco-case-card, .bms-feed-card {
    grid-template-columns: 160px 1fr !important;
  }

  /* Footer */
  .footer-cols {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    gap: 32px !important;
  }
}

/* ========================================================
   RESPONSIVE BREAKPOINTS (SMARTPHONES <= 600px)
   ======================================================== */
@media(max-width: 600px) {
  .container {
    width: calc(100% - 24px) !important;
  }
  .microbar {
    font-size: 9px !important;
  }
  .micro-inner {
    min-height: 28px !important;
  }
  .micro-links {
    gap: 10px !important;
  }

  .masthead {
    border-bottom: 1px solid var(--line);
  }
  .mast-inner {
    min-height: 60px !important;
    padding: 6px 0 !important;
  }
  .brand-mark {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
  }
  .brand {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    max-width: calc(100vw - 130px) !important;
  }
  .brand-caption {
    display: none !important;
  }
  .circle-action {
    width: 38px !important;
    height: 38px !important;
  }
  .circle-action svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* Search Drawer */
  .search-drawer {
    padding: 16px 0 !important;
  }
  .search-form label {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .search-form > div {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .search-form input {
    width: 100% !important;
    font-size: 16px !important; /* Prevents iOS auto-zoom! */
    padding: 11px 13px !important;
  }
  .search-form button {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
    font-size: 13px !important;
  }

  /* Ticker */
  .ticker-row {
    min-height: 36px !important;
    gap: 8px !important;
  }
  .ticker-label {
    font-size: 8px !important;
    padding: 4px 6px !important;
  }
  .ticker-text a {
    font-size: 11px !important;
  }
  .ticker-all {
    display: none !important;
  }

  /* Editorial Intro */
  .editorial-intro {
    padding: 16px 0 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .intro-overline {
    font-size: 9px !important;
  }
  .editorial-intro h2 {
    font-size: 13px !important;
  }
  .editorial-intro > span {
    display: none !important;
  }

  /* Section Bars */
  .section-bar {
    min-height: 40px !important;
    margin-bottom: 14px !important;
  }
  .section-bar strong {
    font-size: 15px !important;
  }
  .section-bar > a {
    font-size: 11px !important;
  }

  /* Hero Main & Grid */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .hero-main {
    display: block !important;
  }
  .hero-photo {
    aspect-ratio: 16/9 !important;
  }
  .hero-caption {
    padding-top: 12px !important;
  }
  .hero-caption h1 {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.25 !important;
  }
  .hero-caption p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* LAYOUT 1: HVAC DESIGN (PAPER / BLUEPRINT) */
  .paper-body-section { padding: 14px 0 36px !important; }
  .paper-blueprint-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .paper-card h3 { font-size: 17px !important; }
  .paper-card p { font-size: 12px !important; }
  .paper-card-photo { aspect-ratio: 16/9 !important; }
  .paper-headline h1 { font-size: clamp(22px, 5.5vw, 28px) !important; }

  /* LAYOUT 2: AIR HANDLING */
  .air-feed-section { padding: 14px 0 36px !important; }
  .air-card-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .air-item-card h3 { font-size: 15px !important; }
  .air-card-visual { aspect-ratio: 16/9 !important; }
  .airflow-indicators {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .airflow-item { font-size: 9px !important; }

  /* LAYOUT 3: COOLING TOWER */
  .wire-body-section { padding: 14px 0 36px !important; }
  .wire-entry {
    grid-template-columns: 58px 1fr !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }
  .wire-clock { font-size: 12px !important; }
  .wire-time small { font-size: 8px !important; }
  .wire-content h3 { font-size: 14px !important; line-height: 1.35 !important; }
  .wire-content p { font-size: 11px !important; }
  .wire-sidebar-calc { font-size: 11px !important; padding: 12px !important; }

  /* LAYOUT 4: REFRIGERASIKU */
  .academy-body-section { padding: 14px 0 36px !important; }
  .academy-modules-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .academy-banner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .course-module-card h3 { font-size: 15px !important; }

  /* LAYOUT 5: CHILLERPEDIA */
  .tech-body-section { padding: 14px 0 36px !important; }
  .tech-feed-card {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .tech-feed-photo { aspect-ratio: 16/9 !important; }
  .specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .compressor-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    border: 1px solid #dce4ec;
  }
  .compressor-table .c-row {
    min-width: 320px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
  }

  /* LAYOUT 6: HVAC JOURNAL */
  .journal-body-section { padding: 14px 0 36px !important; }
  .journal-volume-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    font-size: 10px !important;
  }
  .journal-entry { padding: 14px 0 !important; }
  .journal-entry h3 { font-size: 16px !important; }
  .abstract-box { padding: 10px 12px !important; font-size: 11px !important; }

  /* LAYOUT 7: CLEANROOM TECH */
  .clean-body-section { padding: 14px 0 36px !important; }
  .clean-zones-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .clean-feed-item {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .clean-photo { aspect-ratio: 16/9 !important; }
  .clean-feed-item h3 { font-size: 15px !important; }

  /* LAYOUT 8: HVAC ENERGY */
  .eco-body-section { padding: 14px 0 36px !important; }
  .eco-case-card {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .eco-visual { aspect-ratio: 16/9 !important; }
  .eco-case-card h3 { font-size: 15px !important; }
  .bench-meter { font-size: 11px !important; }

  /* LAYOUT 9: BUILDING CONTROL */
  .bms-body-section { padding: 14px 0 36px !important; }
  .bms-protocols-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .bms-feed-card {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .bms-feed-visual { aspect-ratio: 16/9 !important; }
  .bms-feed-card h3 { font-size: 16px !important; }

  /* LAYOUT 10: HVAC PEDIA */
  .pedia-main-grid, .feature-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .news-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .news-visual { aspect-ratio: 16/9 !important; height: auto !important; }
  .card-body { padding: 12px !important; }
  .news-card h3 { font-size: 15px !important; }

  /* ARTICLE DETAIL VIEW */
  .story h1 {
    font-size: clamp(21px, 5.5vw, 26px) !important;
    line-height: 1.25 !important;
  }
  .article-deck {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .article-author {
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 11px !important;
  }
  .article-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 12px 0 !important;
  }
  .article-actions button {
    flex: 1 1 auto !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .article-copy {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
  .article-copy img {
    border-radius: 6px !important;
    margin: 14px 0 !important;
  }
  .article-copy table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ARCHIVE / CATEGORY VIEW */
  .archive-head {
    padding: 18px 14px !important;
  }
  .archive-head h1 {
    font-size: clamp(21px, 5.5vw, 26px) !important;
  }
  .archive-search {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .archive-search input {
    width: 100% !important;
    font-size: 16px !important;
    padding: 11px 12px !important;
  }
  .archive-search button {
    min-height: 42px !important;
    justify-content: center !important;
  }
  .archive-cats {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }
  .archive-cats::-webkit-scrollbar {
    display: none;
  }
  .archive-cats a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
  }
  .archive-body {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .archive-main .compact-item {
    grid-template-columns: 90px 1fr !important;
    gap: 10px !important;
  }

  /* FOOTER */
  .site-footer {
    padding: 32px 0 40px !important;
  }
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 24px !important;
    margin-bottom: 58px !important;
    font-size: 10px !important;
  }

  /* FLOATING DEMO SWITCHER */
  .demo-floating {
    bottom: 10px !important;
    padding: 5px 10px !important;
    max-width: calc(100% - 20px) !important;
    gap: 3px !important;
  }
  .demo-floating span {
    font-size: 8px !important;
    padding: 0 3px !important;
  }
  .demo-floating a {
    padding: 4px 7px !important;
    font-size: 10px !important;
    min-height: 28px !important;
  }
}

/* NARROW PHONES (<380px) */
@media(max-width: 380px) {
  .wire-entry {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .archive-main .compact-item {
    grid-template-columns: 1fr !important;
  }
  .archive-main .compact-photo {
    aspect-ratio: 16/9 !important;
  }
  .specs-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ========================================================
   CURATED DISTINCT TYPOGRAPHIC IDENTITIES FOR 10 PORTALS
   ======================================================== */

/* 1. HVAC DESIGN (ARCHITECTURAL BLUEPRINT & MEP) - Editorial Sharp Serif */
.layout-paper, [data-layout="paper"], .site-hvacdesign {
  --font-heading: 'Newsreader', 'Fraunces', Georgia, serif;
}
.layout-paper .brand, .layout-paper h1, .layout-paper h2, .layout-paper h3,
.layout-paper .paper-headline h1, .layout-paper .paper-card h3,
.site-hvacdesign .brand, .site-hvacdesign h1, .site-hvacdesign h2, .site-hvacdesign h3 {
  font-family: 'Newsreader', Georgia, serif !important;
  letter-spacing: -0.02em;
}
.layout-paper .paper-dropcap, .site-hvacdesign .paper-dropcap {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* 2. AIR HANDLING (AERODYNAMIC AIRFLOW MAGAZINE) - Curved Geometric Grotesque */
.layout-grid, [data-layout="grid"], .site-airhandling, .site-hvaczone {
  font-family: 'DM Sans', sans-serif !important;
}
.layout-grid .brand, .layout-grid h1, .layout-grid h2, .layout-grid h3,
.layout-grid .air-item-card h3, .site-airhandling, .site-hvaczone .brand, .site-airhandling, .site-hvaczone h1, .site-airhandling, .site-hvaczone h2, .site-airhandling, .site-hvaczone h3 {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.04em;
}

/* 3. COOLING TOWER (REAL-TIME BREAKING WIRE DISPATCH) - High-Urgency Condensed */
.layout-wire, [data-layout="wire"], .site-coolingtower, .site-hvacinsight {
  font-family: 'IBM Plex Sans', sans-serif !important;
}
.layout-wire .brand, .layout-wire h1, .layout-wire h2, .layout-wire h3,
.layout-wire .wire-content h3, .site-coolingtower, .site-hvacinsight .brand, .site-coolingtower, .site-hvacinsight h1, .site-coolingtower, .site-hvacinsight h2, .site-coolingtower, .site-hvacinsight h3 {
  font-family: 'Chivo', 'Manrope', sans-serif !important;
  letter-spacing: -0.04em;
  font-weight: 900;
}
.layout-wire .wire-clock, .layout-wire .wire-time, .site-coolingtower, .site-hvacinsight .wire-clock {
  font-family: 'JetBrains Mono', monospace !important;
}

/* 4. REFRIGERASIKU (VOCATIONAL TRAINING ACADEMY) - Friendly Educational Clarity */
.layout-academy, [data-layout="academy"], .site-refrigerasiku {
  font-family: 'Inter', sans-serif !important;
}
.layout-academy .brand, .layout-academy h1, .layout-academy h2, .layout-academy h3,
.layout-academy .course-module-card h3, .site-refrigerasiku .brand, .site-refrigerasiku h1, .site-refrigerasiku h2, .site-refrigerasiku h3 {
  font-family: 'Lexend', 'Outfit', sans-serif !important;
  letter-spacing: -0.03em;
}
.layout-academy .module-number, .site-refrigerasiku .module-number {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800;
}

/* 5. CHILLERPEDIA (INDUSTRIAL DATASHEET & MECHANICAL CATALOG) - Precision Monospace & Space Grotesk */
.layout-tech .brand, .layout-tech h1, .layout-tech h2, .layout-tech h3,
.layout-tech .tech-feed-card h3, .site-chillerpedia, .site-manufakturhvac .brand, .site-chillerpedia, .site-manufakturhvac h1, .site-chillerpedia, .site-manufakturhvac h2, .site-chillerpedia, .site-manufakturhvac h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -0.04em;
}
.layout-tech .specs-grid strong, .layout-tech .compressor-table strong,
.site-chillerpedia, .site-manufakturhvac .specs-grid strong, .site-chillerpedia, .site-manufakturhvac .compressor-table strong {
  font-family: 'JetBrains Mono', monospace !important;
}

/* 6. HVAC JOURNAL (ACADEMIC PEER-REVIEWED RESEARCH MATRIX) - Dignified Scholarly Serif */
.layout-industrial .brand, .layout-industrial h1, .layout-industrial h2, .layout-industrial h3,
.layout-industrial .journal-entry h3, .site-hvacjournal .brand, .site-hvacjournal h1, .site-hvacjournal h2, .site-hvacjournal h3 {
  font-family: 'Merriweather', Georgia, serif !important;
  letter-spacing: -0.02em;
}
.layout-industrial .abstract-box, .site-hvacjournal .abstract-box {
  font-family: 'Source Serif 4', Georgia, serif !important;
}
.layout-industrial .journal-volume-bar, .site-hvacjournal .journal-volume-bar {
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* 7. CLEANROOM TECH (PHARMACEUTICAL STERILE STANDARDS) - Clinical Precision Urbanist */
.layout-clean .brand, .layout-clean h1, .layout-clean h2, .layout-clean h3,
.layout-clean .clean-feed-item h3, .site-cleanroomtech, .site-consultanthvac .brand, .site-cleanroomtech, .site-consultanthvac h1, .site-cleanroomtech, .site-consultanthvac h2, .site-cleanroomtech, .site-consultanthvac h3 {
  font-family: 'Urbanist', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* 8. HVAC ENERGY (DECARBONIZATION & NET ZERO ESG DASHBOARD) - Clean Nordic Modern */
.layout-eco, [data-layout="eco"], .site-hvacenergy {
  font-family: 'Work Sans', sans-serif !important;
}
.layout-eco .brand, .layout-eco h1, .layout-eco h2, .layout-eco h3,
.layout-eco .eco-case-card h3, .site-hvacenergy .brand, .site-hvacenergy h1, .site-hvacenergy h2, .site-hvacenergy h3 {
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.layout-eco .bench-meter strong, .site-hvacenergy .bench-meter strong {
  font-family: 'JetBrains Mono', monospace !important;
}

/* 9. BUILDING CONTROL (SMART BMS & IOT PROTOCOLS) - Cyber-Physical High Tech */
.layout-premium, [data-layout="premium"], .site-buildingcontrol {
  font-family: 'DM Sans', sans-serif !important;
}
.layout-premium .brand, .layout-premium h1, .layout-premium h2, .layout-premium h3,
.layout-premium .bms-feed-card h3, .site-buildingcontrol .brand, .site-buildingcontrol h1, .site-buildingcontrol h2, .site-buildingcontrol h3 {
  font-family: 'Syne', sans-serif !important;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.layout-premium .gateway-status strong, .site-buildingcontrol .gateway-status strong {
  font-family: 'JetBrains Mono', monospace !important;
}

/* 10. HVAC PEDIA (CLASSIC NATIONAL ENCYCLOPEDIA) - Authoritative News Montserrat */
.layout-classic, [data-layout="classic"], .site-hvacpedia {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.layout-classic .brand, .layout-classic h1, .layout-classic h2, .layout-classic h3,
.layout-classic .news-card h3, .site-hvacpedia .brand, .site-hvacpedia h1, .site-hvacpedia h2, .site-hvacpedia h3 {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: -0.04em;
  font-weight: 800;
}