:root {
  --ink: #29362d;
  --paper: #fffaf0;
  --cream: #f6edda;
  --orange: #f4a340;
  --rust: #be562f;
  --moss: #64735b;
  --pink: #e7a3a0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  min-height: 84px;
  padding: 1rem clamp(1.25rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid rgba(41,54,45,.15);
  background: rgba(255,250,240,.92);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}
.wordmark { display: inline-flex; align-items: center; gap: .7rem; font-family: "Fredoka", sans-serif; font-weight: 700; text-decoration: none; font-size: 1.12rem; }
.lantern { display:grid; place-items:center; width: 36px; height: 36px; color: var(--paper); background: var(--ink); border-radius: 10px 10px 14px 14px; }
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
nav a { font-weight: 600; text-decoration: none; font-size: .92rem; }
.nav-cta { padding: .7rem 1.05rem; color: var(--paper); background: var(--ink); border-radius: 999px; }

.hero {
  min-height: calc(100vh - 84px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  padding: clamp(4rem, 8vw, 7.5rem) clamp(1.25rem, 7vw, 7rem);
  overflow: hidden;
  position: relative;
}
.hero::before { content:""; position:absolute; width:28rem; height:28rem; border:1px solid rgba(41,54,45,.12); border-radius:50%; left:-17rem; top:8rem; }
.hero-copy { max-width: 690px; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1rem; color: var(--rust); font-weight: 700; text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; }
h1, h2 { font-family: "Fredoka", sans-serif; letter-spacing: -.035em; line-height: .98; margin: 0; font-weight:700; }
h1 { font-size: clamp(3.6rem, 6vw, 5.6rem); }
h1 em { color: var(--rust); font-weight: 600; font-style:normal; }
h2 { font-size: clamp(2.7rem, 5vw, 5.3rem); }
.intro { max-width: 620px; margin: 2rem 0 1.8rem; font-size: clamp(1.08rem, 1.5vw, 1.3rem); }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.button { min-height: 52px; padding: .85rem 1.35rem; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; border:2px solid var(--ink); border-radius:999px; text-decoration:none; font-weight:700; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(41,54,45,.12); }
.primary { background: var(--ink); color: var(--paper); }
.secondary { background: transparent; }
.microcopy { margin: 1rem 0 0; font-size: .9rem; color: #657067; }

.book-stage { min-height: 600px; position:relative; display:grid; place-items:center; }
.book-stage::before { content:""; position:absolute; width: min(38vw, 520px); aspect-ratio:1; background:var(--orange); border-radius: 45% 55% 50% 50% / 55% 40% 60% 45%; transform:rotate(-7deg); }
.book-cover { width:min(80%, 430px); aspect-ratio:.992; position:relative; z-index:2; background:#f8ead0; border:4px solid var(--ink); box-shadow: 16px 18px 0 var(--ink); transform:rotate(3deg); overflow:hidden; }
.book-cover img { width:100%; height:100%; object-fit:cover; }
.book-shadow { position:absolute; width:52%; height:7%; background:rgba(41,54,45,.18); filter:blur(13px); border-radius:50%; bottom:2%; transform:rotate(3deg); }
.cover-leaf { position:absolute; z-index:3; width:4.4rem; color:var(--rust); }
.cover-leaf svg { display:block; width:100%; fill:#fffaf0; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.leaf-one { top:8%; right:2%; transform:rotate(18deg); }
.leaf-two { bottom:12%; left:0; width:3.8rem; transform:rotate(-16deg); }

.promise { display:grid; grid-template-columns:repeat(3,1fr); background:var(--ink); color:var(--paper); padding:2rem clamp(1.25rem,7vw,7rem); }
.promise div { padding: .6rem clamp(1rem,3vw,3rem); border-right:1px solid rgba(255,250,240,.25); }
.promise div:first-child { padding-left:0; }.promise div:last-child { border:0; }
.promise strong, .promise span { display:block; }.promise strong { font-family:"Fredoka",sans-serif; font-size:1.35rem; }.promise span { color:#dbe1d8; font-size:.9rem; }

.inside { padding: clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,7rem); background:var(--cream); }
.section-heading { max-width:830px; margin:0 auto 5rem; text-align:center; }
.section-heading p:last-child { max-width:690px; margin:1.6rem auto 0; font-size:1.1rem; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2.3rem); max-width:1200px; margin:auto; align-items:center; }
.page-card { margin:0; padding:1rem 1rem 3.4rem; background:#fff; box-shadow:0 14px 40px rgba(41,54,45,.13); position:relative; transition: transform .25s ease; }
.page-card:hover { transform:translateY(-8px) rotate(0); }
.page-card img { width:100%; aspect-ratio:1; object-fit:cover; border:1px solid #ddd; }
.page-card figcaption { position:absolute; bottom:1rem; left:0; right:0; text-align:center; font-family:"Fredoka",sans-serif; font-size:1.05rem; font-weight:600; }
.tilt-left { transform:rotate(-3deg); }.featured { transform:translateY(-1.5rem); }.tilt-right { transform:rotate(3deg); }

.sample { padding:clamp(4rem,8vw,8rem) clamp(1.25rem,8vw,9rem); display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1fr); align-items:center; gap:clamp(3rem,8vw,8rem); background:var(--paper); }
.sample-preview { max-width:520px; padding:1rem; background:#fff; border:2px solid var(--ink); box-shadow:14px 16px 0 var(--orange); transform:rotate(-2deg); }
.sample-preview img { width:100%; aspect-ratio:1; object-fit:cover; }
.sample-copy { max-width:650px; }
.sample-copy p:not(.eyebrow):not(.sample-note) { margin:1.6rem 0 1.8rem; font-size:1.12rem; }
.sample-copy em { font-weight:700; }
.sample-note { margin:.9rem 0 0; color:#657067; font-size:.88rem; }

.coming-next { margin:0 clamp(1.25rem,5vw,5rem); padding:clamp(3rem,7vw,6rem); display:grid; grid-template-columns:minmax(290px,.85fr) minmax(0,1fr); align-items:center; gap:clamp(3rem,7vw,7rem); border:4px solid var(--ink); border-radius:34px; background:#f5ead4; color:var(--ink); overflow:hidden; box-shadow:0 10px 0 #c98545; }
.coming-next .eyebrow { color:#884425; }
.coming-copy p:last-child { max-width:650px; margin:1.6rem 0 0; color:var(--ink); font-size:1.08rem; }
.season-grid { width:min(100%,480px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.35rem; margin:auto; position:relative; }
.season-grid::before { content:""; position:absolute; inset:-1.25rem; border:3px dashed rgba(41,54,45,.28); border-radius:42% 58% 48% 52%; transform:rotate(-2deg); pointer-events:none; }
.season-card { min-height:200px; padding:1.15rem; position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; color:var(--ink); border:4px solid var(--ink); border-radius:25px; box-shadow:8px 9px 0 var(--ink); text-decoration:none; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.season-card:nth-child(1) { transform:rotate(-3deg); }
.season-card:nth-child(2) { transform:rotate(2.5deg); }
.season-card:nth-child(3) { transform:rotate(2deg); }
.season-card:nth-child(4) { transform:rotate(-2.5deg); }
.season-card:hover { transform:translateY(-5px) rotate(0); box-shadow:10px 13px 0 var(--ink); }
.season-card strong,.season-card span { display:block; }
.season-card strong { font-family:"Fredoka",sans-serif; font-size:1.65rem; line-height:1; }
.season-card p { margin:.75rem 0 1rem; font-size:.9rem; font-weight:700; line-height:1.3; }
.season-card div > span { width:max-content; margin-top:.5rem; padding:.25rem .55rem; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; border:2px solid var(--ink); border-radius:999px; background:rgba(255,250,240,.7); }
.season-autumn { background:#e99a43; }
.season-winter { background:#d3e0dd; }
.season-spring { background:#bdcc98; }
.season-summer { background:#efd180; }

.about { margin:clamp(1.25rem,5vw,5rem); padding:clamp(2rem,5vw,4.5rem); display:grid; grid-template-columns:190px 1fr auto; align-items:center; gap:clamp(2rem,5vw,5rem); border:3px solid var(--ink); border-radius:34px; background:#cdd5ae; }
.studio-mark { width:190px; aspect-ratio:1; object-fit:cover; border-radius:50%; mix-blend-mode:multiply; }
.about h2 { font-size:clamp(2.3rem,4vw,4.2rem); }.about p:last-child { max-width:650px; font-size:1.08rem; }

footer { padding:2.5rem clamp(1.25rem,5vw,5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; border-top:1px solid rgba(41,54,45,.15); font-size:.9rem; }

@media (max-width: 820px) {
  nav > a:not(.nav-cta) { display:none; }
  .hero { grid-template-columns:1fr; padding-top:4rem; }
  .book-stage { min-height:520px; }
  .book-stage::before { width:min(90vw,480px); }
  .promise { grid-template-columns:1fr; }
  .promise div { padding:1rem 0; border-right:0; border-bottom:1px solid rgba(255,250,240,.25); }
  .gallery { grid-template-columns:1fr; max-width:440px; gap:3rem; }
  .featured { transform:none; }.tilt-left,.tilt-right { transform:rotate(0); }
  .sample, .coming-next { grid-template-columns:1fr; }
  .sample-preview { justify-self:center; }
  .season-grid { width:min(88vw,480px); }
  .about { grid-template-columns:1fr; text-align:center; justify-items:center; }
  footer { flex-direction:column; text-align:center; }
}
@media (max-width: 520px) {
  .site-header { min-height:72px; }
  .wordmark { font-size:1rem; }
  .nav-cta { padding:.58rem .8rem; font-size:.82rem; }
  h1 { font-size:3.25rem; }
  .book-stage { min-height:450px; }
  .book-cover { width:82%; }
  .inside { padding-top:5rem; }
  .season-card { min-height:145px; padding:1rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }