/* ==========================================================================
   I Am Here — theme styles for Penny Burgess
   ========================================================================== */

:root{
  --cream:#F7EFE1;
  --sand:#F0E3CC;
  --sand-warm:#e7cdba;
  --teal:#1F6E6A;
  --teal-deep:#154E4B;
  --mustard:#E8A93A;
  --brick:#C7502F;
  --brick-dark:#a83f23;
  --plum:#8E4B6E;
  --ink:#2B2320;
  --ink-soft:#5A4E45;
  --muted:#9c8f82;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:18px;}

body{
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}

.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(1.25rem,5vw,4rem);}

/* ---------- NAV ---------- */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.6rem clamp(1.25rem,5vw,4rem);
  position:relative;
  z-index:20;
}
.site-brand{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:1.4rem;
  letter-spacing:-0.01em;
  color:var(--teal-deep);
}
.nav-links{
  display:flex;
  gap:clamp(1rem,2.5vw,2.2rem);
  align-items:center;
}
/* note 7: nav uses the body font, not the serif */
.nav-links a{
  font-family:'Space Grotesk',sans-serif;
  font-size:0.95rem;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .18s ease;
}
.nav-links a:hover{color:var(--brick);}
.nav-cta{
  background:var(--teal);
  color:var(--cream)!important;
  padding:0.5rem 1.1rem;
  border-radius:999px;
  font-weight:600;
  transition:background .18s ease,transform .18s ease;
}
.nav-cta:hover{background:var(--teal-deep);transform:translateY(-1px);}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--teal-deep);}

/* ---------- HERO ---------- */
.hero{
  padding:clamp(2.5rem,7vw,5.5rem) clamp(1.25rem,5vw,4rem) clamp(3.5rem,9vw,7rem);
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}
.hero h1{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:clamp(2.4rem,6.5vw,4.6rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--teal-deep);
  max-width:16ch;
  margin:0 auto 1.6rem;
}
.hero h1 .swash{font-style:italic;font-weight:500;color:var(--brick);}
.hero .sub{
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--ink-soft);
  max-width:50ch;
  margin:0 auto 2.6rem;
  line-height:1.55;
}

/* winding path */
.path-wrap{max-width:640px;margin:0 auto 2.8rem;padding:0 1rem;}
.path-wrap svg{width:100%;height:auto;display:block;overflow:visible;}
.route-line{
  fill:none;stroke:var(--mustard);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:9 12;animation:dash 40s linear infinite;
}
@keyframes dash{to{stroke-dashoffset:-900;}}
@media (prefers-reduced-motion:reduce){.route-line{animation:none;}}
.pin{fill:var(--brick);}
.start-dot{fill:var(--teal);}

/* signup */
.signup-form{display:flex;gap:0.6rem;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.signup-form input{
  flex:1;min-width:220px;padding:0.85rem 1.1rem;
  border:2px solid var(--teal);border-radius:999px;
  font-family:inherit;font-size:1rem;background:var(--cream);color:var(--ink);
}
.signup-form input::placeholder{color:var(--muted);}
.signup-form input:focus{outline:none;border-color:var(--brick);box-shadow:0 0 0 3px rgba(199,80,47,0.15);}
.signup-form button{
  padding:0.85rem 1.6rem;background:var(--brick);color:var(--cream);
  border:none;border-radius:999px;font-family:inherit;font-weight:600;font-size:1rem;
  cursor:pointer;transition:background .18s ease,transform .18s ease;
}
.signup-form button:hover{background:var(--brick-dark);transform:translateY(-1px);}
.signup-note{text-align:center;font-size:0.85rem;color:var(--ink-soft);margin-top:0.9rem;}

/* ---------- ODD ONE OUT SECTION ---------- */
.oddone{
  background:var(--teal-deep);
  color:var(--sand);
  padding:clamp(3rem,7vw,5rem) clamp(1.25rem,5vw,4rem);
}
.oddone-inner{max-width:640px;margin:0 auto;text-align:center;}
.oddone h2{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.8rem,4.5vw,2.8rem);
  line-height:1.1;
  letter-spacing:-0.01em;
  color:#fff;
  margin-bottom:1.6rem;
}
.oddone p{
  font-size:clamp(1rem,2vw,1.15rem);
  line-height:1.65;
  margin-bottom:1.1rem;
  color:var(--sand);
}
.oddone p:last-child{margin-bottom:0;}

