*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#e9eff3;color:#111;font-family:Arial,Helvetica,sans-serif;line-height:1.7}
.wrap{width:min(1120px,calc(100% - 40px));margin:auto}
.narrow{max-width:1010px}
.site-header{background:#fff;border-top:4px solid #111;border-bottom:1px solid #ddd}
.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#111}
.avatar{width:46px;height:46px;border:1px solid #ccc;border-radius:50%;display:grid;place-items:center;font-size:24px;background:#fff}
.brand-text b{display:block;letter-spacing:1.4px}
.brand-text small{display:block;color:#777;margin-top:2px}
nav{display:flex;gap:27px}
nav a{color:#222;text-decoration:none;font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.5px}
main{width:min(1180px,100%);margin:auto;background:#fff}
.hero{text-align:center;padding:70px 30px 18px}
.eyebrow,.meta{font-size:11px;letter-spacing:2px;font-weight:700;color:#80623b}
.hero h1{font-size:58px;line-height:1;margin:12px 0 8px;letter-spacing:-1.2px}
.hero-sub{font-family:Georgia,serif;font-size:34px;margin:0}
.lead{font-family:Georgia,serif;color:#555;font-size:18px;margin:12px auto 18px;max-width:760px}
.hero-visual{margin:20px auto 0;max-width:1030px;overflow:hidden}
.hero-visual img{display:block;width:100%;height:auto}
.black-strip{margin:0 30px;background:#050505;color:#fff;text-align:center;font-size:19px;font-weight:700;padding:22px 24px}
.content{padding:28px 0 30px}
.rule{width:100px;height:2px;background:#888;margin:30px auto}
.center{text-align:center}
.strong{font-weight:700}.strong a{color:#111}
.content p{font-size:17px;margin:23px 0}
.reader-title{text-align:center;text-decoration:underline;margin-top:45px}
blockquote{margin:28px 0;border-left:4px solid #111;padding:0 18px;font-family:Georgia,serif;font-size:18px;font-style:italic}
blockquote span{display:block;margin-top:8px;font-family:Arial,sans-serif;font-size:14px;font-style:normal}
.overview{padding:18px 0 55px}
.overview h2{font-size:22px}
.overview ul{padding-left:28px}
.overview li{font-size:17px;font-weight:700;margin:13px 0}
.fineprint{font-size:13px;color:#666}
.latest{padding:45px 0 65px;border-top:1px solid #ddd;display:grid;grid-template-columns:1.7fr .7fr;gap:60px}
.latest-main>h2{font-size:28px;margin-bottom:0}
.latest-intro{font-weight:700;margin-top:0}
.article-row{display:grid;grid-template-columns:1fr 220px;gap:24px;border-top:1px solid #ddd;padding:22px 0}
.article-row h3{font-size:22px;margin:0 0 4px}
.article-row p{margin:6px 0;color:#444}
.thumb{height:130px;background:#eee;position:relative;overflow:hidden}
.thumb:before,.thumb:after{content:"";position:absolute;background:#999}
.thumb-a:before{left:18px;right:18px;bottom:32px;height:2px;transform:rotate(-11deg)}
.thumb-a:after{left:80px;top:20px;width:2px;height:90px;transform:rotate(17deg)}
.thumb-b:before{left:16px;right:16px;top:65px;height:3px;transform:rotate(8deg)}
.thumb-b:after{right:52px;top:18px;width:3px;height:100px;transform:rotate(-10deg)}
.topics h3{font-size:24px;border-bottom:1px solid #999;padding-bottom:10px}
.topic-list{display:flex;flex-wrap:wrap;gap:10px 12px}
.topic-list a{font-size:13px;color:#111;text-decoration:none;border-bottom:1px dotted #555}
footer{background:#ece8e8;padding:48px 0}
.footer-grid{display:grid;grid-template-columns:.8fr 1.4fr 1fr;gap:44px}
.social{display:flex;gap:10px;align-items:flex-start}
.social-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;text-decoration:none;transition:transform .15s ease,opacity .15s ease}
.social-link:hover{transform:translateY(-2px);opacity:.9}
.social-link img{display:block;width:20px;height:20px;filter:brightness(0) invert(1)}
.social-link.facebook{background:#1877F2}
.social-link.x-twitter{background:#000}
.social-link.linkedin{background:#0A66C2}
.social-link.youtube{background:#FF0000}
.social-link.youtube img{width:22px}
.footer-title{font-weight:700;margin-top:0}
form{display:flex}
input{height:42px;flex:1;min-width:0;border:1px solid #ccc;padding:0 12px;background:#fff}
form button{height:42px;border:0;background:#111;color:#fff;padding:0 20px;font-weight:700}
small{display:block;margin-top:8px;color:#777}

@media(max-width:760px){
  .wrap{width:min(100% - 28px,1120px)}
  nav{display:none}
  .brand-text small{display:none}
  .hero{padding:48px 14px 14px}
  .hero h1{font-size:40px}
  .hero-sub{font-size:27px}
  .lead{font-size:16px}
  .hero-visual{margin-top:14px}
  .black-strip{margin:0 14px;font-size:16px;padding:18px 16px}
  .content,.overview{padding-left:7px;padding-right:7px}
  .latest{grid-template-columns:1fr;gap:35px}
  .article-row{grid-template-columns:1fr}
  .thumb{height:160px}
  .footer-grid{grid-template-columns:1fr}
}

/* RHN header brand update only */
.avatar-img{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:block;
  object-fit:cover;
  border-radius:50%;
}
.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.05;
}
.brand-text .brand-rhn{
  display:block;
  font-size:20px;
  font-weight:900;
  letter-spacing:.5px;
}
.brand-text strong{
  display:block;
  margin-top:3px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.8px;
}
@media(max-width:760px){
  .avatar-img{width:46px;height:46px;flex-basis:46px}
  .brand{gap:9px}
}