@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&family=Cormorant+Garamond:wght@400;500;600&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#4d4b3f;
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
  line-height:1.35;
  background:#e9e8dc url("imagenes/fondo-cuadros-tela.png") center top/720px 720px repeat;
  cursor:url("imagenes/stickers/cursor-pluma.png") 4 4,auto;
}
a{color:#3f563d;text-decoration:none}
a:hover{text-decoration:underline}
.site{width:min(1120px,94vw);margin:28px auto}
.paper{
  position:relative;
  background:#f7f1e4;
  border:1px solid #c8c1ad;
  box-shadow:5px 6px 0 rgba(58,72,51,.15);
  padding:24px 30px 30px;
}
.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #c9c2ae;padding-bottom:12px;margin-bottom:14px}
.brand{font-family:"Beth Ellen",cursive;color:#3f513a;font-size:22px}
.toplinks{font-size:18px}
.nav{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 24px;font-size:19px}
.nav a{color:#4c5a45}
.page-title{font-family:"Beth Ellen",cursive;font-size:43px;line-height:1.2;color:#40543d;text-align:center;margin:10px 0 32px}
.box,.spread{
  position:relative;
  background:rgba(250,246,235,.94);
  border:1px solid #c9c1ac;
  box-shadow:3px 4px 0 rgba(61,73,53,.10);
  padding:22px;
  margin-bottom:22px;
}
.box h2,.spread-title,.section-title{font-family:"Beth Ellen",cursive;color:#40523d;margin:0 0 14px;font-size:25px;line-height:1.35}
.stk{position:absolute;z-index:4;pointer-events:none;display:block}
.stk.star{width:58px;top:-31px;left:-25px;transform:rotate(-9deg)}
.stk.flower{width:62px;top:-31px;right:-25px;transform:rotate(7deg)}
.stk.heart{width:52px;right:20px;bottom:-29px;transform:rotate(7deg)}
.stk.water{width:85px;right:-31px;bottom:-35px;transform:rotate(5deg)}
.stk.tape{width:92px;top:-13px;left:35px;transform:rotate(-4deg);opacity:.82}
.home-grid{display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,2fr);gap:28px;align-items:start}
.home-side{display:flex;flex-direction:column}
.home-main{min-height:380px;padding:30px 34px}
.home-main h2{font-size:30px}
.welcome{font-size:23px;max-width:690px}
.reading-box .reading-title{font-family:"Beth Ellen",cursive;font-size:24px;color:#40523d;margin-bottom:14px}
.reading-box .book-info{font-size:19px}
.reading-box .book-info strong{color:#40523d}
.dog-frame iframe{width:100%;height:220px;border:0;display:block}
.meta{font-size:17px;color:#6d7564}

.crochet-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;align-items:start}
.crochet-nav{position:sticky;top:22px}
.crochet-nav .box{padding:18px 16px}
.crochet-nav h2{font-size:22px;margin-bottom:14px}
.crochet-nav-intro{font-size:17px;line-height:1.3;margin-bottom:16px;color:#697160}
.crochet-nav a{display:block;padding:9px 4px;border-bottom:1px dashed #b5b9a8;font-family:"Beth Ellen",cursive;font-size:14px;color:#40543d}
.crochet-nav a:last-child{border-bottom:0}
.crochet-nav a:hover{text-decoration:none;background:rgba(111,137,105,.08)}
.notebook-spread{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:700px;border:1px solid #8f9b83;border-radius:16px;background:#62765a;padding:13px;box-shadow:7px 8px 0 rgba(61,73,53,.16);overflow:visible}
.notebook-page{position:relative;min-width:0;padding:34px 28px 30px;background-color:#faf5e8;background-image:linear-gradient(rgba(111,137,105,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(111,137,105,.12) 1px,transparent 1px);background-size:23px 23px;box-shadow:inset 0 0 18px rgba(85,78,55,.08)}
.notebook-left{border-radius:11px 2px 2px 11px;padding-right:32px}
.notebook-right{border-radius:2px 11px 11px 2px;padding-left:32px}
.notebook-spread:after{content:"";position:absolute;top:13px;bottom:13px;left:50%;width:13px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(63,68,51,.02),rgba(63,68,51,.18),rgba(255,255,255,.3),rgba(63,68,51,.04));pointer-events:none;z-index:3}
.spread-title{font-family:"Beth Ellen",cursive;color:#40523d;font-size:27px;line-height:1.25;margin:0 0 22px}
.spread-subtitle{font-family:"Beth Ellen",cursive;color:#66705d;font-size:14px;margin:0 0 18px;transform:rotate(-1deg)}
.journal-project{position:relative;text-align:center;z-index:2}
.journal-project img{display:block;width:100%;height:auto;object-fit:contain;background:#fffdf7;border:6px solid #fffdf7;box-shadow:2px 3px 8px rgba(40,45,35,.16)}
.project-large{margin:14px 4px 20px;transform:rotate(-1deg)}
.project-large img{max-height:330px}
.project-small-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.project-small-grid .journal-project:first-child{transform:rotate(1.4deg);margin-top:8px}
.project-small-grid .journal-project:last-child{transform:rotate(-2deg);margin-top:28px}
.project-small-grid img{max-height:170px}
.hand-note{font-family:"Beth Ellen",cursive;color:#56624f;font-size:13px;line-height:1.4;margin-top:9px}
.journal-caption{display:flex;justify-content:space-between;gap:10px;margin:20px 4px 0;font-family:"Beth Ellen",cursive;font-size:11px;color:#68705e;transform:rotate(-1deg)}
.page-kicker{font-family:"Beth Ellen",cursive;font-size:17px;color:#6a735f;margin-bottom:17px;transform:rotate(1deg)}
.journal-note{margin:20px 5px 0;padding-top:14px;border-top:1px dashed #abb49f;font-size:17px;line-height:1.35;color:#596452}
.crochet-doodle{display:flex;align-items:center;gap:10px;margin:25px 2px 0;padding-top:16px;border-top:1px dashed #aeb5a0;font-family:"Beth Ellen",cursive;color:#66705d;font-size:12px;transform:rotate(-1deg)}
.crochet-doodle img{width:78px;height:auto;max-height:78px;object-fit:contain;background:transparent;box-shadow:none;border:0}
.in-progress-spread{margin-top:30px}
.progress-notebook .notebook-page{min-height:560px}
.progress-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.progress-project{position:relative;text-align:center}
.progress-project:nth-child(1){transform:rotate(-1deg)}
.progress-project:nth-child(2){transform:rotate(1.5deg);margin-top:25px}
.progress-project:nth-child(3){grid-column:1 / -1;width:62%;margin:12px auto 0;transform:rotate(-1.5deg)}
.progress-project img{display:block;width:100%;height:175px;object-fit:cover;background:#fffdf7;border:6px solid #fffdf7;box-shadow:2px 3px 8px rgba(40,45,35,.16)}
.progress-project:nth-child(3) img{height:210px}
.progress-label{font-family:"Beth Ellen",cursive;font-size:13px;color:#56624f;margin-top:9px}
.article{padding:5px 0 12px}.article-date{font-size:15px;letter-spacing:1px;color:#78806f}.article-title{font-family:"Beth Ellen",cursive;font-size:24px;color:#40523d;margin:7px 0}.article-description{margin-bottom:6px}.divider{border:0;border-top:1px dashed #abb49f;margin:20px 0}
.about-layout{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start}.about-photo{width:100%;max-height:430px;object-fit:cover;border:8px solid #fffdf7;box-shadow:2px 3px 8px rgba(0,0,0,.14)}.about-text{font-size:21px}
.guestbook-intro{text-align:center;max-width:900px;margin:0 auto 24px}.guestbook-feather{width:105px;height:auto;margin:0 auto 6px;display:block}.guestbook-title{font-family:"Beth Ellen",cursive;font-size:42px;color:#40523d;margin:8px 0 18px}.guestbook-frame{position:relative;background:#fbf7eb;border:1px solid #c9c1ac;padding:14px;box-shadow:4px 5px 0 rgba(61,73,53,.12);overflow:hidden}.guestbook-frame iframe{display:block;width:100%;height:920px;border:0;background:#f5f1e7}
.footer{text-align:center;font-size:16px;color:#6c7465;margin-top:25px}
@media(max-width:760px){
  body{font-size:18px}
  .site{width:96vw;margin:12px auto}
  .paper{padding:18px 15px 25px}
  .home-grid,.crochet-layout,.about-layout{grid-template-columns:1fr}
  .crochet-nav{position:static}
  .notebook-spread{grid-template-columns:1fr;min-height:auto}
  .notebook-page{min-height:520px}
  .notebook-right{border-radius:0 0 11px 11px;padding-left:28px}
  .notebook-left{border-radius:11px 11px 0 0;padding-right:28px}
  .notebook-spread:after{display:none}
  .progress-project:nth-child(3){width:100%}
  .home-side{order:2}
  .home-main{order:1}
  .project-collage{grid-template-columns:1fr}
  .page-title,.guestbook-title{font-size:32px}
  .nav{gap:13px}
  .stk.star,.stk.flower{width:48px}
  .stk.water{width:65px}
}