/* Core palette + typography */
:root{
  --bg:#f7f5f1;
  --text:#222;
  --muted:#4a4742;
  --hair:#d8d1c7;
  --hair2:#cfc7bc;
  --link:#2b2a27;
  --linkHover:#111;
  --max: 72ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background-color:var(--bg);
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height:1.68;

  /* REQUIRED BACKGROUND IMAGE */
  background-image:
    linear-gradient(rgba(247,245,241,0.90), rgba(247,245,241,0.90)),
    url('background_petcare_soft.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Accessibility */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.6rem .8rem;
  background:rgba(247,245,241,.98);
  border:1px solid var(--hair2);
  color:var(--text);
  z-index:1000;
}

/* Header / nav */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(6px);
  background: rgba(247,245,241,.86);
  border-bottom:1px solid var(--hair);
}
.header-inner{
  max-width: min(1100px, calc(var(--max) + 28ch));
  margin:0 auto;
  padding: .9rem 1.1rem;
  display:flex;
  gap:1rem;
  align-items:baseline;
  justify-content:space-between;
}
.site-title{
  margin:0;
  font-size:1rem;
  letter-spacing:.02em;
}
.site-title a{
  color:var(--text);
  text-decoration:none;
}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem 1.05rem;
  align-items:center;
  justify-content:flex-end;
}
.nav a{
  color:var(--link);
  text-decoration:none;
  padding:.1rem 0;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--linkHover); border-bottom-color:var(--hair2)}
.nav a[aria-current="page"]{border-bottom-color:var(--hair2)}

/* Layout */
.wrap{
  max-width: 1100px;
  margin:0 auto;
  padding: 1.9rem 1.1rem 2.6rem;
}
main{
  max-width: var(--max);
}

/* Notebook-style entries */
.entry{
  margin: 0 0 1.9rem;
  padding: 0 0 1.7rem;
}
.entry--long{
  margin-bottom: 2.4rem;
  padding-bottom: 2.1rem;
  border-bottom: 1px solid rgba(207,199,188,.75);
}
.entry--short{
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(216,209,199,.7);
}

h1,h2,h3{
  font-weight: normal;
  margin: 0 0 .8rem;
}
h1{
  font-size: 1.55rem;
  letter-spacing: .01em;
}
h2{
  font-size: 1.18rem;
  color: var(--text);
}
p{margin: 0 0 1rem}
.lede{
  font-size: 1.05rem;
  color: var(--muted);
  margin-top: .2rem;
}

.note-title{
  margin: 0 0 .8rem;
  color: var(--muted);
  font-style: italic;
}

ul{margin:.2rem 0 0 1.1rem; padding:0}
li{margin:.45rem 0}
.fragments{
  list-style: square;
  color: var(--text);
}
.final-lines{
  list-style: none;
  margin-left: 0;
}
.final-lines li{
  padding-left: .2rem;
}

/* Contact block */
.contact-block{
  margin-top: 2.3rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(207,199,188,.85);
}
dl{
  margin: .8rem 0 0;
}
dt{
  color: var(--muted);
  margin-top: .8rem;
}
dd{
  margin: .15rem 0 0;
}
a{color:var(--link)}
a:hover{color:var(--linkHover)}

/* Article + page utilities */
.page-title{
  margin: 0 0 .7rem;
}
.italic-intro{
  font-style: italic;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.list-plain{
  list-style:none;
  margin-left:0;
}
.list-plain li{
  margin: .75rem 0;
}
.small{
  font-size: .92rem;
  color: var(--muted);
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--hair);
  background: rgba(247,245,241,.86);
}
.footer-inner{
  max-width: min(1100px, calc(var(--max) + 28ch));
  margin:0 auto;
  padding: 1.2rem 1.1rem 2rem;
}
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap: .55rem 1.05rem;
  margin-bottom: .9rem;
}
.footer-nav a{text-decoration:none; border-bottom:1px solid transparent}
.footer-nav a:hover{border-bottom-color:var(--hair2)}

/* Responsive tweaks */
@media (max-width: 720px){
  .header-inner{align-items:flex-start; flex-direction:column}
  .nav{justify-content:flex-start}
  .wrap{padding-top: 1.4rem}
}

