/* The Dirty Little Diary
   Matches the live Substack theme, read 09-16-2026 from thedirtylittlediary.substack.com:
   background #0C0E14, accent #B17D2F, headings Playfair Display 700, body Spectral 400.
   Champagne #DACBAF is the cream in the wordmark and header artwork.
   Raised ink #1B202B is a surface lift only. Layout follows the Substack website editor
   (Custom theme, Media feature hero). One sheet for every page. */

:root{
  --ink:#0C0E14;          /* Substack background */
  --champagne:#DACBAF;    /* wordmark cream */
  --gold:#B17D2F;         /* Substack accent */
  --raised:#1B202B;       /* surface lift, never a colour with meaning */

  /* champagne and gold at reduced alpha are still those colours, not new ones */
  --muted:rgba(218,203,175,.62);
  --rule:rgba(177,125,47,.45);
  --line:rgba(218,203,175,.14);

  --serif:'Playfair Display',Georgia,serif;
  --body:'Spectral',Georgia,serif;
  --max:1160px;
  --gut:clamp(1.1rem,3.5vw,2.5rem);
}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--gold);color:var(--ink)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--champagne);
  font-family:var(--body);font-weight:400;font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:728px;margin:0 auto}

h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.2;letter-spacing:0}
h1{font-size:clamp(1.9rem,4.6vw,3rem)}
h2{font-size:clamp(1.4rem,3vw,2rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
a{color:inherit;text-decoration:none}
a.link,.prose a{color:var(--gold);border-bottom:1px solid var(--rule)}
a.link:hover,.prose a:hover{color:var(--champagne)}
.small{font-size:.82rem}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--serif);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

/* ---------- masthead: the Substack header artwork ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{padding-top:clamp(.8rem,2vw,1.2rem);padding-bottom:clamp(.8rem,2vw,1.2rem)}
.masthead img{width:100%;height:auto}
.topnav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3.3vw,2.4rem);padding:.95rem 0}
.topnav a{font-family:var(--serif);font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:color .18s ease}
.topnav a:hover,.topnav a:focus-visible{color:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--gold);color:var(--ink);
  font-family:var(--serif);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.95rem 1.9rem;border:1px solid var(--gold);cursor:pointer;text-align:center;
  transition:background .2s ease,color .2s ease;
}
.btn:hover{background:transparent;color:var(--gold)}
.btn-ghost{background:transparent;color:var(--gold)}
.btn-ghost:hover{background:var(--gold);color:var(--ink)}
.prose a.btn{color:var(--ink);border-bottom:0}
.prose a.btn:hover{color:var(--gold)}

/* ---------- hero: Substack "Media feature" layout ----------
   Matches the Substack website editor 09-16-2026: the latest featured still, an ink
   fade from the left, and the title block sitting in that faded ink zone. */
.hero{padding:clamp(1.4rem,4vw,2.4rem) 0}
.feature{position:relative;display:block;border-radius:8px;overflow:hidden;background:var(--ink);aspect-ratio:16/7}
.feature img{position:absolute;right:0;top:0;height:100%;width:78%;object-fit:cover}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 24%,rgba(12,14,20,0) 62%)}
.feature-text{position:absolute;left:clamp(1.2rem,4vw,2.6rem);bottom:clamp(1.2rem,4vw,2.4rem);z-index:1;max-width:46%}
.feature-text h1{font-size:clamp(1.4rem,3.4vw,2.4rem)}
.feature-text .date{margin-top:.3rem;font-size:.85rem;color:var(--muted)}
.feature-text .go{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.7rem;font-family:var(--serif);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.feature-text .go span{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--champagne);color:var(--ink);font-size:.95rem;letter-spacing:0}
.feature:hover .go{color:var(--gold)}
.still{border:1px solid var(--rule);background:var(--raised);overflow:hidden}
.still img{width:100%;height:100%;object-fit:cover}

/* ---------- body: post list plus about sidebar ---------- */
.home-body{padding:clamp(1.2rem,3vw,2rem) 0 clamp(2.4rem,6vw,4rem)}
.home-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.post{display:grid;grid-template-columns:1fr 150px;gap:1.2rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.post:first-child{padding-top:0}
.post h3{font-size:clamp(1.05rem,1.8vw,1.25rem)}
.post h3 a:hover{color:var(--gold)}
.post .date{margin-top:.25rem;font-size:.85rem;color:var(--muted)}
.post .thumb{aspect-ratio:3/2;border-radius:4px;overflow:hidden}
.post .thumb img{width:100%;height:100%;object-fit:cover}
.side{border-left:1px solid var(--line);padding-left:clamp(1.2rem,3vw,2rem)}
.side .logo{width:56px;height:56px}
.side h3{margin-top:.8rem;font-size:1.1rem}
.side p{margin-top:.5rem;font-size:.92rem;line-height:1.6;color:var(--muted)}
.side .btn{margin-top:1.1rem}

/* ---------- prose pages ---------- */
.page-head{padding:clamp(2.2rem,6vw,3.6rem) 0 0}
.page-head h1{margin-top:.8rem}
.banner{margin-top:clamp(1.6rem,4vw,2.4rem)}
.banner .still{aspect-ratio:16/9}
.band{padding:clamp(2rem,5vw,3.4rem) 0}
.prose h2{margin:2.1rem 0 .7rem}
.prose p{margin-bottom:1.1rem}
.prose ul{margin:0 0 1.3rem 1.2rem}
.prose li{margin-bottom:.45rem}
.prose blockquote{border-left:1px solid var(--gold);padding-left:1.3rem;margin:1.8rem 0;font-family:var(--serif);font-style:italic;font-size:1.15rem}
.signature{width:clamp(120px,22vw,170px);margin-top:1.6rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:clamp(2.2rem,5vw,3.1rem) 0}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;align-items:start}
.foot .avatar{width:56px;height:56px}
.foot a{display:block;font-size:.95rem;margin-bottom:.5rem}
.foot a:hover{color:var(--gold)}
.copy{
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.72rem;color:var(--muted);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;letter-spacing:.06em;
}

/* ---------- reveal ----------
   Fail open. .rv is visible by default; the hidden state only exists once
   site.js has added .js-reveal to <html>. */
.rv{opacity:1;transform:none}
.js-reveal .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js-reveal .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-reveal .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

@media(max-width:860px){
  body{font-size:18px}
  .feature{aspect-ratio:4/3}
  .feature img{width:100%}
  .feature::after{background:linear-gradient(0deg,var(--ink) 0%,rgba(12,14,20,.85) 35%,rgba(12,14,20,0) 70%)}
  .feature-text{max-width:none;right:1.2rem}
  .home-grid{grid-template-columns:1fr}
  .side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1.6rem}
  .post{grid-template-columns:1fr 110px}
  .foot{grid-template-columns:1fr;gap:1.6rem}
}