/* ---------- POST LIST (blog/advice) ---------- */
.post-feed{padding:clamp(2.5rem,6vw,4rem) 0;}
.feed-title{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1.5rem;color:var(--teal-deep);
  margin-bottom:2rem;padding-bottom:0.8rem;border-bottom:2px solid var(--sand);
}
.post-card{
  display:flex;gap:1.5rem;padding:1.8rem 0;
  border-bottom:1px solid var(--sand);align-items:flex-start;
}
.post-card:last-child{border-bottom:none;}
.post-card-image{flex:0 0 220px;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--sand);}
.post-card-image img{width:100%;height:100%;object-fit:cover;}
.post-card-content{flex:1;}
.post-card h2{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.4rem;
  color:var(--teal-deep);line-height:1.2;margin-bottom:0.5rem;
}
.post-card h2 a:hover{color:var(--brick);}
.post-card .excerpt{color:var(--ink-soft);font-size:1rem;margin-bottom:0.7rem;line-height:1.55;}
.post-card .meta{font-size:0.85rem;color:var(--muted);}

/* ---------- SINGLE POST / PAGE ---------- */
.post-full{padding:clamp(2.5rem,6vw,4rem) 0;}
.post-full-header{max-width:720px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center;}
.post-full-title{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;letter-spacing:-0.02em;
  color:var(--teal-deep);margin-bottom:1rem;
}
.post-full-meta{font-size:0.9rem;color:var(--muted);}
.post-full-image{max-width:1100px;margin:0 auto clamp(2rem,4vw,3rem);border-radius:12px;overflow:hidden;}
.post-content{max-width:680px;margin:0 auto;font-size:1.12rem;line-height:1.75;color:var(--ink);}
.post-content h2,.post-content h3{
  font-family:'Fraunces',Georgia,serif;color:var(--teal-deep);
  margin:2rem 0 0.8rem;line-height:1.2;
}
.post-content h2{font-size:1.7rem;}
.post-content h3{font-size:1.35rem;}
.post-content p{margin-bottom:1.4rem;}
.post-content a{color:var(--brick);text-decoration:underline;text-underline-offset:2px;}
.post-content a:hover{color:var(--brick-dark);}
.post-content blockquote{
  border-left:3px solid var(--mustard);padding-left:1.2rem;margin:1.6rem 0;
  font-style:italic;color:var(--ink-soft);
}
.post-content img{border-radius:10px;margin:1.6rem 0;}
.post-content ul,.post-content ol{margin:0 0 1.4rem 1.4rem;}
.post-content li{margin-bottom:0.5rem;}

/* ---------- KOENIG EDITOR CONTENT CARDS ---------- */
.post-content .kg-width-wide{
  position:relative;
  width:75vw;
  min-width:100%;
  margin-left:calc(50% - 50vw);
  transform:translateX(calc(50vw - 50%));
  max-width:1100px;
}
.post-content .kg-width-full{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  max-width:none;
}
.post-content .kg-width-full img{border-radius:0;}
.kg-image{margin-left:auto;margin-right:auto;}
figure.kg-card{margin:1.6rem 0;}
.kg-card figcaption{text-align:center;font-size:0.85rem;color:var(--muted);padding-top:0.6rem;}

.kg-bookmark-card{width:100%;margin:1.6rem 0;}
.kg-bookmark-container{
  display:flex;border:1px solid var(--sand);border-radius:10px;overflow:hidden;
  color:var(--ink);text-decoration:none;
}
.kg-bookmark-content{flex:1;padding:1rem 1.2rem;}
.kg-bookmark-title{font-weight:600;color:var(--teal-deep);}
.kg-bookmark-description{color:var(--ink-soft);font-size:0.9rem;margin-top:0.3rem;}
.kg-bookmark-thumbnail{flex:0 0 30%;}
.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover;}

.kg-gallery-container{display:flex;flex-direction:column;gap:0.6rem;margin:1.6rem 0;}
.kg-gallery-row{display:flex;gap:0.6rem;}
.kg-gallery-image img{width:100%;height:100%;object-fit:cover;border-radius:8px;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--sand);padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,4rem) 2.5rem;text-align:center;}
.footer-brand{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.3rem;color:var(--teal-deep);margin-bottom:1.1rem;}
.footer-links{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem;}
.footer-links a{font-family:'Space Grotesk',sans-serif;font-weight:500;color:var(--ink-soft);transition:color .16s ease;}
.footer-links a:hover{color:var(--brick);}
.footer-fine{font-size:0.82rem;color:var(--muted);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .post-card{flex-direction:column;}
  .post-card-image{flex:none;width:100%;}
}
@media (max-width:640px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--cream);flex-direction:column;gap:1.2rem;padding:1.5rem;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
  }
  .nav-links.open{display:flex;}
  .menu-toggle{display:block;}
}