/* Desktop shell: one shared centered column, Roman side framing, and
   unclipped program cards. Every visual change lives in min-width: 900px
   so the 390/375 phone layout stays pixel-identical. Nav icons, IAP and
   copy are not touched. */

/* Groups the back button and logo. Neutral on the phone, where only one
   of them is shown at a time, so the header metrics do not change. */
.top-start{display:flex;align-items:center;gap:8px;min-width:0}

@media (min-width:900px){
  :root{--ff-col:1160px}

  html{background:#0a0806}

  /* Soften the tiled stone in the gutters and add a dark Roman field. */
  body{
    background-color:#0a0806;
    background-image:
      linear-gradient(90deg,rgba(8,6,4,.86) 0%,rgba(8,6,4,.55) 14%,rgba(8,6,4,.22) 28%,rgba(8,6,4,.22) 72%,rgba(8,6,4,.55) 86%,rgba(8,6,4,.86) 100%),
      linear-gradient(rgba(10,8,6,.4),rgba(10,8,6,.58)),
      url(img/roman/stone-dark.jpg);
    background-size:auto,auto,384px 384px;
    background-attachment:fixed;
  }

  /* Gold pilasters and a darker wash outside the shared column. */
  body:before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,#7a5a1a,#e8cf8a 12%,#c9a24a 50%,#e8cf8a 88%,#7a5a1a) calc(50% - min(var(--ff-col),calc(100% - 48px)) / 2 - 8px) 0 / 3px 100% no-repeat,
      linear-gradient(180deg,#7a5a1a,#e8cf8a 12%,#c9a24a 50%,#e8cf8a 88%,#7a5a1a) calc(50% + min(var(--ff-col),calc(100% - 48px)) / 2 + 5px) 0 / 3px 100% no-repeat,
      linear-gradient(90deg,
        rgba(8,6,4,.9),
        rgba(8,6,4,.62) calc(50% - min(var(--ff-col),calc(100% - 48px)) / 2 - 36px),
        transparent calc(50% - min(var(--ff-col),calc(100% - 48px)) / 2),
        transparent calc(50% + min(var(--ff-col),calc(100% - 48px)) / 2),
        rgba(8,6,4,.62) calc(50% + min(var(--ff-col),calc(100% - 48px)) / 2 + 36px),
        rgba(8,6,4,.9));
  }

  /* Slim gold frame just outside the column, with a faint bronze rail. */
  body:after{
    content:"";
    position:fixed;
    top:0;bottom:0;
    left:50%;
    width:min(var(--ff-col),calc(100% - 48px));
    transform:translateX(-50%);
    z-index:1;
    pointer-events:none;
    border-left:1px solid rgba(232,207,138,.5);
    border-right:1px solid rgba(232,207,138,.5);
    box-shadow:
      -7px 0 0 0 rgba(201,162,74,.14),
      7px 0 0 0 rgba(201,162,74,.14),
      -8px 0 0 0 rgba(22,17,10,.92),
      8px 0 0 0 rgba(22,17,10,.92),
      -28px 0 48px rgba(0,0,0,.45),
      28px 0 48px rgba(0,0,0,.45);
  }

  header.top,
  #nfbar.nfbar,
  main,
  #nav.tabs,
  #cta.cta{
    width:100%;
    max-width:min(var(--ff-col),calc(100% - 48px));
    margin-left:auto;
    margin-right:auto;
  }
  #nfbar.nfbar,
  main{
    position:relative;
    z-index:2;
  }
  #nfbar.nfbar{
    margin-top:12px;
    margin-bottom:2px;
    box-sizing:border-box;
  }
  header.top,
  #nav.tabs,
  #cta.cta{
    border-left:1px solid rgba(201,162,74,.28);
    border-right:1px solid rgba(201,162,74,.28);
  }
  #nav.tabs,
  #cta.cta{
    left:0;
    right:0;
  }

  /* Every membership / goal card is fully visible. 3–4 columns as width allows. */
  .car{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:16px;
    overflow:visible;
    scroll-snap-type:none;
    padding:0 16px 12px;
  }
  .car>div{
    flex:none;
    max-width:none;
    width:auto;
  }

  /* Programs tab and other card grids: 3–4 columns so every tier is on screen. */
  .grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

  .obc{max-width:min(840px,calc(100% - 48px))}
  .obimg{height:auto;max-height:420px;width:100%;object-fit:cover;object-position:50% 30%}

  .home-hero{min-height:680px}
  .home-hero-art img{width:min(110%,880px)}

  /* Program pages at 1440x900: the sticky Join bar was covering the
     membership block (Tiro) and the compare heading (Praetorian).
     Shorten the hero and keep a bottom scroll offset so both sit fully
     above the bar. Phone rules stay in roman-nav.css. */
  html{scroll-padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))}
  .phero:not(.under){min-height:300px}
  .phero:not(.under) .ptxt{padding-top:96px}
  .panel,.upcard{scroll-margin-bottom:calc(130px + env(safe-area-inset-bottom,0px))}

  .tcmp{min-width:0;width:100%}
  .tcmp th,.tcmp td{padding:10px 8px}

  /* Eight tabs share the column evenly. roman-nav caps each tab at 140px from 800px up. */
  #nav.tabs{padding-left:8px;padding-right:8px}
  #nav.tabs a{max-width:none;letter-spacing:.06em;font-size:10px}

  /* Bible scroll reader stays a readable column inside the 1160px shell. */
  .bb-read{max-width:760px;margin-left:auto;margin-right:auto}
}