:root{
        --gap: 1rem;
        --card-bg: #ffffff;
      }
      html,body{
        height:100%;
        margin:0;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        background: linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%);
      }
      body{
        display:grid;
        grid-template-rows: auto 1fr auto;
        min-height:100vh;
        gap:var(--gap);
      }

      header.site-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0.75rem 1rem;
        background:transparent;
      }
      .brand{
        display:flex;
        align-items:center;
        gap:0.5rem;
      }
      .brand .logo{
        width:32px;
        height:32px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:var(--primary);
        color:#fff;
        border-radius:8px;
        font-weight:700;
        box-shadow:0 2px 6px rgba(13,110,253,0.15);
      }
      .brand .logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .brand .wordmark{
        font-size:1.125rem;
        font-weight:600;
        color:#0b1a2b;
      }

      main.site-main{
        display:grid;
        place-items:center;
        padding:2rem 1rem;
      }
      .content{
        width:100%;
        max-width:880px;
        display:grid;
        grid-template-rows: auto auto;
        gap:1.5rem;
        align-items:start;
      }

      .title-wrap{
        display:flex;
        flex-direction:column;
        gap:.75rem;
        align-items:center;
        text-align:center;
      }
      h1.page-title{
        margin:0;
        font-size:clamp(1.5rem, 3.2vw, 2.25rem);
        color:#0b1a2b;
        letter-spacing: -0.01em;
      }
      p.lead{
        margin:0;
        color:#334155;
        max-width:60ch;
      }

      .search-card{
        background:var(--card-bg);
        border-radius:12px;
        padding:1rem;
        box-shadow:0 6px 18px rgba(15,23,42,0.07);
      }
      form.search-form{
        display:flex;
        gap:.5rem;
        align-items:center;
      }
      .search-form .form-control{
        flex:1 1 auto;
        min-width:0;
      }
      .search-form .btn{
        flex:0 0 auto;
        white-space:nowrap;
      }

      @media (max-width:576px){
        .search-form{
          flex-direction:column;
          align-items:stretch;
        }
        .brand .wordmark{ display:none; } 
      }

      footer.site-footer{
        padding:0.5rem 1rem;
        text-align:center;
        color:#6b7280;
        font-size:.875rem;
      }