@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --night:#1B1F3B;
  --night-deep:#12152B;
  --parchment:#F3ECD8;
  --parchment-alt:#EAE1C6;
  --amber:#D9A05B;
  --plum:#8A5A8F;
  --plum-deep:#6E4B76;
  --ink:#211C34;
  --ink-soft:#524A6B;
  --silver:#C9CDDD;

  --display:'Fraunces', serif;
  --body:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--plum-deep); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}

.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }

/* ===== Header ===== */
.site-header{
  background:var(--night);
  color:var(--parchment);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; gap:20px; flex-wrap:wrap;
}
.wordmark{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:23px; color:var(--parchment);
}
.moon{
  width:22px; height:22px; border-radius:50%;
  background:var(--amber);
  box-shadow:-7px 0 0 -3px var(--night), -6px 1px 0 -2px var(--amber);
  flex-shrink:0;
}
.site-nav{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.site-nav a{
  color:var(--silver); font-size:14px; font-weight:500;
}
.site-nav a:hover{ color:var(--amber); text-decoration:none; }

/* ===== Hero / search ===== */
.hero{
  background:var(--night);
  color:var(--parchment);
  padding:64px 0 84px;
  position:relative;
}
.hero .wrap{ max-width:760px; text-align:center; }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--amber); display:inline-block; margin-bottom:18px;
}
.hero h1{
  font-family:var(--display); font-weight:600; font-size:clamp(30px,5vw,46px);
  line-height:1.15; color:var(--parchment);
}
.hero h1 em{ color:var(--amber); font-style:italic; }
.hero p.lede{
  margin-top:16px; color:var(--silver); font-size:16px; max-width:48ch; margin-left:auto; margin-right:auto;
}
.search-box{
  margin-top:34px; display:flex; max-width:480px; margin-left:auto; margin-right:auto;
  background:var(--parchment); border-radius:3px; overflow:hidden;
}
.search-box input{
  flex:1; border:none; padding:15px 18px; font-family:var(--body); font-size:15px; background:transparent; color:var(--ink);
}
.search-box input:focus{ outline:none; }
.search-box button{
  border:none; background:var(--amber); color:var(--night); font-weight:700;
  padding:0 22px; font-family:var(--body); font-size:14px; cursor:pointer;
}

/* A-Z index strip */
.az-strip{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:30px;
}
.az-strip a{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,205,221,0.35); border-radius:2px;
  font-family:var(--mono); font-size:12px; color:var(--silver);
}
.az-strip a:hover{ border-color:var(--amber); color:var(--amber); text-decoration:none; }

/* ===== Section ===== */
.section{ padding:60px 0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:32px; flex-wrap:wrap;
}
.section-head h2{ font-family:var(--display); font-size:27px; font-weight:600; color:var(--ink); }
.section-head .tag{
  font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--plum-deep);
}

/* ===== Verbete cards (dream entry grid) ===== */
.verbete-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px;
}
.verbete-card{
  background:#fff; border:1px solid rgba(33,28,52,0.1); border-radius:3px;
  padding:22px 20px; transition:transform .15s ease, box-shadow .15s ease;
}
.verbete-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(33,28,52,0.12); }
.verbete-label{
  font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--plum-deep); margin-bottom:8px;
}
.verbete-card h3{ font-family:var(--display); font-size:19px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.verbete-card p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; }
.verbete-link{ font-size:13px; font-weight:600; }

/* ===== Entry / verbete page ===== */
.entry-head{ padding:48px 0 6px; }
.entry-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--plum-deep); margin-bottom:10px; display:block;
}
.entry-head h1{
  font-family:var(--display); font-size:clamp(32px,5vw,50px); font-weight:600; color:var(--ink);
}
.entry-head .phon{
  font-family:var(--mono); font-size:14px; color:var(--ink-soft); margin-top:8px; display:block;
}
.entry-layout{
  display:grid; grid-template-columns:1fr 260px; gap:44px; padding:36px 0 70px;
}
.entry-body h2{ font-family:var(--display); font-size:21px; font-weight:600; color:var(--ink); margin:28px 0 10px; }
.entry-body p{ font-size:15.5px; margin-bottom:14px; }
.entry-body p:first-of-type{ font-size:17px; color:var(--ink-soft); }
.entry-body ul{ padding-left:20px; margin-bottom:16px; }
.entry-body li{ margin-bottom:6px; font-size:15px; }

.side-box{
  background:var(--parchment-alt); border:1px solid rgba(33,28,52,0.12);
  padding:20px; height:fit-content;
}
.side-box .tag{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--plum-deep);
  border-bottom:1px solid rgba(33,28,52,0.15); padding-bottom:9px; margin-bottom:12px;
}
.side-box ul{ list-style:none; }
.side-box li{ margin-bottom:9px; }
.side-box a{ font-size:14px; font-weight:600; }

/* ===== Glossário / A-Z list page ===== */
.letter-block{ margin-bottom:38px; }
.letter-block h2{
  font-family:var(--display); font-style:italic; font-size:30px; color:var(--plum-deep);
  border-bottom:2px solid var(--plum-deep); padding-bottom:6px; margin-bottom:14px; display:inline-block;
}
.letter-list{ columns:3; column-gap:30px; }
.letter-list li{ list-style:none; margin-bottom:8px; break-inside:avoid; font-size:14.5px; }

/* ===== Simple pages ===== */
.simple-page{ padding:52px 0 80px; }
.simple-page h1{ font-family:var(--display); font-size:clamp(30px,4vw,42px); color:var(--ink); margin-bottom:22px; max-width:20ch; }
.simple-page h2{ font-family:var(--display); font-size:20px; color:var(--ink); margin:28px 0 10px; }
.simple-page p, .simple-page li{ font-size:15.5px; margin-bottom:14px; }
.simple-page ul{ padding-left:20px; }

/* ===== Footer ===== */
.site-footer{ background:var(--night); color:var(--silver); padding:40px 0 26px; margin-top:10px; }
.footer-grid{
  display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid rgba(201,205,221,0.18);
}
.footer-brand{ font-family:var(--display); font-style:italic; font-size:17px; max-width:34ch; color:var(--parchment); opacity:0.9; }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ color:var(--silver); font-size:13px; }
.footer-links a:hover{ color:var(--amber); text-decoration:none; }
.footer-fine{ font-family:var(--mono); font-size:11px; color:rgba(201,205,221,0.55); margin-top:18px; }

@media (max-width:760px){
  .entry-layout{ grid-template-columns:1fr; }
  .letter-list{ columns:2; }
}
@media (max-width:520px){
  .letter-list{ columns:1; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .verbete-card{ transition:none; }
}