:root{
      --bg: #ffffff;
      --surface: #fafafa;
      --text: #2b2b2b;
      --muted: #555555;
      --accent: #a66a2c;
      --accent-ink: #fff;
      --border: #ddd;
      --shadow: 0 6px 18px rgba(0,0,0,0.08);
      --radius-xl: 18px;
    }
    html, body { scroll-behavior: smooth; }
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:'Raleway',ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
      line-height:1.5;
    }
    header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,0.95);border-bottom:1px solid var(--border);}  
    .container{max-width:1100px;margin:auto;padding:20px;}
    .brand{display:flex;align-items:center;gap:14px;}
    .brand h1{font-family:'Playfair Display',serif;font-size:20px;letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--accent);} 
    nav{display:flex;gap:18px;}
    nav a{color:var(--text);text-decoration:none;font-size:14px;opacity:.8;}
    nav a:hover{opacity:1;color:var(--accent);} 

    /* ─── Hero ───────────────────────────────────────────────────────── */
    .hero{padding:38px 20px 18px;}
    .hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns: 600px 1fr;gap:24px;align-items:center;}/*Use stretch to bring the text to the top of the image-*/
    .portrait{width:600px;height:800px;border-radius:var(--radius-xl);
      background:url('images/15dfdb_df59750959d649f7bdccc1f71b5d8763~mv2_d_3264_4928_s_4_2.jpg') no-repeat center top / cover;
      box-shadow:0 10px 25px rgba(0,0,0,.12);
      border:1px solid var(--border);
      justify-self:start;
      opacity:0;transform:translateY(20px);animation:fadeInUp 1.2s ease forwards;
    }
    /* Add a small home icon before the 'Main' link */
#site-nav a[href="https://www.amandatroop.com"]::before {
  content: "🏠";        /* Unicode house icon */
  margin-right: 6px;    /* space between icon and text */
  font-size: 0.9em;     /* size of the icon */
  vertical-align: middle;
}

    /* Artistic Quotes - inline, no block styling */
    .quotes-wrap{display:flex;flex-direction:column;justify-content:stretch;gap:24px;}
    .quote-line{position:relative;padding-left:34px;}
    .quote-line::before{content:"\201C";position:absolute;left:0;top:-10px;font:900 50px/0.7 'Playfair Display',serif;color:rgba(166,106,44,0.2);} 
    .quote-text{font-family:'Literata',serif;font-size:clamp(17px,2vw,20px);line-height:1.5;letter-spacing:.2px;color:#1f1f1f;}
    .quote-source{margin-top:4px;font-family:'Raleway',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6a6a6a;display:inline-block;background:linear-gradient(90deg, rgba(166,106,44,.2), rgba(166,106,44,0));padding:6px 10px;border-radius:999px;}

    /* Lead paragraph under quotes */
    .hero-lead{margin-top:16px;font-family:'Raleway',sans-serif;font-weight:500;font-size:clamp(15px,2vw,18px);color:#333}

    /* Sections */
    .section{padding:18px 20px 20px;}
    .section h2{font-family:'Playfair Display',serif;font-size:clamp(20px,3vw,28px);margin:8px 0;color:var(--accent);} 
    .section p.lead{color:var(--muted);margin-top:0;} 

    /* Selected titles grid (hover overlay) */
    .sel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px;}
    @media (max-width: 900px){.sel-grid{grid-template-columns:repeat(2,1fr);} }
    @media (max-width: 520px){.sel-grid{grid-template-columns:1fr;} }
    .sel-card{position:relative;display:block;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow);} 
    .sel-card img{display:block;width:100%;height:320px;object-fit:cover;} 
    .sel-card .overlay{position:absolute;inset:0;background:rgba(0,0,0,.64);color:#fff;opacity:0;transition:opacity .25s ease;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;} 
    .sel-card:hover .overlay,.sel-card:focus .overlay{opacity:1;} 
    .sel-card .overlay h3{margin:0 0 6px;font-family:'Playfair Display',serif;font-size:18px;} 
    .sel-card .overlay p{margin:0 0 10px;font-size:14px;color:#e7e7e7;} 
    .sel-card .overlay .links span{font-weight:700;text-decoration:underline;} 

    /* Buttons */
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow);text-decoration:none;color:#2b2b2b;font-weight:600}
    .btn:hover{border-color:#c7c7c7;transform:translateY(-1px)}
    .btn .sub{font-weight:400;opacity:.7}

    /* Back to top */
    .to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:999px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);} 
    @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
    .to-top{animation:bounce 1.6s infinite;}

    /* Anim */
    @keyframes fadeInUp{to{opacity:1;transform:translateY(0);}}
  
/* === Responsive enhancements (injected) === */
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero-inner{
  display: grid;
  grid-template-columns: minmax(0, 600px) 1fr;
  gap: 24px;
  align-items: center;
}

.portrait{
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 4;
  height: auto;
  justify-self: start;
}

.sel-card img{
  height: clamp(220px, 35vw, 320px);
  object-fit: cover;
}

.nav-toggle{
  display: none;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 18px;
  line-height: 1;
  box-shadow: var(--shadow);
  cursor: pointer;
}
#site-nav{ display: flex; gap: 18px; }
#site-nav a{ padding: 8px 0; }

@media (max-width: 1024px){
  .container { padding: 16px; }
  .hero{ padding: 28px 16px 12px; }
}

@media (max-width: 768px){
  .nav-toggle{ display: inline-flex; }
  #site-nav{
    position: absolute;
    right: 16px;
    top: 64px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 10px 14px;
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 30;
  }
  #site-nav.open{ display: flex; }

  .hero-inner{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .portrait{ justify-self: center; }
  .quotes-wrap{ order: 2; }
}

@media (max-width: 480px){
  .container { padding: 14px; }
  .brand h1{ font-size: 18px; }
  nav a{ font-size: 15px; }
  .quote-text{ font-size: clamp(16px, 5vw, 18px); }
  .sel-grid{ gap: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .to-top{ animation: none; }
  .portrait{ animation: none; }
}
/* === End responsive enhancements === */