:root{
  --ground:#FFFFFF; --surface:#FFFFFF; --sunk:#E9E2CE;
  --ink:#1C2333; --ink-soft:#4B5266; --ink-faint:#69655A;
  --line:#D9D0B4; --line-soft:#E6DFC9;
  --clay:#8A6A22; --clay-strong:#6B5119; --clay-wash:#EEE3C0;
  --p1:#3B4A6B; --p2:#8F5327; --p3:#3F5D42; --p4:#2A5266; --p5:#7A2E28; --p6:#5C5240;
  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --display:"Cinzel","Iowan Old Style",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --r:2px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#12141C; --surface:#181B26; --sunk:#0D0F16;
    --ink:#E9E5D6; --ink-soft:#ABA692; --ink-faint:#948F82;
    --line:#2C2E38; --line-soft:#23252E;
    --clay:#C6A03F; --clay-strong:#D9B85A; --clay-wash:#241F12;
    --p1:#8AA0C9; --p2:#D89A5C; --p3:#7FA88A; --p4:#6FA0B8; --p5:#C97D72; --p6:#B0A488;
  }
}
:root[data-theme="dark"]{
  --ground:#12141C; --surface:#181B26; --sunk:#0D0F16;
  --ink:#E9E5D6; --ink-soft:#ABA692; --ink-faint:#948F82;
  --line:#2C2E38; --line-soft:#23252E;
  --clay:#C6A03F; --clay-strong:#D9B85A; --clay-wash:#241F12;
  --p1:#8AA0C9; --p2:#D89A5C; --p3:#7FA88A; --p4:#6FA0B8; --p5:#C97D72; --p6:#B0A488;
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%}
.wrap{max-width:43rem; margin:0 auto; padding:0 1.15rem 5rem}
p{margin:0; text-wrap:pretty}

.bar{display:flex; justify-content:space-between; align-items:center;
  padding:.9rem 0; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--line)}
.bar a{color:inherit; text-decoration:none}
.bar a:hover{color:var(--clay)}

header.top{padding:2rem 0 1.6rem; text-align:center; border-bottom:3px double var(--line)}
.seal{width:44px; height:44px; margin:0 auto .8rem; color:var(--clay)}
.mark{margin:0; font-family:var(--display); font-size:1.7rem; line-height:1.15; letter-spacing:.02em}
.mark em{font-style:normal; color:var(--clay-strong)}
.tagline{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:.55rem}
.abre{font-family:var(--serif); font-size:1.12rem; line-height:1.65; color:var(--ink-soft);
  margin:1.6rem auto 0; max-width:32rem; text-align:center; font-style:italic}

nav.abas{display:flex; gap:.15rem; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line); margin:1.3rem 0 1.4rem}
nav.abas::-webkit-scrollbar{display:none}
nav.abas button{flex:0 0 auto; background:none; border:0; cursor:pointer; font:inherit;
  font-size:.85rem; color:var(--ink-soft); padding:.55rem .75rem;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
nav.abas button[aria-current="true"]{color:var(--ink); border-bottom-color:var(--clay)}
nav.abas button:focus-visible{outline:2px solid var(--clay); outline-offset:-2px}
section[hidden]{display:none}
.stack{display:flex; flex-direction:column; gap:1rem}

/* ── uma aula por vez ── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.05rem; display:flex; flex-direction:column; gap:.8rem}
.card[hidden]{display:none !important}
.card h3{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); margin:0; font-weight:600}
.card h2{font-family:var(--display); font-weight:500; font-size:1.42rem;
  letter-spacing:.015em; margin:0; line-height:1.3; text-wrap:balance}
.card h2 .n{display:block; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
  font-weight:600; margin-bottom:.35rem}
.card h4{font-family:var(--serif); font-size:1.16rem; font-weight:600; margin:.7rem 0 -.2rem;
  line-height:1.3; color:var(--ink)}
.read{font-family:var(--serif); font-size:1.19rem; line-height:1.72;
  color:var(--ink); letter-spacing:.004em; margin:0}
.read strong{font-weight:600}
.read em{font-style:italic}

.passos{margin:0 0 1.5rem}
.passos .trilha{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.passos button{font-family:var(--sans); font-size:.8rem; padding:.52rem .85rem;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  border-radius:var(--r); cursor:pointer; line-height:1; white-space:nowrap;
  transition:border-color .12s, color .12s}
.passos button:hover{border-color:var(--clay); color:var(--ink)}
.passos button.on{background:var(--clay-wash); border-color:var(--clay);
  color:var(--clay-strong); font-weight:600}
.passos button.trancado{opacity:.4; cursor:not-allowed; border-style:dashed}
.passos button.trancado:hover{border-color:var(--line); color:var(--ink-soft)}
.passos .sep{width:1px; height:1.4rem; background:var(--line); margin:0 .3rem}
.passos .onde{margin-top:.75rem; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.passos .barra{margin-top:.45rem; height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden}
.passos .barra i{display:block; height:100%; background:var(--clay); transition:width .2s}
.passos .regra{margin-top:.5rem; font-family:var(--sans); font-size:.7rem;
  line-height:1.5; color:var(--ink-faint)}
.passos .regra b{color:var(--ink-soft); font-weight:500}

.vaievem{display:flex; gap:.7rem; margin-top:2rem; padding-top:1.2rem;
  border-top:1px solid var(--line)}
.vaievem button{flex:1 1 0; text-align:left; font:inherit; font-size:.92rem;
  line-height:1.35; background:none; border:1px solid var(--line);
  border-radius:var(--r); padding:.85rem .95rem; color:var(--ink); cursor:pointer; min-width:0}
.vaievem button:hover:not([disabled]){border-color:var(--clay)}
.vaievem button:last-child{text-align:right}
.vaievem button[disabled]{opacity:.3; cursor:default}
.vaievem small{display:block; font-family:var(--sans); font-size:.64rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.3rem}
@media(max-width:560px){
  .vaievem{flex-direction:column}
  .vaievem button:last-child{text-align:left}
  .passos button{font-size:.74rem; padding:.46rem .6rem}
}

/* ── ouvir ── */
.ouvir{display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem;
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r)}
.ouvir span{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap}
.ouvir audio{flex:1; min-width:0; height:32px}

