/* ================= Tablet and desktop layout ================= */
.railmenu{display:none}
.dtop .logo span{background:#c8323a;color:#fff}
.phero.phero{background-size:cover;background-position:center 35%;background-repeat:no-repeat}

/* tablets: wider single column, centered pop-ups */
@media (min-width:760px){
  .wrap{max-width:720px;padding-left:24px;padding-right:24px}
  .pnav .in,.phero .in,.tabbar .in{max-width:720px}
  .homehero,.shead{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
  .scopes{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
  .sheet{align-items:center;padding:24px}
  .panel{max-width:640px;max-height:86vh;border-radius:22px;padding-bottom:28px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
}

/* desktop: side navigation instead of the bottom bar */
@media (min-width:1024px){
  :root{--rail:284px}
  body{padding-left:var(--rail)}
  .tabbar{display:none}
  .railmenu{display:block;position:fixed;top:0;left:0;bottom:0;z-index:30;width:var(--rail);overflow-y:auto;overscroll-behavior:contain;padding:14px 12px 24px;background:var(--bg);border-right:1px solid var(--hair);scrollbar-width:thin}
  .railmenu .dclose{display:none}
  .railmenu .dtop .logo{cursor:pointer}
  .railmenu [aria-current="page"]{background:var(--seg);color:var(--ink)}

  .wrap{max-width:820px;padding:0 32px 64px}
  .pnav{left:var(--rail)}
  .pnav .in,.phero .in{max-width:820px}
  .phero .in{padding-left:32px;padding-right:32px}
  .homehero{margin:20px 0 0;border-radius:28px;padding:22px 30px 36px}
  .homehero .hello{font-size:44px;margin-top:64px;max-width:18ch}
  .shead{margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}
  .scopes{margin:12px 0 0;padding:0;flex-wrap:wrap;overflow:visible}
  .lhero,.lbanner{min-height:190px;padding:26px}
  .lhero h1,.lbanner h1{font-size:40px}
  .hamb,.wrap [data-menu]{display:none}
  .pnav [data-menu]{visibility:hidden}
  .dcol .rjump{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  /* story cards: a tidy grid instead of a sideways scroller */
  .carousel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;overflow:visible;margin:0;padding:2px 0 4px;scroll-snap-type:none}
  .carousel>*{max-width:none;min-width:0}
  .carousel .hcard{min-height:260px}
  #gloss{left:var(--rail);bottom:24px}
  /* pointer feedback */
  .row:hover,.group>button:hover,.group>a:hover{background:var(--seg)}
  .fakesearch:hover,.hcard:hover{filter:brightness(.98)}
  :focus-visible{outline:3px solid #2557a8;outline-offset:2px}
}

/* wide screens: pages use the full width, sections sit in two balanced columns */
@media (min-width:1240px){
  .wrap{max-width:1180px}
  .pnav .in,.phero .in{max-width:1180px}
  .dcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:start}
  .dcol{min-width:0}
  .dcol>.pe-card:first-child{margin-top:28px}
  .group.biglist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .group.biglist>.row::before{display:none}
  .group.biglist>.row{border-bottom:1px solid var(--hair)}
  .group.biglist>.row:nth-child(odd){border-right:1px solid var(--hair)}
}
@media (min-width:1500px){
  .wrap{max-width:1280px}
  .pnav .in,.phero .in{max-width:1280px}
}