/* =========================
   GT SECTRA — FONT SETUP
   ========================= */
   @font-face {
    font-family: "GT Sectra";
    src: url("../Font/GT-Sectra/GT-Sectra-Regular-Trial.woff2") format("woff2"),
         url("../Font/GT-Sectra/GT-Sectra-Regular-Trial.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "GT Sectra";
    src: url("../Font/GT-Sectra/GT-Sectra-Regular-Italic-Trial.woff2") format("woff2"),
         url("../Font/GT-Sectra/GT-Sectra-Regular-Italic-Trial.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  
  /* =========================
     RESET / BASE
     ========================= */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  img { max-width: 100%; height: auto; display: block; }
  
  :root{
    --page-pad: 2rem;
    --footer-h: 84px;
    --text: #000;
    --muted: rgba(0,0,0,0.68);
    --hairline: rgba(0,0,0,0.08);
  }
  
  body{
    font-family: "GT Sectra", "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.45;
    background: #fff;
    color: var(--text);
  
    /* leave room for sticky footer */
    padding-bottom: var(--footer-h);
  }
  
  /* typography defaults */
  p { margin: 0 0 1rem; }
  h1, h2, h3 { margin: 0 0 0.75rem; font-weight: 400; }
  em { font-style: italic; }
  small { font-size: 0.9em; }
  
  a{
    color: var(--text);
    text-decoration: none;
  }
  a:hover{
    opacity: 0.65;
  }
  
  /* =========================
     HEADER (shared)
     ========================= */
  .site-header{
    padding: var(--page-pad);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  
  .site-title{
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.05;
  }
  
  .site-title a{
    color: var(--text);
    text-decoration: none;
  }
  
  .site-title .home-link{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .site-favicon{
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
  
  .site-nav{
    display: flex;
    gap: 1rem;
    align-items: baseline;
  }
  
  .site-nav a{
    font-size: 1rem;
    letter-spacing: 0.01em;
  }
  
  /* =========================
     TYPOGRAPHY HELPERS
     ========================= */
  .grid-info{
    font-family: "GT Sectra", serif;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  .grid-info em{ opacity: 0.7; }
  
  /* =========================
     STICKY CONTACT BAR (shared)
     ========================= */
  .contact-bar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  
    padding: 1rem var(--page-pad);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--hairline);
    z-index: 9999;
  
    font-size: 0.85rem;
  }
  
  .contact-left{ letter-spacing: 0.02em; }
  
  .contact-right{
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .contact-right a:hover{
    font-style: italic;
    opacity: 1;
  }
  
  .dot{ opacity: 0.35; }
  
  /* =========================
     CURSOR (desktop only)
     ========================= */
  /* Use a SMALL PNG (16–32px) with transparent background.
     Path assumes: /css/base.css and /assets/cursor.png
  */
  @media (pointer: fine){
    html, body{
      cursor: url("../assets/cursor_1.png") 16 16, auto !important;
    }
  }
  
  /* =========================
     RESPONSIVE
     ========================= */
  @media (max-width: 768px){
    :root{
      --page-pad: 1.25rem;
      --footer-h: 112px;
    }
  
    .site-header{
      padding: 1rem var(--page-pad);
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      justify-content: space-between;
    }
  
    .site-title{
      width: 100%;
      font-size: 1.8rem;
    }
  
    .site-nav{
      width: 100%;
      display: flex;
      gap: 1rem;
      justify-content: flex-start;
    }
  
    .site-favicon{
      width: 18px;
      height: 18px;
    }
  
    .contact-bar{
      padding: 0.9rem var(--page-pad);
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      align-items: center;
      justify-content: space-between;
    }
  
    .contact-right{
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.6rem;
      align-items: center;
    }
  
    .dot{ opacity: 0.5; }
  }
  
  @media (max-width: 600px){
    .contact-bar{
      flex-direction: column;
      align-items: flex-start;
    }
  }