/* ==========================================================
   LAYOUT — GLOBAL STRUCTURE
   - Layout-only rules (container, generic page hero, spacing)
   - No :root tokens here (tokens live only in tokens.css)
========================================================== */


  /* ======================================================
     GLOBAL PAGE BACKGROUND (cream)
  ====================================================== */
  .site,
  .site-content,
  .site-main{
    background:var(--color-bg);
  }

  /* ======================================================
     CONTAINER
  ====================================================== */
  .container{
    width:90%;
    max-width:var(--container-max);
    margin:0 auto;
  }

  /* ======================================================
     SECTION DIVIDERS (REMOVED)
     - We keep position:relative (safe)
     - We remove the ::before divider line rules
  ====================================================== */
  .site-main > section,
  .site-main > div{
    position:relative;
  }

  /* ======================================================
     GENERIC PAGE HERO
  ====================================================== */
  .page-hero-simple{
    background:transparent;
    padding-top:var(--space-xl);
    padding-bottom:40px;
    text-align:center;
  }

  .page-title{
    font-family:var(--font-title);
    font-size:40px;
    font-weight:700;
    margin:0 0 10px;
    color:var(--color-dark);
  }

  .page-subtitle{
    font-size:18px;
    opacity:.90;
    margin:0;
    color:var(--color-text-main);
  }

  /* ======================================================
     RESPONSIVE GLOBAL SPACING
  ====================================================== */
  @media (max-width:600px){

    section{
      padding-top:60px;
      padding-bottom:60px;
    }

    .page-title{font-size:32px;}

    .container{
      width:100%;
      max-width:100%;
      padding-left:16px;
      padding-right:16px;
    }
  }