/* ── fonte citada ── */
.fonte{border-left:2px solid var(--clay); padding:.15rem 0 .15rem .9rem;
  font-family:var(--serif); font-size:1.1rem; line-height:1.62; color:var(--ink)}
.fonte .ref, .chave .ref{font-size:.76rem; color:var(--ink-faint); font-style:italic;
  margin-top:.35rem; display:block; font-family:var(--serif)}
.chave{background:var(--clay-wash); border:1px solid var(--clay);
  border-radius:var(--r); padding:.85rem .95rem; font-family:var(--serif);
  font-size:1.1rem; line-height:1.6}
.chave b{font-weight:600}
.chave p{margin:0}
.chave p + p, .chave p + ul{margin-top:.6rem}
.chave ul + p{margin-top:.7rem}
.chave ul{list-style:none; margin:.3rem 0 0; padding:0}
.chave li{padding:.2rem 0 .2rem 1.1rem; position:relative}
.chave li::before{content:"—"; position:absolute; left:0; color:var(--clay-strong)}
.aviso{background:var(--ground); border:1px solid var(--line); border-left:3px solid var(--p5);
  border-radius:var(--r); padding:.8rem .9rem; font-size:.95rem; line-height:1.58;
  color:var(--ink-soft)}
.aviso b{color:var(--ink); font-weight:600}
.tiny{font-size:.78rem; color:var(--ink-faint); line-height:1.55}
.small{font-size:.9rem; color:var(--ink-soft); line-height:1.55}

/* ── aula particular (fim da aula) ── */
.particular{margin-top:1.3rem; padding:1rem 1.05rem; border:1px solid var(--line);
  border-radius:var(--r); background:var(--sunk); text-align:center}
.particular p{font-family:var(--serif); font-size:1rem; line-height:1.55;
  color:var(--ink-soft); margin:0 0 .75rem}
.particular a{display:inline-block; font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--ground);
  background:var(--clay-strong); padding:.75rem 1.3rem; border-radius:var(--r)}
.particular a:hover{background:var(--clay)}

/* ── o exercício do fim da aula ── */
.exercicio{margin-top:1.2rem; padding:.95rem 1rem; border:1px solid var(--line);
  border-left:3px solid var(--clay); border-radius:var(--r); background:var(--ground)}
.exercicio b{display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.5rem; font-weight:600}
.exercicio p{font-family:var(--serif); font-size:1.1rem; line-height:1.6; color:var(--ink)}
.exercicio p + p{margin-top:.5rem}

/* ── esquemas em desenho ── */
figure.esq{margin:.5rem 0 .3rem; padding:1rem .85rem .8rem;
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r)}
figure.esq svg{width:100%; height:auto; display:block; overflow:visible}
figure.esq figcaption{margin-top:.85rem; font-family:var(--sans); font-size:.76rem;
  line-height:1.5; color:var(--ink-faint); border-top:1px solid var(--line-soft); padding-top:.6rem}
figure.esq figcaption b{color:var(--ink-soft); font-weight:500}
.esq .rot{font-family:var(--sans); font-size:15px; letter-spacing:.09em;
  text-transform:uppercase; fill:var(--ink-faint)}
