/* Tollgate Journal — quiet editorial theme (cream surface) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300&family=Inter:wght@400;500&display=swap');

:root{
  --plum:#5b2748;
  --cream:#f4efe1;
  --ink:#1d211c;
  --slate:#6a7180;
  --line:rgba(29,33,28,.12);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

.wrap{max-width:660px;margin:0 auto;padding:0 1.5rem;}

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid var(--line);
  padding:clamp(1.8rem,4vw,2.6rem) 0;
  text-align:center;
}
.wordmark{
  display:inline-block;
  font-family:'Cormorant Garamond', Georgia, serif;font-weight:500;
  font-size:1.4rem;letter-spacing:.4em;
  color:var(--ink);text-decoration:none;line-height:1.2;
  margin-right:-.4em;transition:opacity .3s;
}
.wordmark:hover{opacity:.65;}
.wordmark small{display:block;font-size:.32em;letter-spacing:.6em;margin:.7em -.6em 0 0;opacity:.75;}

/* ---------- journal index ---------- */
.journal-head{padding:clamp(3rem,8vh,5rem) 0 clamp(2rem,5vh,3rem);text-align:center;}
.journal-head h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,6vw,3.4rem);letter-spacing:-.01em;line-height:1.05;
}
.journal-head p{
  margin-top:1rem;color:var(--slate);
  font-size:.95rem;letter-spacing:.01em;max-width:42ch;margin-inline:auto;
}

.entries{padding-bottom:clamp(3rem,8vh,5rem);}
.entry{
  display:block;text-decoration:none;color:inherit;
  padding:clamp(1.8rem,4vh,2.4rem) 0;
  border-top:1px solid var(--line);
  transition:opacity .3s;
}
.entry:hover{opacity:.62;}
.entry:last-child{border-bottom:1px solid var(--line);}
.entry .date{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--slate);margin-bottom:.7rem;font-weight:500;
}
.entry h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,3.5vw,1.95rem);line-height:1.15;letter-spacing:-.005em;
}
.entry .excerpt{margin-top:.6rem;color:var(--slate);font-size:.96rem;line-height:1.6;}
.entry__img{
  height:clamp(180px,28vh,240px);
  background:url('../hero.jpg') center/cover no-repeat;
  border-radius:3px;margin-bottom:1.4rem;
}

/* ---------- article ---------- */
.article{padding:clamp(2.4rem,6vh,3.4rem) 0 clamp(3.5rem,9vh,6rem);}
.post-hero{
  height:clamp(240px,46vh,420px);
  background:url('../hero.jpg') center/cover no-repeat;
  border-radius:3px;margin-bottom:clamp(2.4rem,6vh,3.4rem);
}
.article .eyebrow{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--slate);font-weight:500;text-align:center;margin-bottom:1.4rem;
}
.article h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem,6vw,3.2rem);line-height:1.08;letter-spacing:-.01em;
  text-align:center;margin-bottom:clamp(2.4rem,6vh,3.4rem);text-wrap:balance;
}
.article p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.9;
  color:rgba(29,33,28,.88);margin-bottom:1.5rem;
}
.article .sign{font-style:italic;color:var(--slate);margin-top:2.4rem;}

/* ---------- back link / footer ---------- */
.back{
  display:inline-block;margin-top:1rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--plum);text-decoration:none;opacity:.85;transition:opacity .3s;
}
.back:hover{opacity:1;}
.site-foot{
  border-top:1px solid var(--line);
  padding:clamp(1.8rem,4vw,2.4rem) 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
}
.site-foot a{color:var(--slate);text-decoration:none;transition:color .3s;}
.site-foot a:hover{color:var(--ink);}
@media(max-width:520px){.site-foot{justify-content:center;text-align:center;}}

/* ---------- in-body images (dynamic posts) ---------- */
.article img{max-width:100%;height:auto;border-radius:3px;display:block;}
.post-img{margin:2rem 0;}
.post-img img{width:100%;}