/* Tema da Editora: direção F-mesa-noturna. Paleta e fontes copiadas de v2-entregas/mocks-editora/F-mesa-noturna/LEIA.md. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Literata:ital,wght@0,400;0,500;1,400&family=Caveat:wght@500;600&family=Jost:wght@300;400;500&display=swap');
:root{
  --mesa:#110c09;--mesa2:#0a0705;--ouro:#c9a45c;--ouro-c:#ecd393;--ouro-e:#8a6a2e;
  --perg:#efe3cc;--texto:#d9cab0;--mudo:#a08d74;--apag:#8a7862;
  --papel1:#f7f1e4;--papel2:#ece3d0;--tinta:#241c16;--caneta:#b3302a;--lapis:#2f5c97;
  --marroquim:#2a1012;--oxblood:#7b2128;--havana:#86532f;--linho:#a99272;
  --carmim:#d0563f;--ocre:#d49b48;--salvia:#9aaa7c;--filete:rgba(201,164,92,.22);
  --c:'Cormorant Garamond',serif;--l:'Literata',serif;--h:'Caveat',cursive;--j:'Jost',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(1100px 760px at 30% 50%,rgba(168,112,60,.20),transparent 70%),linear-gradient(160deg,var(--mesa),var(--mesa2));color:var(--texto);font-family:var(--j);font-weight:400;-webkit-font-smoothing:antialiased;overflow:auto}
.rot{font:400 11px/1 var(--j);letter-spacing:.22em;text-transform:uppercase;color:var(--mudo)}
.topo{display:flex;align-items:center;height:86px;margin:0 84px;border-bottom:1px solid var(--filete)}
.marca{font:italic 500 31px/1 var(--c);color:var(--perg)}
.marca small{font:400 10px var(--j);font-style:normal;letter-spacing:.3em;color:var(--apag);margin-left:14px;text-transform:uppercase}
nav{display:flex;gap:30px;margin-left:56px;height:100%;align-items:center}
nav a{font:400 14px var(--j);color:var(--mudo);text-decoration:none;position:relative}
nav a.on{color:var(--perg)}
nav a.on:after{content:'';position:absolute;left:0;right:0;bottom:-31px;height:1px;background:var(--ouro)}
.dir{margin-left:auto;display:flex;align-items:center;gap:26px}
.cota{font:400 13px var(--j);color:var(--mudo)}.cota b{font:italic 500 21px var(--c);color:var(--ouro);margin-right:5px}
.data{font:italic 400 18px var(--c);color:var(--texto);border-left:1px solid var(--filete);padding-left:26px}
.av{width:36px;height:36px;border-radius:50%;border:1px solid var(--ouro-e);display:grid;place-items:center;font:600 13px var(--c);color:var(--perg)}
.btn{flex:none;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;font:500 13px var(--j);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ouro);color:var(--mesa);background:linear-gradient(180deg,var(--ouro-c),var(--ouro))}
.btn.lin{background:transparent;color:var(--ouro-c);border-color:var(--ouro-e)}
/* lombada: o material sobe a cada etapa, como na estante da Mesa */
.lomb{position:relative;flex:none;display:flex;align-items:center;justify-content:center;border-radius:3px 3px 0 0;background-image:url(arte/couro.jpg);background-size:260px;background-blend-mode:multiply;box-shadow:inset 7px 0 10px rgba(255,235,200,.16),inset -10px 0 14px rgba(0,0,0,.6),inset 0 6px 8px rgba(0,0,0,.25),3px 0 6px rgba(0,0,0,.55)}
.lomb span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 17px/1.1 var(--c);letter-spacing:.03em;white-space:nowrap;overflow:hidden;max-height:calc(100% - 44px);color:#ecd393;text-shadow:0 1px 1px rgba(0,0,0,.75)}
.lomb:before,.lomb:after{content:'';position:absolute;left:0;right:0;height:5px;border-top:1px solid rgba(236,211,147,.7);border-bottom:1px solid rgba(236,211,147,.45)}
.lomb:before{top:14px}.lomb:after{bottom:14px}
.linho{background-color:#c9b48f;background-image:url(arte/linho.jpg);background-size:320px}.linho span{color:#3b2a1a;text-shadow:none}.linho:before,.linho:after{border-color:rgba(60,40,20,.5)}
.havana{background-color:#a4683a}
.oxblood{background-color:#9b2b33}
.marroquim{background-color:#3d2528}
.fita{position:absolute;top:-9px;left:50%;width:7px;height:24px;margin-left:-3px;background:var(--carmim);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.fita.oc{background:var(--ocre)}
.tab{display:none}
@media (max-width:600px){
  body{overflow:auto;background:radial-gradient(420px 520px at 50% 22%,rgba(168,112,60,.22),transparent 72%),linear-gradient(170deg,var(--mesa),var(--mesa2))}
  .topo{height:60px;margin:0 20px}
  .marca{font-size:25px}.marca small,nav,.data,.cota{display:none}
  .dir{gap:0}.av{width:32px;height:32px;font-size:12px}
  .tab{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;border-top:1px solid var(--filete);background:#0d0907;z-index:30;justify-content:space-around;align-items:center;font:400 11px var(--j);color:var(--mudo)}
  .tab b{font-weight:400;color:var(--ouro-c)}
}

/* peças comuns das telas */
.pg{margin:0 84px;height:calc(100vh / var(--z,1) - 86px);display:grid}
.h1{font:italic 400 54px/1.03 var(--c);color:var(--perg)}
.sub{font:400 15px/1.55 var(--j);color:var(--mudo)}
.papel{background:linear-gradient(170deg,var(--papel1),var(--papel2));box-shadow:0 30px 60px rgba(0,0,0,.62);color:var(--tinta)}
.cx{border:1px solid var(--filete);padding:26px}
.ouro{font:500 74px/.95 var(--c);font-variant-numeric:lining-nums;background:linear-gradient(180deg,var(--ouro-c),var(--ouro-e));-webkit-background-clip:text;background-clip:text;color:transparent}
.fil{height:1px;background:linear-gradient(90deg,var(--ouro),transparent)}
.ln{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--filete);font:400 15px var(--j);color:var(--texto)}
.ln b{font-weight:400;color:var(--perg)}.ln small{font:400 13px var(--j);color:var(--mudo)}.ln .fim{margin-left:auto}
.av2{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--ouro-e);display:grid;place-items:center;font:600 13px var(--c);color:var(--perg)}
.tag{font:400 11px var(--j);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--filete);color:var(--ouro)}
.campo{display:block;margin-bottom:16px}.campo span{display:block;margin-bottom:8px}
.campo div{height:46px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--filete);font:400 15px var(--j);color:var(--perg)}
.cor{color:var(--carmim)}.sal{color:var(--salvia)}
@media (max-width:600px){
  .pg{display:block;margin:0 20px;height:auto;padding:20px 0 84px;overflow:hidden}
  .h1{font-size:36px}.sub{font-size:14px}.ouro{font-size:54px}.cx{padding:18px}
}