/* Consulting. The booking room.
   Inherits the loom's grammar: ink on cream, mono for anything measured. */

.consulting__title{
  font-family:var(--f-display); font-weight:430;
  font-size:clamp(2.4rem,6vw,4.8rem); line-height:1.06;
  max-width:13em; margin-bottom:clamp(2.4rem,5vh,3.6rem);
}
.consulting__body{
  font-size:clamp(1.1rem,1.5vw,1.25rem); line-height:1.78; max-width:33em;
}
.consulting__body p+p{ margin-top:1.4em; }

/* ---------------- booking ---------------- */

.bk{
  margin-top:clamp(4rem,10vh,7rem);
  padding-top:clamp(2.6rem,6vh,3.6rem);
  border-top:1px dashed rgba(128,124,116,.35);
  max-width:46em;
}
.bk__head{
  font-family:var(--f-display); font-weight:430;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.15;
  margin-bottom:clamp(2rem,4vh,2.8rem);
}
.bk__legend{
  font:400 .6rem/1.9 var(--f-mono); letter-spacing:.3em;
  opacity:.7; margin-bottom:1.1rem;
}
.bk__tz{ opacity:.55; letter-spacing:.2em; }
.bk__step{ margin-bottom:clamp(2.4rem,5vh,3.4rem); }
.bk__step[hidden]{ display:none; }

/* step 1 : the two kinds, stated as lines rather than cards */
.bk__kinds{ border-top:1px solid rgba(128,124,116,.28); }
.bk__kind{
  width:100%; text-align:left; background:none; cursor:pointer;
  border:0; border-bottom:1px solid rgba(128,124,116,.28);
  padding:1.15rem .2rem; display:flex; gap:1.4rem; align-items:baseline;
  color:inherit; font-family:inherit;
  transition:padding-left .35s var(--ease-out), background-color .35s var(--ease-out);
}
.bk__kind:hover,.bk__kind:focus-visible{ padding-left:.9rem; background:rgba(243,239,231,.05); }
.bk__kind[aria-checked="true"]{ padding-left:.9rem; background:rgba(243,239,231,.07); box-shadow:inset 2px 0 0 var(--cream); }
.bk__kind__name{ font-size:1.06rem; flex:1; }
.bk__kind__meta{ font:400 .68rem/1.6 var(--f-mono); letter-spacing:.16em; opacity:.72; white-space:nowrap; }

/* step 2 : days */
.bk__days{ display:flex; gap:.5rem; flex-wrap:wrap; }
.bk__day{
  cursor:pointer; background:none; color:inherit;
  border:1px solid rgba(128,124,116,.4);
  padding:.7rem .85rem; min-width:4.6rem; text-align:center;
  font:400 .7rem/1.5 var(--f-mono); letter-spacing:.1em;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.bk__day span{ display:block; opacity:.6; font-size:.62rem; letter-spacing:.18em; }
.bk__day:hover:not(:disabled){ border-color:var(--cream); }
.bk__day[aria-pressed="true"]{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.bk__day[aria-pressed="true"] span{ opacity:.7; }
.bk__day:disabled{ opacity:.28; cursor:default; }

/* step 3 : times */
.bk__times{ display:grid; grid-template-columns:repeat(auto-fill,minmax(6.2rem,1fr)); gap:.5rem; }
.bk__time{
  cursor:pointer; background:none; color:inherit;
  border:1px solid rgba(128,124,116,.4); padding:.72rem .4rem;
  font:400 .78rem/1 var(--f-mono); letter-spacing:.08em;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.bk__time:hover{ border-color:var(--cream); }
.bk__time[aria-pressed="true"]{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.bk__empty{ font:400 .74rem/1.7 var(--f-mono); letter-spacing:.1em; opacity:.6; }

/* step 4 : who */
.bk__form{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.4rem; max-width:38em; }
.bk__field{ display:flex; flex-direction:column; gap:.5rem; }
.bk__field--wide{ grid-column:1/-1; }
.bk__field label{ font:400 .6rem/1.6 var(--f-mono); letter-spacing:.24em; opacity:.75; }
.bk__field label span{ opacity:.55; }
.bk__field input,.bk__field textarea{
  font-family:var(--f-body); font-size:1rem; color:inherit;
  background:none; border:0; border-bottom:1px solid rgba(128,124,116,.5);
  padding:.5rem .1rem; border-radius:0; resize:vertical;
}
.bk__field input:focus,.bk__field textarea:focus{ outline:none; border-bottom-color:var(--cream); }
.bk__summary{
  grid-column:1/-1; font:400 .72rem/1.8 var(--f-mono);
  letter-spacing:.12em; opacity:.8;
  padding-top:.6rem; border-top:1px dashed rgba(128,124,116,.35);
}
.bk__error{ grid-column:1/-1; font:400 .72rem/1.7 var(--f-mono); letter-spacing:.08em; color:var(--cream); padding-left:.8rem; box-shadow:inset 2px 0 0 var(--metal); }
.bk__go{
  grid-column:1/-1; justify-self:start; cursor:pointer;
  background:var(--cream); color:var(--ink); border:1px solid var(--cream);
  padding:.9rem 2.2rem; font:400 .68rem/1 var(--f-mono); letter-spacing:.26em;
  transition:opacity .25s var(--ease-out);
}
.bk__go:hover{ opacity:.84; }
.bk__go:disabled{ opacity:.4; cursor:default; }

/* done */
.bk__doneline{ font-family:var(--f-display); font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.25; margin-bottom:1rem; }
.bk__donenote{ font-size:1rem; line-height:1.7; max-width:30em; opacity:.85; }
.bk__addcal{ margin-top:1.6rem; font:400 .62rem/1.9 var(--f-mono); letter-spacing:.22em; }
.bk__addcal a{ color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(243,239,231,.35); padding-bottom:.15em; }
.bk__addcal a:hover{ border-bottom-color:var(--cream); }
/* the elsewhere: for anyone this is not for. Reads as a pointer, not a refusal. */
.bk__elseline{
  font-size:clamp(1.05rem,1.4vw,1.18rem); line-height:1.75; max-width:31em;
  margin-bottom:1.6rem;
}
.bk__elselinks{ font:400 .62rem/1.9 var(--f-mono); letter-spacing:.22em; }
.bk__elselinks a{
  color:var(--cream); text-decoration:none;
  border-bottom:1px solid rgba(243,239,231,.35); padding-bottom:.15em;
}
.bk__elselinks a:hover{ border-bottom-color:var(--cream); }
.bk__status{ font:400 .68rem/1.7 var(--f-mono); letter-spacing:.14em; opacity:.6; margin-top:1.4rem; min-height:1.2em; }

@media (max-width:640px){
  .bk__form{ grid-template-columns:1fr; }
  .bk__kind{ flex-direction:column; gap:.35rem; }
}