/* H View Design 5 — full-width editorial banner, pill navigation, mobile app dock */
:root{--blue:#1E4CFF;--blue-dark:#1746B2;--pink:#D81B76;--ink:#0A1735;--muted:#394D69;--soft-blue:#EEF4FF;--soft-pink:#FFF0F7;--grad:linear-gradient(105deg,#1E4CFF 0%,#6553D9 55%,#D81B76 100%)}
body{color:#0A1735}
.topline{background:#FFF7FA;color:#0A1735;border-bottom:1px solid #F0DFE8}
.topinner{min-height:43px;height:auto;display:grid;grid-template-columns:minmax(200px,1fr) auto auto auto;align-items:center;gap:20px;color:#0A1735;font-size:11px;font-weight:600}
.top-latest{min-width:0;display:flex;align-items:center;gap:12px;white-space:nowrap;overflow:hidden}.top-latest b{color:#D81B76}.top-latest a,.top-latest span{overflow:hidden;text-overflow:ellipsis;color:#263B5A}.top-links{display:flex;gap:17px;white-space:nowrap}.top-links a{color:#0A1735}.top-links a:hover{color:#D81B76}.top-date{display:none}.top-subscribe{padding:7px 15px;border-radius:22px;background:#D81B76;color:#fff;font-size:11px;white-space:nowrap}
.site-header{background:#fff;border-bottom:0}
.masthead{min-height:210px;background:#fff1f6 url('/assets/header-workspace-bg.jpg') center 56%/cover no-repeat;border-bottom:0}
.masthead-inner{min-height:210px;display:grid;grid-template-columns:minmax(230px,290px) minmax(180px,270px) minmax(280px,1fr);gap:24px;align-items:center}
.brand{min-width:0;justify-self:start}.brand img{width:280px;height:78px;object-fit:contain;object-position:left center}
.header-slogan{font:700 clamp(29px,3vw,42px)/.98 'Dancing Script','Brush Script MT',cursive;color:#0A1735;text-align:center}.header-slogan em{font-style:normal;color:#173D82}
.search{margin:0;width:100%;max-width:610px;justify-self:center}.search input{height:48px;padding:10px 57px 10px 19px;border-radius:26px;background:rgba(255,255,255,.97);color:#0A1735;font-size:14px;box-shadow:0 7px 22px rgba(22,42,74,.12)}.search input::placeholder{color:#52647F;opacity:1}.search button{top:5px;right:5px;width:38px;height:38px;border-radius:50%;background:#D81B76;color:#fff;font-size:23px}
.main-nav{position:relative;z-index:3;margin:-21px auto 0;border:0;background:transparent}.navinner{min-height:58px;display:flex;align-items:center;gap:clamp(13px,2vw,27px);overflow-x:auto;white-space:nowrap;padding:0 24px;border:1px solid #E6EAF1;border-radius:40px;background:#fff;box-shadow:0 8px 24px rgba(20,40,70,.12);color:#0A1735;font-size:14px;font-weight:650;scrollbar-width:none}.navinner::-webkit-scrollbar{display:none}.navinner a:first-child{color:#D81B76}.navinner a:hover{color:#1E4CFF}.ticker{display:none!important}.mobile-app-nav{display:none}
@media(max-width:1000px){.topinner{grid-template-columns:minmax(150px,1fr) auto auto;gap:13px}.top-date{display:none}.masthead-inner{grid-template-columns:minmax(200px,260px) minmax(150px,210px) minmax(220px,1fr);gap:16px}.brand img{width:250px}.header-slogan{font-size:32px}.navinner{gap:16px;padding:0 18px}}
@media(max-width:700px){body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}.topline{background:#FFF7FA}.topinner{min-height:35px;display:flex;justify-content:center;gap:0;font-size:10px}.top-latest,.top-links,.top-subscribe{display:none}.top-date{display:block}.masthead{min-height:0;padding:0;background:#FFF4F8;border-bottom:1px solid #F0E0E9}.masthead-inner{min-height:0;display:grid;grid-template-columns:1fr;gap:8px;padding:10px 0 12px}.brand{justify-self:start}.brand img{width:185px;height:48px}.header-slogan,.main-nav{display:none}.search{grid-column:1;grid-row:2;max-width:none}.search input{height:42px;padding-left:14px}.search button{top:4px;right:4px;width:34px;height:34px}.mobile-app-nav{position:fixed;z-index:1000;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #DCE5F1;box-shadow:0 -6px 22px rgba(15,36,69,.09);backdrop-filter:blur(12px)}.mobile-app-nav a{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#314663;padding:2px 1px}.mobile-app-nav .mobile-app-icon{font-size:20px;line-height:1.1;color:#244B94}.mobile-app-nav small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:650;line-height:1.2}.mobile-app-nav a[aria-current="page"]{color:#D81B76}.mobile-app-nav a[aria-current="page"] .mobile-app-icon{color:#D81B76}}
@media(max-width:380px){.wrap{width:calc(100% - 24px)}.brand img{width:170px}.mobile-app-nav small{font-size:9px}}

/* H View header spacing and full-width correction */
.topline,
.site-header {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}

.masthead {
  width: 100%;
  max-width: none;
  min-height: 160px;
  margin: 0;
  background-image: url('/assets/header-workspace-bg.jpg');
  background-position: center 56%;
  background-size: cover;
}

.masthead-inner {
  min-height: 160px;
  gap: 14px;
}

@media (max-width: 1000px) {
  .masthead-inner {
    min-height: 150px;
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .masthead {
    min-height: 0;
  }

  .masthead-inner {
    min-height: 0;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

/* Remove the blank gap between the header and page hero */
.site-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.site-header + .mobile-app-nav + main.wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.site-header + .mobile-app-nav + main.wrap > :first-child {
  margin-top: 0 !important;
}

/* Restore the compact mobile header */
@media (max-width: 700px) {
  .topline,
  .site-header {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
  }

  .masthead {
    min-height: 0;
    padding: 0;
    background-color: #FFF4F8 !important;
    background-image: none !important;
  }

  .masthead-inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 0 12px;
  }

  .brand img {
    width: 185px;
    height: 48px;
  }

  .header-slogan,
  .main-nav {
    display: none;
  }

  .search {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }
}
