:root{
    --sage:#7A8C6E;
    --sage-light:#B8C9A8;
    --sage-dark:#4A5C3E;
    --stone:#C8BFA8;
    --stone-light:#F0EBE0;
    --stone-dark:#8A7D68;
    --charcoal:#2A2A26;
    --off-white:#F7F4EE;
    --warm-white:#FDFAF5;
    --terra:#C4673A;
    --terra-light:#E8A882;
    --terra-dark:#8C4220;

    --ink:var(--charcoal);
    --paper:var(--off-white);
    --moss:var(--sage);
    --brass:var(--terra);
    --paper-dim:rgba(247,244,238,0.72);
    --hair:rgba(247,244,238,0.2);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'DM Sans', ui-sans-serif, system-ui, sans-serif;
    min-height:100%;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }

  /* Generated abstract botanical texture standing in for the studio's photo.
     Swap the <svg> below for an <img src="..."> of the real photograph
     when it's ready — the .blur-layer class already does the blurring. */
  .bg{
    position:fixed;
    inset:0;
    z-index:0;
  }
  .blur-layer{
    position:absolute;
    inset:-6%;
    width:112%;
    height:112%;
    filter:blur(14px) saturate(112%);
  }
  .bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(18,32,26,0.35) 0%, rgba(18,32,26,0.55) 55%, rgba(18,32,26,0.88) 100%);
  }

  main{
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8vh 6vw;
  }
  .kicker{
    display:inline-flex;
    align-items:center;
    gap:0.7rem;
    font-size:3rem;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--terra-light);
    margin-bottom:1.6rem;
  }
  
  h1{
    font-family:'Cormorant Garamond', Georgia, serif;
    font-weight:600;
    font-size:clamp(3.2rem, 11vw, 7.2rem);
    line-height:1.02;
    letter-spacing:0.01em;
  }
  h1 em{
    font-style:italic;
    font-weight:500;
    color:var(--sage-light);
  }
  .sub{
    margin-top:1.6rem;
    max-width:34ch;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--paper-dim);
  }

  footer{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
    padding:2rem 6vw calc(2rem + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--hair);
    font-size:0.92rem;
    color:var(--paper-dim);
  }
  footer a{
    color:var(--paper);
    text-decoration:none;
    border-bottom:1px solid var(--moss);
    padding-bottom:1px;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  footer a:hover, footer a:focus-visible{
    color:var(--terra-light);
    border-color:var(--terra-light);
  }
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--terra-light);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: no-preference){
    h1{ animation:rise 0.9s cubic-bezier(.2,.8,.2,1) both; }
    .sub{ animation:rise 0.9s cubic-bezier(.2,.8,.2,1) 0.12s both; }
    .kicker{ animation:rise 0.9s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes rise{
      from{ opacity:0; transform:translateY(10px); }
      to{ opacity:1; transform:translateY(0); }
    }
  }

  @media (max-width:480px){
    footer{ font-size:0.85rem; }
  }