.logo{font-size:54px;letter-spacing:-4px;white-space:nowrap;line-height:1}
.logo span{margin-left:.16em}
body>header{height:104px}
body>header small{margin-left:28px}
@media(max-width:800px){.logo{font-size:34px;letter-spacing:-2.5px}body>header{height:70px;padding:0 14px}.menu{flex:0 0 auto;margin-left:12px}body>footer .logo{font-size:34px;white-space:normal}}
@media(max-width:800px){.hero{height:58svh;min-height:455px}.hero-copy{bottom:42px}.hero-copy h1{font-size:27px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:11px 0 8px}.hero-copy>p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 10px}.hero-copy footer{margin-top:12px}.feed{padding-top:92px}.feed>h2{font-size:54px;line-height:.78;top:18px}.intro{margin:5px 0 24px}.card>a>div,.card.tall>a>div,.card.short>a>div{height:220px}.card:nth-child(3n)>a>div{height:270px}}
.search-link{margin-left:auto;color:inherit;text-decoration:none;font-size:28px;line-height:1}.search-link+.menu{margin-left:14px}
@media(max-width:800px){body>header .logo{min-width:0;max-width:calc(100% - 108px);overflow:hidden;text-overflow:ellipsis;font-size:30px;letter-spacing:-2.3px}body>header .search-link{flex:0 0 40px;width:40px;height:40px;margin-left:auto;display:grid;place-items:center;font-size:38px;font-family:Arial,sans-serif;font-weight:700;line-height:1}body>header .search-link+.menu{flex:0 0 40px;width:40px;height:40px;margin-left:5px}}
@media(max-width:390px){body>header .logo{font-size:27px;max-width:calc(100% - 100px)}body>header .search-link{flex-basis:38px;width:38px;height:38px;font-size:36px}body>header .search-link+.menu{flex-basis:38px;width:38px;height:38px}}
.drawer{visibility:hidden;pointer-events:none;overflow:hidden}
.drawer.on{visibility:visible;pointer-events:auto}
@media(min-width:801px){body>header{mix-blend-mode:normal;background:transparent;color:#fff;box-shadow:none}body>header .logo b{color:#d9f45a}body>header .search-link{color:#071a2c}.member-actions a{background:#071a2c;border-color:#ffffff55;color:#fff}}
body>header .logo,body>header>small{-webkit-text-stroke:.75px #071a2c;paint-order:stroke fill;text-shadow:0 2px 5px #0009}
@media(min-width:801px){.feed-grid{gap:20px}.feed-column{display:flex;flex-direction:column;gap:22px}.feed-grid .card{transform:none}}
@media(max-width:800px){.feed-column{display:flex;flex-direction:column;gap:16px}.feed-grid .card{transform:none}}
@media(min-width:801px){.feed{padding-top:285px}.feed .intro{position:relative;z-index:2;margin:8px 0 55px}.trend>div>small,.section-head small,.video-copy>small{display:block;position:relative;z-index:2;margin-bottom:12px}}
@media(max-width:800px){.feed{padding-top:125px}.feed .intro{position:relative;z-index:2;margin:12px 0 30px}.trend>div>small,.section-head small,.video-copy>small{display:block;position:relative;z-index:2;margin-bottom:10px}}

/* Desktop masthead: keep the publication identity separate from hero imagery. */
@media (min-width: 801px) {
  html body {
    padding-top: 0;
  }

  html body > header {
    position: sticky;
    height: 112px;
    padding: 0 max(64px, calc((100vw - 1500px) / 2));
    color: #071a2c;
    background: rgba(247, 247, 244, 0.97);
    border-bottom: 1px solid rgba(7, 26, 44, 0.16);
    box-shadow: 0 10px 28px rgba(7, 26, 44, 0.08);
    mix-blend-mode: normal;
    backdrop-filter: blur(14px);
  }

  html body #top {
    scroll-margin-top: 112px;
  }

  html body > header .logo {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 14px;
    min-width: 430px;
    color: #071a2c;
    font-size: clamp(50px, 3vw, 60px);
    line-height: 0.82;
    letter-spacing: -4.5px;
    text-shadow: none;
    -webkit-text-stroke: 0;
  }

  html body > header .logo b {
    color: #071a2c;
    font-size: inherit;
    line-height: 0.82;
    letter-spacing: inherit;
  }

  html body > header .logo span {
    margin-left: 0;
    color: #65751d;
    font-size: 35px;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  html body > header > small {
    margin-left: 25px;
    padding-left: 25px;
    border-left-color: rgba(7, 26, 44, 0.24);
    color: #52606b;
    text-shadow: none;
    -webkit-text-stroke: 0;
  }

  html body > header .member-actions {
    position: static;
    margin: 0 0 0 auto;
    gap: 6px;
  }

  html body > header .member-actions a {
    padding: 7px 10px;
    border-color: rgba(7, 26, 44, 0.18);
    background: transparent;
    color: #071a2c;
  }

  html body > header .member-actions + .search-link {
    margin-left: 17px;
  }

  html body > header .search-link {
    color: #071a2c;
  }

  html body > header .menu {
    width: 46px;
    height: 46px;
    margin-left: 15px;
  }

  html body .hero .count {
    top: 32px;
  }

  html body .feed > h2 {
    top: 30px;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  html body > header {
    height: 104px;
    padding-right: 38px;
    padding-left: 38px;
  }

  html body #top {
    scroll-margin-top: 104px;
  }

  html body > header .logo {
    min-width: 370px;
    font-size: 44px;
  }

  html body > header > small {
    display: none;
  }
}

@media (max-width: 800px) {
  html body > header .logo {
    display: block;
    line-height: 1;
  }

  html body > header .logo b {
    color: #d9f45a;
    font-size: inherit;
    line-height: 1;
  }

  html body > header .logo span {
    margin-left: .16em;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    letter-spacing: inherit;
  }
}