/* Shared left edge for hero, navigation, entrances and catalogue. */
:root { --page-gutter:5vw; }
.content { max-width:none; margin-inline:0; padding-inline:var(--page-gutter); }
header { padding-inline:var(--page-gutter); }
.hero { height:760px; min-height:740px; }
.hero-copy { left:var(--page-gutter); top:154px; padding-left:0; border-left:0; }
.hero .pagination { bottom:40px; }
.entries { margin-top:0; }
@media(max-width:1250px) { :root { --page-gutter:30px; } }
@media(max-width:800px) {
  :root { --page-gutter:22px; }
  .hero { height:800px; min-height:760px; }
  .hero-copy { top:170px; }
}
@media(max-width:520px) {
  :root { --page-gutter:18px; }
  .hero { height:850px; min-height:850px; }
  .hero-copy { top:210px; right:var(--page-gutter); }
  .hero .pagination { bottom:24px; }
  header { padding-inline:12px; }
}
@media(max-width:360px) { .hero { height:890px; min-height:890px; }.hero-copy { top:195px; } }

/*
 * 1080p desktop density
 *
 * A 1920-wide office display is spacious, but its usable browser height is
 * usually only 900-1000px. Keep the editorial scale without treating it like
 * a presentation wall. This intentionally keys off both width and height so
 * higher-resolution desktop displays retain the more expansive composition.
 */
@media (min-width:1280px) and (max-height:1080px) {
  body { font-size:14px; }

  .sidebar { width:172px; padding-top:24px; padding-bottom:24px; }
  .sidebar nav { margin-top:28px; gap:4px; }
  .sidebar nav button { min-height:40px; padding-block:10px; font-size:13px; }
  .collection { margin-top:18px; padding-top:18px; font-size:12px; }
  .sidebar-portals { margin-top:8px; padding-top:12px; }
  .sidebar-portals a { font-size:12px; padding-block:6px; }
  main { margin-left:172px; }
  header { left:172px; height:68px; }
  .top-tabs button { font-size:13px; }
  .account-entry { min-height:38px; padding:6px 12px; font-size:12px; }

  .hero { height:660px; min-height:640px; }
  .hero-copy { top:136px; width:min(560px,46%); }
  .hero .eyebrow { font-size:11px; }
  .hero h1 { max-width:620px; margin:24px 0 22px; font-size:58px; }
  .hero-copy>p { max-width:460px; margin-bottom:22px; font-size:14px; line-height:1.85; }
  .hero .meta>span { padding:5px 9px; font-size:11px; }
  .hero .actions { margin-top:20px; }
  .hero .actions button { min-height:42px; padding:10px 17px; font-size:13px; }
  .hero .credit { margin-top:21px; font-size:13px; }
  .hero .credit>span { width:30px; height:30px; font-size:13px; }
  .hero .credit small { font-size:11px; }
  .hero .pagination { bottom:30px; }

  .content { max-width:1580px; }
  .entries>button { padding:16px 15px; }
  .entries b { font-size:14px; }
  .entries small { font-size:12px; }
  .tile { width:38px; height:40px; font-size:18px; }

  .shelf { margin-top:58px; }
  .section-head { margin-bottom:22px; }
  .section-head h2 { font-size:26px; }
  .filters button { min-height:35px; font-size:12px; }
  .poster { height:300px; }
  .poster-card h3 { font-size:14px; }
  .poster-card>p { font-size:13px; }

  .dual { margin-top:56px; }
  .radio,.signal { min-height:320px; }
  .radio-copy h2 { font-size:26px; }
  .radio-copy p,.collab p,.section-note { font-size:14px; }
  .signal h3 { font-size:15px; }
  .signal small,.signal p,.signal>button>span { font-size:12px; }
  .story-image { height:160px; }
  .story-image>span { font-size:23px; }
  .story-copy h3 { font-size:14px; }

  .collab { margin-top:56px; padding:34px; }
  .collab h2 { font-size:27px; }
  .tech-community { margin-top:58px; padding:28px; }
  .tech-community h2 { font-size:34px; }
  .community-preview-card { padding:22px; }
  #articles,#projects,#collaborations { margin-top:54px; }
  .site-footer { margin-top:54px!important; padding-top:34px!important; }

}