:root{
  --bg:#111111;
  --text:#d8d8d8;
  --muted:#bdbdbd;
  --line:#3a3a3a;
  --link:#66c7ff;
  --max:1080px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
}

html{scroll-behavior:smooth}

body{
  font-family:"Inter","Atkinson Hyperlegible",Verdana,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:.01em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* CAPÇALERA */

.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.lang-switch,
.lang-switch a,
.site-header a,
.brand{
  font-style:normal!important;
  font-weight:400!important;
}

.lang-switch{font-size:.95rem}

.lang-switch a{
  margin-right:.5rem;
}

.brand{
  color:var(--link);
  font-size:1rem;
  letter-spacing:0;
}

/* ESTRUCTURA */

.layout{
  display:flex!important;
  flex-direction:row!important;
  gap:0!important;
  align-items:flex-start!important;
  width:100%;
}

.sidebar{
  width:340px!important;
  flex:0 0 340px!important;
  position:sticky;
  top:0;
  max-height:100vh;
  overflow:auto;
  padding:.35rem .55rem;
  background:var(--bg);
  color:var(--text);
}

main{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:var(--max);
  margin:0 auto;
  padding:46px 22px 70px;
  background:var(--bg);
}

/* MENÚ LATERAL */

.sidebar br{display:none!important}

.sidebar h3,
.sidebar ul,
.sidebar li,
.sidebar li > ul,
.sidebar li > ul > li,
.sidebar a{
  margin:0!important;
  padding:0!important;
  line-height:1.18!important;
}

.sidebar ul,
.sidebar li{
  list-style:none!important;
}

.sidebar a{
  display:block!important;
  text-decoration:none;
}

/* nivell 1: negreta rodona */
.sidebar h3{
  font-size:1rem;
  font-style:normal!important;
  font-weight:700!important;
}

/* nivell 2: cursiva */
.sidebar h3 + ul > li > a{
  font-style:italic!important;
  font-weight:400!important;
}

/* nivell 3 i següents: rodona */
.sidebar h3 + ul > li > ul > li > a,
.sidebar h3 + ul > li > ul > li > ul > li > a{
  font-style:normal!important;
  font-weight:400!important;
}

.sidebar h3 + ul > li > ul > li > a em,
.sidebar h3 + ul > li > ul > li > ul > li > a em{
  font-style:normal!important;
}

/* ARTICLE: força columna vertical normal */

.article{
  display:block!important;
  width:100%!important;
  max-width:840px!important;
  margin:0!important;
  padding:0!important;
  column-count:auto!important;
  columns:auto!important;
  column-width:auto!important;
  white-space:normal!important;
}

.article > *{
  display:block!important;
  float:none!important;
  clear:none!important;
  width:auto!important;
  max-width:100%!important;
}

.article h1{
  font-size:clamp(2rem,5vw,4.2rem);
  line-height:1.08;
  margin:.25rem 0;
  color:var(--text);
}

.article h2{
  font-size:clamp(1.45rem,3vw,2.2rem);
  line-height:1.22;
  margin:.8rem 0 .28rem;
  color:var(--text);
}

.article h3{
  font-size:1.18rem;
  line-height:1.22;
  margin:.55rem 0 .28rem;
  color:var(--text);
}

.article p,
.article li,
.article blockquote{
  color:var(--text)!important;
  line-height:1.55;
}

.article p,
.article ol,
.article ul,
.article blockquote{
  margin-top:.45rem;
  margin-bottom:.45rem;
}

.article blockquote{
  border-left:4px solid var(--line);
  padding:8px 0 8px 18px;
}

.hero{padding:38px 0 26px}

.lead{
  font-size:1.18rem;
  color:var(--muted);
  max-width:780px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  gap:18px;
  margin:28px 0;
}

.card{
  background:#181818;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
}

.card h2,.card h3{margin-top:0}
.card p{color:var(--muted)}

.toc{
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  margin:28px 0;
}

.toc h2{margin-top:0}
.toc ol{margin-bottom:0}

.note{
  border-left:4px solid var(--line);
  padding:16px 18px;
  border-radius:12px;
  color:var(--text);
}

.meta,.small{
  color:var(--muted);
  font-size:.92rem;
}

.buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

.button{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 16px;
  color:var(--text);
  background:#181818;
  cursor:pointer;
}

.prevnext{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:44px;
  border-top:1px solid var(--line);
  padding-top:22px;
}

input,textarea{
  width:100%;
  margin-top:6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#181818;
  color:var(--text);
  padding:10px 12px;
  font:inherit;
}

.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg);
  color:var(--muted);
}

.footer-inner{
  max-width:var(--max);
  margin:auto;
  padding:28px 22px;
  display:flex;
  gap:16px;
  justify-content:space-between;
  flex-wrap:wrap;
}

@media(max-width:720px){
  .header-inner{
    align-items:flex-start;
    flex-direction:column;
  }
  .layout{display:block!important}
  .sidebar{
    position:relative;
    width:100%!important;
    max-height:none;
  }
  main{padding-top:30px}
  .prevnext{flex-direction:column}
}

/* MENÚ: cursives en blanc */
.sidebar h3 + ul > li > a,
.sidebar h3 + ul > li > a:visited{
  color:var(--text)!important;
}

/* Títols menú: blau i sense cursiva */
.sidebar h3,
.sidebar h3 em,
.sidebar .section-title,
.sidebar .section-title em{
  color:var(--link)!important;
  font-style:normal!important;
  font-weight:700!important;
}

/* MENÚ LATERAL: només dos nivells */
.sidebar h3,
.sidebar h3 em{
  color:var(--text)!important;
  font-style:normal!important;
  font-weight:700!important;
  font-size:1rem!important;
  line-height:1.08!important;
  margin:.34rem 0 .06rem!important;
}

.sidebar ul,
.sidebar li,
.sidebar li > ul,
.sidebar li > ul > li{
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}

.sidebar li > ul{
  display:none!important;
}

.sidebar a,
.sidebar a em,
.sidebar h3 + ul > li > a,
.sidebar h3 + ul > li > a em,
.sidebar h3 + ul > li > ul > li > a,
.sidebar h3 + ul > li > ul > li > a em{
  color:var(--link)!important;
  font-style:normal!important;
  font-weight:400!important;
  text-decoration:none!important;
  line-height:1.08!important;
}

.sidebar a:hover{
  text-decoration:underline!important;
}