/* TechHaven — everyday technology, explained simply. Written from scratch:
   midnight navy #14213d + bright sky blue #219ebc on clean white #ffffff,
   bold sans-serif headings, navy header bar with sky-blue nav highlights,
   magazine hero grid (one large featured story left, two smaller right),
   sharp 4px-radius post cards with strong image tops, white sidebar
   widgets with navy headings and a tag-cloud topic list. One file, CSS
   variables, system font stack, no external requests. */
:root{
  --bg:#ffffff; --card:#ffffff; --soft:#eef4f7; --soft2:#dbe8ee;
  --ink:#14213d; --mut:#4a5a6a; --line:#d7e2e8;
  --navy:#14213d; --navy-dark:#0d1828; --navy-soft:#e8eef4;
  --sky:#219ebc; --sky-dark:#17748c; --sky-soft:#dff2f7;
  --radius:4px; --wrap:1180px; --content:720px; --sidebar:300px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.7 var(--font);color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky-dark);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--font);line-height:1.2;color:var(--navy);margin:0 0 .6em;font-weight:800}
h1{font-size:2.2rem;letter-spacing:-.01em}
h2{font-size:1.5rem;margin-top:1.6em}
h3{font-size:1.15rem;margin-top:1.4em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}
li{margin-bottom:.35em}
table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:.95rem}
th,td{border:1px solid var(--line);padding:.6em .8em;text-align:left;vertical-align:top}
thead th{background:var(--soft);font-weight:700}
figure{margin:0 0 1.4em}
figcaption{font-size:.85rem;color:var(--mut);margin-top:.5em}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.6em 1em;z-index:100}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:var(--content);margin:0 auto}

/* Header — navy bar, white text, sky-blue nav highlights */
.site-header{background:var(--navy);color:#fff;border-bottom:3px solid var(--sky)}
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.site-branding{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-branding img{width:38px;height:38px}
.site-title{font-size:1.35rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.site-title:hover{text-decoration:none;color:#bfe8f2}
.main-navigation{margin-left:auto}
.main-navigation ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
.main-navigation a{display:block;padding:.5em .9em;color:#cfe6ee;font-weight:700;font-size:.97rem;border-radius:var(--radius)}
.main-navigation a:hover{background:var(--sky);text-decoration:none;color:#fff}
.main-navigation a.current{background:var(--sky);color:#fff}
.menu-toggle{display:none;margin-left:auto;background:var(--sky);border:0;border-radius:var(--radius);padding:.5em .85em;font:inherit;font-weight:700;cursor:pointer;color:#fff}

/* Hero — magazine grid: one large featured story left, two smaller right */
.hero{padding:2.4rem 0 2rem;border-bottom:1px solid var(--line)}
.hero .tagline{font-weight:800;color:var(--sky-dark);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;margin-bottom:.5em}
.hero h1{font-size:2.6rem;max-width:720px;margin-bottom:.4em}
.hero .lead{font-size:1.13rem;color:var(--mut);max-width:720px}
.hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;margin-top:1.8rem;align-items:stretch}
.hero-grid>*{min-width:0}
.hero-feature{display:flex;flex-direction:column}
.hero-feature img{aspect-ratio:1200/630;object-fit:cover;width:100%}
.hero-feature h2{font-size:1.6rem;margin:.55em 0 .4em}
.hero-feature h2 a{color:var(--navy)}
.hero-feature h2 a:hover{color:var(--sky-dark)}
.hero-side{display:flex;flex-direction:column;gap:24px}
.hero-side .post-card{flex:1}
.hero-side .post-card p{display:none}
.btn{display:inline-block;background:var(--sky);color:#fff;font-weight:700;padding:.7em 1.4em;border-radius:var(--radius);border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--sky-dark);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.2em}

/* Sections */
.section{padding:2.4rem 0}
.section.alt{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:1.4rem}
.section-head h2{margin:0}
.section-head a{font-weight:700;white-space:nowrap}

/* Post cards — sharp 4px corners, strong image tops, navy titles */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-grid>*{min-width:0}
.post-card{border:1px solid var(--line);border-top:4px solid var(--sky);border-radius:var(--radius);overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.post-card:hover{border-color:var(--sky);box-shadow:0 4px 16px rgba(20,33,61,.12)}
.post-card img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.post-card .card-body{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:1.15rem;margin:.55em 0 .4em}
.post-card h3 a{color:var(--navy)}
.post-card h3 a:hover{color:var(--sky-dark)}
.post-card p{color:var(--mut);font-size:.97rem;flex:1}
.cat-label{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--navy);border-radius:var(--radius);padding:.3em .9em}
.entry-meta{font-size:.87rem;color:var(--mut);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.entry-meta a{color:var(--mut)}
.entry-meta .dot::before{content:"·";margin:0 2px}

/* Category tiles */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat-grid>*{min-width:0}
.cat-tile{border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:var(--radius);padding:1.2rem;background:var(--card)}
.cat-tile h3{font-size:1.08rem;margin:.3em 0 .35em}
.cat-tile h3 a{color:var(--navy)}
.cat-tile p{font-size:.92rem;color:var(--mut);margin:0 0 .6em}
.cat-tile .count{font-size:.85rem;font-weight:700;color:var(--sky-dark)}

/* Single post layout with sidebar */
.site-content{padding:2rem 0 3rem}
.content-area{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);gap:44px;align-items:start}
.content-area>*{min-width:0}
.entry-content{overflow-wrap:break-word}
.entry-content table{table-layout:fixed}
.entry-content th,.entry-content td{overflow-wrap:break-word}
.breadcrumbs{font-size:.88rem;color:var(--mut);margin-bottom:1rem}
.breadcrumbs a{color:var(--mut)}
.entry-header{margin-bottom:1.2rem}
.entry-header .cat-label{margin-bottom:.7em}
.entry-header h1{margin-bottom:.4em}
.post-thumbnail{margin:0 0 1.4rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);border-top:4px solid var(--sky)}
.post-thumbnail img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.entry-content{font-size:1.06rem}
.entry-content img{border-radius:var(--radius)}
.takeaways{background:var(--sky-soft);border:1px solid var(--sky);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.6em 0}
.takeaways h2{margin-top:0;font-size:1.2rem;color:var(--navy)}
.takeaways ul{margin-bottom:0}
.faq{margin:1.6em 0}
.faq h3{margin-top:1em}
.disclaimer-box{background:#fff;border:1px solid var(--line);border-left:4px solid var(--sky);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.6em 0;font-size:.97rem}
.disclaimer-box strong{display:block;margin-bottom:.3em}
.author-box{display:flex;gap:16px;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:var(--radius);padding:1.3rem;background:var(--card);margin:2rem 0}
.author-box img{width:72px;height:72px;border-radius:50%;flex-shrink:0;object-fit:cover;border:2px solid var(--sky)}
.author-box h3{margin:0 0 .2em;font-size:1.08rem}
.author-box .role{font-size:.88rem;color:var(--sky-dark);font-weight:700;margin-bottom:.4em}
.author-box p{margin:0;font-size:.97rem;color:var(--mut)}
.related{margin:2.2rem 0 0}
.related h2{font-size:1.35rem}
.related .post-grid{grid-template-columns:repeat(3,1fr)}

/* Sidebar widgets — plain white boxes, navy headings, tag-cloud topics */
.widget-area{display:flex;flex-direction:column;gap:22px}
.widget{border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;background:var(--card)}
.widget h2,.widget h3{font-size:1.1rem;margin:0 0 .7em;padding-bottom:.5em;border-bottom:2px solid var(--navy);color:var(--navy)}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{margin-bottom:.55em;padding-bottom:.55em;border-bottom:1px solid var(--soft2)}
.widget li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.widget ol{margin:0;padding-left:1.4em}
.widget ol li{margin-bottom:.55em;padding-bottom:.55em;border-bottom:1px solid var(--soft2)}
.widget ol li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.widget ol li::marker{font-weight:800;color:var(--sky-dark)}
.widget p{font-size:.95rem;color:var(--mut)}
.widget .avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:.6em;border:2px solid var(--sky)}
.widget .mini-meta{font-size:.85rem;color:var(--mut)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud a{display:inline-block;background:var(--sky-soft);color:var(--navy);font-size:.85rem;font-weight:700;padding:.35em .8em;border-radius:999px;border:1px solid var(--soft2)}
.tag-cloud a:hover{background:var(--sky);color:#fff;text-decoration:none;border-color:var(--sky)}
.tag-cloud a.tag-pillar{background:var(--navy);color:#fff;border-color:var(--navy);font-size:.95rem}
.tag-cloud a.tag-pillar:hover{background:var(--sky);border-color:var(--sky)}

/* Pages */
.page-intro{font-size:1.12rem;color:var(--mut);max-width:640px}
.archive-header{padding:2.2rem 0 0}
.archive-header h1{margin-bottom:.3em}
.archive-header p{color:var(--mut);max-width:680px}
.faq-list details{border:1px solid var(--line);border-top:3px solid var(--sky);border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:.7em;background:var(--card)}
.faq-list summary{font-weight:700;cursor:pointer;font-size:1.02rem}
.faq-list p{margin:.6em 0 0;color:var(--mut)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.trust-grid>*{min-width:0}
.trust-item{border:1px solid var(--line);border-top:4px solid var(--sky);border-radius:var(--radius);padding:1.2rem;background:var(--card)}
.trust-item h3{margin:0 0 .35em;font-size:1.08rem}
.trust-item p{margin:0;color:var(--mut);font-size:.96rem}
.error-404{text-align:center;padding:3rem 0}
.error-404 h1{font-size:3rem}
.search-note{font-size:.95rem;color:var(--mut);margin-top:1.4em}
.footer-tag{margin-top:10px}
.author-more{margin-top:.5em}
.author-portrait{border-radius:50%;border:2px solid var(--sky)}
.btn-row.center{justify-content:center}

/* Footer — deep navy with a sky-blue top rule */
.site-footer{background:var(--navy-dark);color:#cfe6ee;margin-top:0;border-top:4px solid var(--sky)}
.site-footer a{color:#fff}
.site-footer a:hover{color:#7fd4e8}
.footer-widgets{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:2.6rem 0 1.8rem}
.footer-widgets>*{min-width:0}
.footer-widgets h3{color:#fff;font-size:1rem;margin:0 0 .8em}
.footer-widgets ul{list-style:none;margin:0;padding:0}
.footer-widgets li{margin-bottom:.45em}
.footer-widgets p{font-size:.95rem;margin:0 0 .8em}
.footer-brand{font-size:1.25rem;font-weight:800;color:#fff}
.site-info{border-top:1px solid #22385c;padding:1.1rem 0;font-size:.9rem;color:#9db8c6}
.site-info .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* Responsive */
@media (max-width:1020px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .content-area{grid-template-columns:1fr}
  .widget-area{display:grid;grid-template-columns:repeat(2,1fr)}
  .footer-widgets{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr}
  .related .post-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .hero-side{display:grid;grid-template-columns:repeat(2,1fr)}
  .hero-side .post-card p{display:block}
}
@media (max-width:680px){
  body{font-size:16px;line-height:1.65}
  h1{font-size:1.8rem}
  .hero h1{font-size:2rem}
  .hero{padding:1.4rem 0}
  .menu-toggle{display:block}
  .main-navigation{position:absolute;top:64px;left:0;right:0;background:var(--navy);border-bottom:3px solid var(--sky);display:none;z-index:50}
  .main-navigation.open{display:block}
  .main-navigation ul{flex-direction:column;align-items:stretch;padding:10px 20px 16px}
  .main-navigation a{padding:.7em .4em}
  .site-header{position:relative}
  .post-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .widget-area{grid-template-columns:1fr}
  .footer-widgets{grid-template-columns:1fr}
  .related .post-grid{grid-template-columns:1fr}
  .author-box{flex-direction:column}
  .section{padding:1.8rem 0}
  .hero-side{grid-template-columns:1fr}
  .hero-feature h2{font-size:1.35rem}
}