:root{
    --bg: #F7F3EA;
    --bg-alt: #F1EBDD;
    --text: #1B1B1B;
    --muted: #5A5A5A;
    --border: #E6DDCF;
    --accent: #1F4D3A;
  
    --radius: 14px;
    --max: 720px;
    --pad-x: 24px;
    --sec-y: 56px;

    --header-bg: #1E3B22;   /* logo green */
    --header-text: #F7F3EA;
    --accent: #1F4D3A;
  }
  
  @media (min-width: 900px){
    :root{ --sec-y: 72px; }
  }
  
  *{ box-sizing: border-box; }
  
  body{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  
  @media (min-width: 900px){
    body{ font-size: 18px; }
  }
  
  a{ color: var(--accent); text-decoration: none; }
  a:hover{ text-decoration: underline; }
  
  .wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }

  /* Paper grain overlay */
  .paper-grain{
    position: relative;
  }
  
  .paper-grain::after{
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.35;
  }
  
  
  /* Header */
  header{
    background: var(--header-bg);
    color: var(--header-text);
    padding: 22px 0;
  }
  
  .brand{
    display: flex;
    align-items: center;
    gap: 18px;
  }
  
  .logo{
    width: 100px;
    height: 100px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: none;
  }
  
  .logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .brand-title{
    font-family: "Libre Baskerville", Georgia, serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    margin: 0;
    color: var(--header-text);
  }
  
  .brand-sub{
    margin: 6px 0 0 0;
    font-size: 16px;
    color: rgba(247,243,234,0.8);
  }  

  @media (max-width: 600px){
    .logo{
      width: 72px;
      height: 72px;
    }
  
    .brand-title{
      font-size: 22px;
    }
  
    .brand-sub{
      font-size: 14px;
    }
  }
  
  
  /* Sections */
  section{ padding: var(--sec-y) 0; }
  section + section{ border-top: 1px solid rgba(0,0,0,0.04); }
  
  .section-alt{
    background: var(--bg-alt);
  }

  .section-alt.paper-grain::after{
    opacity: 0.45;
  }
  

  h1, h2{
    font-family: "Libre Baskerville", Georgia, serif;
    margin: 0 0 12px 0;
    line-height: 1.15;
  }
  
  h1{
    font-size: 34px;
  }
  
  @media (min-width: 900px){
    h1{ font-size: 46px; }
  }
  
  h2{
    font-size: 22px;
  }
  
  @media (min-width: 900px){
    h2{ font-size: 24px; }
  }
  
  .lead{
    font-size: 18px;
    margin-bottom: 18px;
  }
  
  .muted{
    color: var(--muted);
    margin-top: 10px;
  }
  
  ul{
    padding-left: 18px;
  }
  
  li{
    margin: 8px 0;
  }
  
  /* Cards & CTA */
  .card{
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
  }
  
  .cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 600;
    min-height: 48px;
  }
  
  .cta:hover{ filter: brightness(1.03); }
  
  /* Layout helpers */
  .stack{
    display: grid;
    gap: 14px;
  }
  
  /* Hero layout */
  .hero{
    display: block;
  }
  
  .hero-image{
    display: none;
  }
  
  @media (min-width: 900px){
    .hero{
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 48px;
      align-items: start; /* nicer than center */
    }
  
    .hero-image{
      display: block;
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
      aspect-ratio: 4 / 5; /* keep yours for now */
    }
  
    .hero-image img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.9) contrast(0.95);
      position: relative;
      z-index: 0;
      display: block;
      opacity: 0;
      transition: opacity 600ms ease-out;
    }

    .hero-image img.is-loaded{
      opacity: 1;
    }
  
    /* left-to-right fade (behind credit) */
    .hero-image::after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to left,
        rgba(247,243,234,0.0),
        rgba(247,243,234,0.55)
      );
      z-index: 1;
      pointer-events: none;
    }
  
    /* optional bottom fade for credit readability */
    .hero-image::before{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.28)
      );
      z-index: 2;
      pointer-events: none;
    }
  
    .image-credit{
      position: absolute;
      bottom: 10px;
      left: 12px;
      right: 12px;
      z-index: 3; /* above overlays */
    }
  }
  
  /* Image attribution (base styles) */
  .image-credit{
    font-size: 12px;
    line-height: 1.4;
    color: rgba(247,243,234,0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25)
  }
  
  
  .image-credit strong{
    font-weight: 700;
  }
  
  .image-credit .ig{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(247,243,234,0.85);
  }
  
  .image-credit svg{
    width: 14px;
    height: 14px;
    fill: currentColor;
  }

  .image-credit a{
    color: rgba(247,243,234,0.9);
    text-decoration: none;
    border-bottom: 1px solid rgba(247,243,234,0.35);
    padding-bottom: 1px;
  }
  
  .image-credit a:hover{
    border-bottom-color: rgba(247,243,234,0.75);
  }
  
  .image-credit a:focus-visible{
    outline: 2px solid rgba(247,243,234,0.6);
    outline-offset: 2px;
  }
  
  /* Footer */
  footer{
    background: var(--header-bg);
    color: var(--header-text);
    padding: 32px 0;
    font-size: 14px;
    border-top: 1px solid rgba(247,243,234,0.15);
  }
  
  footer p{
    margin: 0;
    color: rgba(247,243,234,0.85);
  }
  
  footer a{
    color: var(--header-text);
    text-decoration: underline;
  }
  
  footer a:hover{
    text-decoration: none;
  }
  
  
  /* Full-width hero override */
  .hero-wrap{
    max-width: 1200px;   /* wider than body text */
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  
  @media (min-width: 900px){
    .hero{
      grid-template-columns: minmax(0, 760px) minmax(320px, 1fr);
      gap: 72px;
    }
  }
  
  /* .hero .card{
    max-width: 420px;
  } */