/* ============================================================
   pages.css — shared styling for Undertold's utility pages
   (about / contact / privacy). Matches the homepage "garden"
   identity so the frame around the stories stays one brand.
   Stories stay self-contained by design; only these pages
   share this sheet, which is what keeps them from drifting.
============================================================ */

/* ---- GARDEN TOKENS (day) ---- */
:root{
  --paper:   #F5F1E3;
  --paper-2: #EDE7D3;
  --card-bg: #FDFBF3;
  --ink:     #22301F;
  --dim:     #5C6B54;
  --moss:    #2E5B34;
  --deep:    #1C3A22;
  --bloom:   #C96F2E;
  --line:    rgba(34,48,31,.14);
  --display:"Fraunces",serif;
  --body:"Inter",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
/* ---- DUSK OVERRIDES (mirrors the homepage toggle) ---- */
body.dusk{
  --paper:   #131B12;
  --paper-2: #0E150E;
  --card-bg: #1B261A;
  --ink:     #E9EFDE;
  --dim:     #9FAF93;
  --moss:    #8FC77E;
  --deep:    #EAF2DC;
  --bloom:   #E89A56;
  --line:    rgba(233,239,222,.14);
}

*{margin:0;padding:0;box-sizing:border-box}

/* ---- a11y utilities ---- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:3px;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1.02rem; line-height:1.75;
  transition:background .8s, color .8s;
}
a{color:var(--moss);}
a:hover{color:var(--bloom);}
.wrap{max-width:44rem; margin:0 auto; padding:0 clamp(1.25rem,5vw,2rem);}

/* ---- HEADER (matches homepage) ---- */
header.site{padding:1.5rem 0; border-bottom:1px solid var(--line); background:var(--paper); transition:background .8s;}
header.site .wrap{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.logo{font-family:var(--display); font-weight:700; font-size:1.35rem; color:var(--deep); text-decoration:none;}
.logo b{color:var(--bloom); font-weight:700;}
nav{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); display:flex; gap:1.4rem; flex-wrap:wrap;}
nav a{color:inherit; text-decoration:none;}
nav a:hover, nav a[aria-current="page"]{color:var(--moss);}

/* ---- PAGE BODY ---- */
main{padding:clamp(2.5rem,7vh,4rem) 0 clamp(4rem,10vh,6rem);}
.kicker{font-family:var(--mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--moss);}
h1{font-family:var(--display); font-weight:700; font-size:clamp(2rem,5.5vw,3rem); line-height:1.08; color:var(--deep); margin:.6rem 0 1.2rem;}
h1 em{font-style:italic; color:var(--moss);}
h2{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--moss); margin:2.4rem 0 .7rem; font-weight:500;
}
p{color:var(--dim); margin-bottom:1em;}
p.lead{font-size:1.12rem; color:var(--ink);}
ul{padding-left:1.2rem; margin-bottom:1em;}
li{color:var(--dim); margin:.4rem 0;}
strong{color:var(--ink); font-weight:500;}
.updated{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); display:block; margin:-.6rem 0 1.8rem;
}
.note{
  background:var(--card-bg); border:1px solid var(--line); border-left:3px solid var(--bloom);
  border-radius:10px; padding:1rem 1.2rem; margin:1.6rem 0;
}
.note p:last-child{margin-bottom:0;}

/* ---- FOOTER (matches homepage) ---- */
footer.site{
  border-top:1px solid var(--line); padding:2.8rem 0 4rem; background:var(--paper-2);
  color:var(--dim); font-size:.86rem; transition:background .8s;
}
footer.site .wrap{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;}
footer.site .fine{max-width:34em;}
footer.site a{color:var(--moss);}

@media (prefers-reduced-motion:reduce){
  body, header.site, footer.site{transition:none;}
}