.app-body{background:var(--ivory)}
.app-main{padding:7.2rem 0 4rem}
.nav-mini{display:none}
.app-wrap{width:min(920px,calc(100% - 2.2rem));margin-inline:auto}
.app-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,4vw,3.1rem);margin:.4rem 0 1.4rem}

.book{width:min(1040px,calc(100% - 2.2rem));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:3rem;align-items:start}
.book-steps{display:flex;gap:.2rem;list-style:none;margin:0 0 2rem;padding:0;flex-wrap:wrap}
.book-steps li{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
  padding:.4rem .85rem;border-bottom:1px solid transparent;cursor:pointer;
}
.book-steps li.is-on{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.book-steps li.is-done{color:var(--ink)}
.book-panel{display:none}
.book-panel.is-on{display:block;animation:rise .55s var(--ease)}
.book-panel h2{font-family:var(--font-display);font-weight:400;font-size:1.75rem;margin:0 0 1.2rem}

.svc-list{display:grid;gap:.15rem}
.svc-row{
  display:grid;grid-template-columns:88px 1fr auto;gap:1.1rem;align-items:center;
  text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.85rem 0;cursor:pointer;color:inherit;width:100%;
  transition:opacity .35s var(--ease);
}
.svc-row img{width:88px;height:68px;object-fit:cover}
.svc-row strong{display:block;font-family:var(--font-display);font-size:1.4rem;font-weight:400}
.svc-row em{display:block;font-style:normal;color:var(--ink-soft);font-size:.88rem;font-weight:300;margin-top:.2rem}
.svc-row small{text-align:right;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);line-height:1.55}
.svc-row.is-on strong{color:var(--terracotta)}

.cal-nav{display:flex;align-items:center;justify-content:space-between;margin:0 0 1.2rem}
.cal-nav p{font-family:var(--font-display);font-size:1.45rem;margin:0;font-weight:400}
.cal-nav button{
  width:2.4rem;height:2.4rem;border:1px solid var(--line);background:transparent;
  cursor:pointer;font-size:1.15rem;color:var(--ink);border-radius:50%;
}
.cal-nav button:hover{border-color:var(--terracotta);color:var(--terracotta)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem .2rem}
.cal-dow{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);text-align:center;padding:.2rem 0 .5rem}
.cal-empty{min-height:3rem}
.cal-day{
  position:relative;min-height:3rem;border:0;background:transparent;cursor:pointer;
  font:inherit;color:var(--ink);display:grid;place-items:center;
  animation:rise .5s var(--ease) both;
}
.cal-day.is-off{opacity:.22;cursor:not-allowed;animation:none}
.cal-day.is-open::after{
  content:"";position:absolute;bottom:.35rem;left:50%;width:3px;height:3px;border-radius:50%;
  background:var(--terracotta);transform:translateX(-50%);opacity:.55;
}
.cal-day.is-on{color:var(--terracotta);background:transparent}
.cal-day.is-on::before{
  content:"";position:absolute;inset:.2rem;
  border:1px solid var(--terracotta);border-radius:50%;
  border-bottom-color:transparent;transform:rotate(-28deg);opacity:.9;
}
.cal-day.is-on::after{display:none}

.slot-group{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin:1.2rem 0 .55rem}
.slots{display:flex;flex-wrap:wrap;gap:.5rem}
.slot-chip{
  min-width:4.6rem;border:1px solid var(--line);background:transparent;
  padding:.7rem .9rem;cursor:pointer;font:inherit;color:inherit;border-radius:999px;
  animation:rise .4s var(--ease) both;
}
.slot-chip:hover{border-color:var(--terracotta)}
.slot-chip.is-on{border-color:var(--terracotta);color:var(--terracotta)}

.book-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem;margin:1rem 0 1.5rem}
.book-fields .is-wide{grid-column:1/-1}
.book-form label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.book-form input,.book-form textarea{
  width:100%;font-size:16px;border:0;border-bottom:1px solid var(--line);
  background:transparent;padding:.65rem 0;color:var(--ink);
}
.pay-note{font-size:.85rem;color:var(--sage);margin:.4rem 0 1rem}

.book-recap{position:sticky;top:6.4rem;padding:0 0 0 1.2rem;border-left:1px solid var(--line)}
.book-recap h2{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin:.25rem 0 1.1rem}
.book-recap ul{list-style:none;display:grid;gap:.85rem;margin:0 0 1rem}
.book-recap li{display:flex;justify-content:space-between;gap:.8rem;font-size:.92rem}
.book-recap span{color:var(--taupe);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.book-recap b{font-weight:400;text-align:right;font-family:var(--font-display);font-size:1.15rem}

.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.prod-card{background:transparent}
.prod-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prod-card div{padding:1rem 0 1.2rem}
.prod-card h3{font-family:var(--font-display);font-size:1.45rem;font-weight:400}

.journal-page{width:min(720px,calc(100% - 2.2rem));margin-inline:auto}
.journal-note{padding:2.6rem 0 2.8rem;border-bottom:1px solid var(--line)}
.journal-note:last-child{border-bottom:0}
.journal-note h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.4rem);margin:.35rem 0 1.1rem;line-height:1.15}
.journal-note img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 1.4rem}
.journal-note p{color:var(--ink-soft);font-weight:300;margin:0 0 .9rem}

@media (max-width:860px){
  .book{grid-template-columns:1fr;gap:2rem}
  .book-recap{position:static;order:-1;border-left:0;border-bottom:1px solid var(--line);padding:0 0 1.2rem}
  .book-fields,.prod-grid{grid-template-columns:1fr}
  .nav-mini{display:inline-flex}
  .nav-desktop{display:none}
  .svc-row{grid-template-columns:72px 1fr}
  .svc-row small{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .book-panel.is-on,.cal-day,.slot-chip{animation:none}
}