.esq .nm{font-family:var(--serif); font-size:17px; fill:var(--ink)}
.esq .nm.sm{font-size:16px}
.esq .med{font-family:var(--sans); font-size:14.5px; fill:var(--ink-soft)}
.esq .cx{fill:var(--surface); stroke:var(--line)}
.esq .seta{stroke:var(--ink-faint); fill:none}
.esq .corte{stroke:var(--p5); stroke-dasharray:5 4}
.esq .corte-t{font-family:var(--sans); font-size:15px; letter-spacing:.07em;
  text-transform:uppercase; fill:var(--p5)}
@media (max-width:640px){
  figure.esq{margin-left:-1.15rem; margin-right:-1.15rem;
    border-left:0; border-right:0; border-radius:0; padding:.9rem .55rem .7rem}
}

/* ── onde ler a fonte de graça ── */
.livre{margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.livre h3{margin-bottom:.7rem}
.livre ul{list-style:none; margin:.9rem 0 1rem; padding:0;
  display:flex; flex-direction:column; gap:.7rem}
.livre li{font-size:.95rem; line-height:1.45}
.livre a{color:var(--clay-strong); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:1px}
.livre a:hover{border-bottom-color:var(--clay)}
.livre em{display:block; font-family:var(--serif); font-size:.82rem; font-style:italic;
  color:var(--ink-faint); margin-top:.2rem}

/* ── fontes ── */
.tl{display:flex; flex-direction:column; gap:0}
.tl .aut{display:grid; grid-template-columns:4.6rem 1fr; gap:.9rem;
  padding:.85rem 0; border-top:1px solid var(--line-soft)}
.tl .aut:first-child{border-top:0}
.tl .yr{font-size:.76rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;
  padding-top:.15rem; letter-spacing:.02em}
.tl .nm{font-family:var(--serif); font-size:1.08rem; line-height:1.3}
.tl .ob{font-size:.88rem; color:var(--ink-soft); line-height:1.5; margin-top:.2rem}
.tl .ob b{color:var(--ink); font-weight:600}

/* ═══════════ ementa ═══════════ */
.ident{display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  gap:.1rem 1.1rem; margin:.2rem 0 1.4rem; padding:.85rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ident div{padding:.3rem 0}
.ident dt{font-family:var(--sans); font-size:.62rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint)}
.ident dd{margin:.15rem 0 0; font-family:var(--serif); font-size:1.02rem;
  line-height:1.35; color:var(--ink)}
.ementa h3{font-family:var(--sans); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--clay-strong); font-weight:500;
  margin:2rem 0 .7rem; padding-bottom:.35rem; border-bottom:1px solid var(--line-soft)}
.ementa h3:first-of-type{margin-top:0}
.ementa > p{font-family:var(--serif); font-size:1.12rem; line-height:1.62; color:var(--ink)}
.ementa > p + p{margin-top:.7rem}
.metas{list-style:none; margin:0; padding:0; counter-reset:m}
.metas li{counter-increment:m; position:relative; padding:.55rem 0 .55rem 2.2rem;
  border-top:1px solid var(--line-soft); font-family:var(--serif);
  font-size:1.06rem; line-height:1.5}
.metas li:first-child{border-top:0}
.metas li::before{content:counter(m); position:absolute; left:0; top:.62rem;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.06em;
  color:var(--clay-strong); border:1px solid var(--line);
  width:1.5rem; height:1.5rem; line-height:1.38rem; text-align:center; border-radius:50%}
.prog{list-style:none; margin:0; padding:0}
.prog li{display:grid; grid-template-columns:4.3rem 1fr; gap:.9rem;
  padding:.5rem 0; border-top:1px solid var(--line-soft)}
.prog li:first-child{border-top:0}
.prog b{font-family:var(--sans); font-weight:400; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding-top:.28rem}
.prog span{font-family:var(--serif); font-size:1.05rem; line-height:1.45}
.prog em{display:block; font-family:var(--serif); font-style:italic;
  font-size:.9rem; color:var(--ink-soft); margin-top:.1rem}
.bibl{list-style:none; margin:0; padding:0}
.bibl li{padding:.6rem 0 .6rem 1.4rem; text-indent:-1.4rem;
  border-top:1px solid var(--line-soft);
  font-family:var(--serif); font-size:.99rem; line-height:1.5; color:var(--ink)}
.bibl li:first-child{border-top:0}
.bibl li i{font-style:italic}
.bibl li .nota{display:block; text-indent:0; margin-top:.25rem;
  font-family:var(--sans); font-size:.8rem; line-height:1.5; color:var(--ink-faint)}

/* ═══════════ termo técnico com glosa ═══════════
   Um termo marcado com <span class="tec" data-g="…"> ganha um sublinhado
   pontilhado. No ecrã, tocar ou passar o rato mostra a explicação em uma
   linha; no PDF a explicação entra entre parênteses, porque em papel não há
   onde tocar. A regra é: quem nunca abriu um livro de filosofia entende a
   frase sem sair dela. */
