/* =========================
   Base / Reset
   ========================= */
   * { margin: 0; padding: 0; box-sizing: border-box; }

   :root{
     --ink:  #2C2C2C;
     --bg:   #FAF9F6;
     --green:#2F4F4F;
     --muted:#9CA596;
     --sand: #F5E2B8;
     --rust: #A65D3E;
     --shadow: 0 6px 14px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
     --shadow-hover: 0 10px 20px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.08);
   }
   
   html, body { height: 100%; }
   
   /* Make page fill the screen and push footer to bottom */
   body{
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     background: var(--bg);
     color: var(--ink);
     font-family: "TT Norms", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     letter-spacing: .018em; /* subtle tracking */
   }
   
   /* =========================
      Local Fonts (put files in /fonts)
      ========================= */
   @font-face{
     font-family: "La Luxes Serif";
     src: url("fonts/LaLuxesSerif-Regular.woff2") format("woff2");
     font-weight: 400; font-style: normal; font-display: swap;
   }
   @font-face{
     font-family: "TT Norms";
     src: url("fonts/TTNorms-Regular.woff2") format("woff2");
     font-weight: 400; font-style: normal; font-display: swap;
   }
   @font-face{
     font-family: "TT Norms";
     src: url("fonts/TTNorms-Medium.woff2") format("woff2");
     font-weight: 500; font-style: normal; font-display: swap;
   }
   @font-face{
     font-family: "La Luxes Script";
     src: url("fonts/la-luxes-script.woff2") format("woff2");
     font-weight: 400; font-style: normal; font-display: swap;
   }
   
   /* =========================
      Header (center logo, role right on desktop)
      ========================= */
   .ps-header{ padding: 18px 16px; }
   
   .ps-header__inner{
     max-width: 1120px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr auto 1fr; /* spacer | logo | role */
     align-items: center;
     gap: 12px;
   }
   
   .ps-header__spacer{ width: 1px; height: 1px; }
   
   /* Home link around logo */
   .ps-home{
     justify-self: center;
     display: inline-block;
     line-height: 0;
   }
   .ps-home:focus-visible{
     outline: 3px solid rgba(47,79,79,.35);
     border-radius: 6px;
   }
   
   .ps-logo{
     width: 90px; height: auto; display: block;
   }
   
   /* ROLE IN HEADER — Title Case (not all caps) */
   .ps-role{
     justify-self: end;
     text-align: right;
     text-transform: capitalize !important;
     font-size: .92rem;
     color: #223b3b;
     letter-spacing: .06em;
     line-height: 1.3;
   }
   
   /* =========================
      Hero (takes remaining height)
      ========================= */
   .ps-hero{ padding: 28px 16px; flex: 1; }
   
   .ps-grid{
     max-width: 1120px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: minmax(380px, 1fr) 420px; /* LEFT | RIGHT */
     gap: 56px;
     align-items: center;
   }
   
   /* LEFT column: image + H1 + script name (centered) */
   .ps-left{
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   }
   
   .ps-photo{
     width: 100%;
     max-width: 300px;
     height: auto;
     object-fit: contain;
     border-radius: 0; /* keep PNG shape */
     display: block;
     margin-bottom: 16px;
   }
   
   /* H1 — La Luxes Serif, centered, Title Case */
   .ps-title{
     font-family: "La Luxes Serif", serif;
     font-weight: 400;
     font-size: clamp(1.8rem, 1.1vw + 1rem, 2.2rem);
     line-height: 1.22;
     text-transform: none !important;
     font-variant-caps: normal;
     font-feature-settings: "smcp" 0, "c2sc" 0, "case" 0, "titl" 0;
     margin: 0 0 10px 0;
   }
   
   /* Script name — large */
   .ps-name{
     font-family: "La Luxes Script", cursive;
     font-weight: 400;
     font-size: clamp(2.6rem, 2.2vw + 1.2rem, 3.2rem);
     line-height: 1.06;
     letter-spacing: 0;
     color: #2b2b2b;
     margin-bottom: 12px;
   }
   
   /* RIGHT column: stacked buttons */
   .ps-right{
     width: 100%;
     max-width: 420px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     justify-self: center;
   }
   
   /* =========================
      Buttons – remove borders, use light modern shadow
      ========================= */
   .ps-btn{
     display: block;
     width: 100%;
     padding: 14px 16px;
     text-align: center;
     font-family: "TT Norms", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: .14em;
     border: none;                     /* ← no border */
     border-radius: 6px;               /* subtle rounding for modern look */
     box-shadow: var(--shadow);        /* light shadow */
     text-decoration: none;
     transition: background-color .25s, color .25s, box-shadow .25s, transform .15s;
   }
   .ps-btn:hover{
     box-shadow: var(--shadow-hover);
     transform: translateY(-1px);
   }
   .ps-btn:active{
     transform: translateY(0);
   }
   .ps-btn:focus-visible{
     outline: none;
     box-shadow: 0 0 0 3px rgba(47,79,79,.25), var(--shadow);
   }
   
   /* Variants (backgrounds only now) */
   .ps-btn--dark{
     background: var(--green);
     color: #fff;
   }
   .ps-btn--light{
     background: var(--sand);
     color: var(--ink);
   }
   .ps-btn--accent{
     background: var(--rust);
     color: #fff;
   }
   
   /* =========================
      Footer (sticky bottom)
      ========================= */
   .ps-footer{
     background: var(--muted);
     color: #fff;
     padding: 16px;
   }
   
   .ps-footer__inner{
     max-width: 1120px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr auto 1fr; /* left | center | right */
     align-items: center;
     gap: 12px;
   }
   .ps-footer__inner > a:first-child{ justify-self: start;  text-align: left;  }
   .ps-footer__inner > span        { justify-self: center; text-align: center; }
   .ps-footer__inner > a:last-child{ justify-self: end;    text-align: right; }
   .ps-footer__inner a{
     color: #fff; text-decoration: none; opacity: .85;
   }
   .ps-footer__inner a:hover{ opacity: 1; }
   
   /* =========================
      Responsive (mobile-first centering)
      ========================= */
   @media (max-width: 700px){
     /* Header: single column, center both logo and role */
     .ps-header__inner{
       grid-template-columns: 1fr;
       place-items: center;
       text-align: center;
       row-gap: 8px;
     }
     .ps-header__spacer{ display: none; }
     .ps-home{ justify-self: center; }
     .ps-logo{ justify-self: center; }
     .ps-role{ justify-self: center; text-align: center; }
   
     /* Hero: stack columns and center everything */
     .ps-grid{
       grid-template-columns: 1fr;
       gap: 28px;
       justify-items: center;
     }
     .ps-right{
       max-width: 320px;
       margin: 0 auto;
       align-items: center;
       text-align: center;
     }
   
     .ps-photo{ max-width: 260px; }
     .ps-title{ font-size: clamp(1.7rem, 4.5vw, 2.1rem); }
     .ps-name{  font-size: clamp(2.2rem, 4.2vw, 2.6rem); }
   
     /* Footer: center items on separate rows */
     .ps-footer__inner{
       grid-template-columns: 1fr;
       text-align: center;
     }
     .ps-footer__inner > a:first-child,
     .ps-footer__inner > span,
     .ps-footer__inner > a:last-child{
       justify-self: center;
     }
   }