/* The Thriving Senior — shared styles */
:root{
  --teal:#22676A;
  --teal-deep:#174B4D;
  --teal-mist:#E6F0EE;
  --leaf:#B9D46A;
  --sun:#E9B24A;
  --paper:#FBFAF5;
  --ink:#1F2B2B;
  --ink-soft:#4A5857;
  --radius:10px;
  --measure:68ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Atkinson Hyperlegible",Verdana,Arial,sans-serif;
  font-size:1.2rem;line-height:1.65;
}
img{max-width:100%;display:block}
a{color:var(--teal)}
a:hover{color:var(--teal-deep)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
h1,h2,h3{font-family:"Lora",Georgia,serif;font-weight:600;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.4rem)}
h3{font-size:1.45rem}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.5rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:10}

/* Header */
.site-header{background:var(--teal-deep);color:#fff}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.8rem;color:#fff;text-decoration:none}
.brand img{width:58px;height:58px;border-radius:50%;border:3px solid #fff;object-fit:cover}
.brand span{font-family:"Lora",Georgia,serif;font-size:1.45rem;font-weight:600}
.brand:hover{color:#fff}
.nav{display:flex;gap:.4rem;list-style:none;margin:0;padding:0}
.nav a{display:block;color:#fff;text-decoration:none;padding:.6rem 1rem;border-radius:var(--radius);font-weight:700}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav a[aria-current="page"]{background:#fff;color:var(--teal-deep)}

/* Buttons */
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:var(--radius);font-weight:700;text-decoration:none;font-size:1.15rem;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-sun:hover{background:#F4C366;color:var(--ink)}
.btn-line{border-color:#fff;color:#fff}
.btn-line:hover{background:#fff;color:var(--teal-deep)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-deep);color:#fff}

/* Hero (home) */
.hero{background:var(--teal);color:#fff;padding:4rem 0 4.5rem}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;align-items:center}
.hero .tagline{font-size:1.35rem;opacity:.95;margin-bottom:1.6rem}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap}
.frame{position:relative;border:4px solid var(--leaf);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.frame img{width:100%;height:auto}
.frame .note{
  position:absolute;right:-1rem;bottom:-1.6rem;max-width:15rem;
  background:rgba(23,75,77,.93);color:#fff;padding:1rem 1.2rem;border-radius:6px;
  font-family:"Lora",Georgia,serif;font-size:1.15rem;line-height:1.35
}

/* Page band (blog / contact) */
.band{background:var(--teal);color:#fff;padding:3rem 0 2.6rem}
.band p{font-size:1.3rem;max-width:var(--measure);margin:0;opacity:.95}

/* Sections */
section.block{padding:4.5rem 0}
section.block.mist{background:var(--teal-mist)}
.lead{font-size:1.3rem;color:var(--ink-soft);max-width:var(--measure)}

.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.5rem}
.topic{border-top:4px solid var(--teal);padding-top:1.2rem}
.topic:nth-child(2){border-color:var(--sun)}
.topic:nth-child(3){border-color:var(--leaf)}
.topic p{color:var(--ink-soft);margin:0}

.latest{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.latest a.post{display:block;background:#fff;border:1px solid #D6E3E0;border-radius:var(--radius);padding:1.5rem;text-decoration:none;color:var(--ink)}
.latest a.post:hover{border-color:var(--teal)}
.latest .cat{color:var(--teal);font-weight:700;font-size:1rem}
.latest h3{margin:.3rem 0 .6rem;font-size:1.3rem}
.latest p{color:var(--ink-soft);font-size:1.05rem;margin:0}

.fb{background:var(--teal-deep);color:#fff;text-align:center;padding:3.5rem 0}
.fb p{font-size:1.3rem;max-width:40ch;margin:0 auto 1.5rem}

/* Blog layout */
.blog{display:grid;grid-template-columns:1fr 260px;gap:3.5rem;padding:3.5rem 0 4.5rem}
.article{max-width:var(--measure);padding-bottom:3rem;margin-bottom:3rem;border-bottom:1px solid #D6E3E0;scroll-margin-top:1rem}
.article:last-child{border-bottom:0}
.meta{color:var(--ink-soft);font-size:1rem;margin-bottom:1rem}
.meta strong{color:var(--teal)}
.article ul{padding-left:1.3rem}
.article li{margin-bottom:.5rem}
.aside{position:sticky;top:1.5rem;align-self:start;background:var(--teal-mist);border-radius:var(--radius);padding:1.5rem}
.aside h2{font-size:1.3rem}
.aside ul{list-style:none;padding:0;margin:0 0 1.5rem}
.aside li{margin-bottom:.6rem;line-height:1.35}
.aside a{font-size:1.05rem}

/* Contact */
.contact{display:grid;grid-template-columns:1.4fr 1fr;gap:3.5rem;padding:3.5rem 0 4.5rem}
form label{display:block;font-weight:700;margin-bottom:.35rem}
form .field{margin-bottom:1.3rem}
form input,form textarea{width:100%;font:inherit;padding:.8rem;border:2px solid #B9CCC9;border-radius:var(--radius);background:#fff}
form input:focus,form textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(233,178,74,.5)}
form textarea{min-height:180px;resize:vertical}
.hint{font-weight:400;color:var(--ink-soft)}
.hp{position:absolute;left:-9999px}
.alert{padding:1rem 1.2rem;border-radius:var(--radius);margin-bottom:1.5rem;font-weight:700;display:none}
.alert.ok{background:#E3F1D2;color:#2E4A12}
.alert.err{background:#FBE3DA;color:#7A2510}
.info{background:var(--teal-mist);border-radius:var(--radius);padding:2rem;align-self:start}
.info p{margin-bottom:1.2rem}

/* Footer */
.site-footer{background:var(--ink);color:#D5DEDC;padding:2.5rem 0;font-size:1.05rem}
.site-footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.site-footer a{color:#fff}

@media (max-width:900px){
  .hero .wrap,.blog,.contact{grid-template-columns:1fr}
  .topics,.latest{grid-template-columns:1fr}
  .frame .note{right:.8rem;bottom:-1.4rem}
  .aside{position:static}
}
@media (max-width:560px){
  body{font-size:1.12rem}
  .nav a{padding:.5rem .7rem}
  .brand span{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}