.tec{border-bottom:1px dotted var(--clay); cursor:help; position:relative}
.tec:focus{outline:2px solid var(--clay); outline-offset:2px}
.tec > .g{
  position:absolute; left:50%; bottom:calc(100% + .5rem); transform:translateX(-50%);
  width:min(21rem, 78vw); z-index:20;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--clay); border-radius:var(--r);
  padding:.6rem .75rem; box-shadow:0 6px 22px rgba(0,0,0,.16);
  font-family:var(--sans); font-size:.84rem; line-height:1.5; text-align:left;
  opacity:0; visibility:hidden; transition:opacity .12s}
.tec > .g::after{
  content:""; position:absolute; top:100%; left:50%; margin-left:-6px;
  border:6px solid transparent; border-top-color:var(--clay)}
.tec:hover > .g, .tec:focus > .g, .tec[aria-expanded="true"] > .g{opacity:1; visibility:visible}
/* No telefone o balão não cabe centrado no termo: se a palavra estiver perto
   da margem, metade dele sai do ecrã. Em vez de o centrar, prende-se ao pé da
   tela, com a largura da coluna — sempre cabe, e é o gesto que o leitor de
   telemóvel já conhece. */
@media (max-width:52rem){
  .tec > .g{
    position:fixed; left:.7rem; right:.7rem; bottom:.7rem; top:auto;
    width:auto; transform:none; font-size:.95rem; line-height:1.55;
    padding:.85rem 1rem; box-shadow:0 -4px 26px rgba(0,0,0,.22)}
  .tec > .g::after{display:none}
}

/* ═══════════ cena desenhada ═══════════
   Ao lado dos esquemas, que argumentam, entram cenas com gente. Traço de
   gravura: linha seca, sem cor de preenchimento, sem balão quando não é
   preciso. A escala de cinzas vem das variáveis, para respeitar o tema. */
figure.cena{margin:1.4rem 0 1rem; padding:0}
figure.cena svg{width:100%; height:auto; display:block;
  background:var(--sunk); border:1px solid var(--line); border-radius:var(--r)}
.cena .tr{fill:none; stroke:var(--ink); stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round}
.cena .tr.fina{stroke-width:1.3}
.cena .tr.leve{stroke:var(--ink-faint); stroke-width:1.1}
.cena .cheio{fill:var(--ink); stroke:none}
.cena .sombra{fill:var(--line-soft); stroke:none}
.cena .fala{font-family:var(--serif); font-size:16px; font-style:italic; fill:var(--ink)}
.cena .rot{font-family:var(--sans); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; fill:var(--ink-faint)}
figure.cena figcaption{margin-top:.8rem; font-family:var(--sans); font-size:.78rem;
  line-height:1.5; color:var(--ink-faint); border-top:1px solid var(--line-soft);
  padding-top:.6rem}
figure.cena figcaption b{color:var(--ink-soft); font-weight:500}
@media (max-width:640px){
  figure.cena{margin-left:-1.15rem; margin-right:-1.15rem}
  figure.cena svg{border-left:0; border-right:0; border-radius:0}
  figure.cena figcaption{padding-left:1.15rem; padding-right:1.15rem}
}

/* ═══════════ gravura ═══════════
   Cena desenhada, ao lado dos esquemas. Os esquemas argumentam; estas mostram
   a cena de que a aula fala.

   As imagens são linha preta sobre fundo branco. Um retângulo branco sobre o
   papel bege do site salta à vista, e no tema escuro seria uma bandeira. Por
   isso o branco é dissolvido pela mistura em vez de recortado: em claro,
   multiply apaga o branco e deixa a linha; em escuro, inverte-se primeiro — a
   linha fica clara, o fundo preto — e screen apaga o preto. */
figure.gravura{margin:1.5rem 0 1.1rem; padding:0}
figure.gravura img{display:block; width:100%; height:auto;
  mix-blend-mode:multiply}
:root[data-theme="dark"] figure.gravura img,
figure.gravura img{transition:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) figure.gravura img{
    filter:invert(1); mix-blend-mode:screen}
}
:root[data-theme="dark"] figure.gravura img{filter:invert(1); mix-blend-mode:screen}
figure.gravura figcaption{margin-top:.7rem; font-family:var(--sans);
  font-size:.78rem; line-height:1.5; color:var(--ink-faint);
  border-top:1px solid var(--line-soft); padding-top:.6rem}
figure.gravura figcaption b{color:var(--ink-soft); font-weight:500}
@media (max-width:640px){
  figure.gravura{margin-left:-1.15rem; margin-right:-1.15rem}
  figure.gravura figcaption{padding-left:1.15rem; padding-right:1.15rem}
}