/* Methods catalogue: a visual front door for finished work, with the roadmap kept secondary. */
.methods-ready{
  padding:118px 0 132px;
  border-bottom:1px solid var(--ed-rule);
  background:var(--ed-paper-light);
}
.methods-ready__head{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(330px,.62fr);
  gap:clamp(60px,8vw,130px);
  align-items:end;
  margin-bottom:54px;
}
.methods-ready__head h2{
  max-width:760px;
  margin:0;
  color:var(--ed-ink);
  font-size:clamp(52px,5.4vw,80px);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.02;
}
.methods-ready__head>p{
  max-width:520px;
  margin:0 0 5px;
  color:var(--ed-ink-soft);
  font-size:18px;
  line-height:1.72;
}
.methods-ready__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:250px;
  gap:18px;
}
.method-ready{
  position:relative;
  grid-column:span 5;
  grid-row:span 2;
  min-height:518px;
  overflow:hidden;
  border:1px solid rgba(31,42,38,.24);
  background:#252a27;
  color:#fff;
  isolation:isolate;
}
.method-ready--acupuncture,.method-ready--massage{grid-column:span 7}
.method-ready img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.76) contrast(1.02);
  transition:transform .8s cubic-bezier(.2,.72,.24,1),filter .5s ease;
}
.method-ready--acupuncture img{object-position:54% center}
.method-ready--cupping img{object-position:58% center}
.method-ready--leech img{object-position:center}
.method-ready--massage img{object-position:center 42%}
.method-ready__veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(8,12,10,.08) 18%,rgba(8,12,10,.2) 43%,rgba(8,12,10,.9) 100%),linear-gradient(90deg,rgba(8,12,10,.26),transparent 58%);
}
.method-ready__number{
  position:absolute;
  top:28px;
  left:30px;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  color:#fff;
  font-size:13px;
  font-weight:650;
}
.method-ready__copy{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:10px 24px;
  padding:34px 34px 32px;
}
.method-ready__copy small{
  grid-column:1/-1;
  color:rgba(255,255,255,.76);
  font-size:13px;
  font-weight:650;
  letter-spacing:.03em;
}
.method-ready__copy strong{
  color:#fff;
  font-family:var(--ed-serif);
  font-size:clamp(40px,4vw,62px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:.98;
}
.method-ready__copy em{
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.58);
  color:#fff;
  font-size:15px;
  font-style:normal;
  white-space:nowrap;
}
.method-ready__copy em b{margin-left:18px;font-weight:500}
.method-ready--cupping .method-ready__copy,.method-ready--leech .method-ready__copy{grid-template-columns:1fr}
.method-ready--cupping .method-ready__copy em,.method-ready--leech .method-ready__copy em{justify-self:start;margin-top:5px}
.method-ready--leech .method-ready__copy strong{font-size:clamp(38px,3.3vw,50px)}
.method-ready:hover img{transform:scale(1.035);filter:saturate(.9) contrast(1.05)}
.method-ready:hover .method-ready__copy em{border-bottom-color:#fff}

.methods-backlog-section{
  padding:92px 0 112px;
  background:var(--ed-paper);
}
.methods-backlog{
  border-top:1px solid var(--ed-rule);
  border-bottom:1px solid var(--ed-rule);
}
.methods-backlog>summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 42px;
  gap:36px;
  align-items:center;
  min-height:152px;
  padding:28px 0;
  color:var(--ed-ink);
  cursor:pointer;
  list-style:none;
}
.methods-backlog>summary::-webkit-details-marker{display:none}
.methods-backlog>summary>span:first-child{display:grid;gap:9px}
.methods-backlog>summary small{
  color:var(--ed-rust-dark);
  font-size:13px;
  font-weight:650;
}
.methods-backlog>summary strong{
  font-family:var(--ed-serif);
  font-size:clamp(34px,3.2vw,48px);
  font-weight:500;
  letter-spacing:-.035em;
}
.methods-backlog__status{color:var(--ed-ink-soft);font-size:16px}
.methods-backlog>summary i{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid var(--ed-rule);
  border-radius:50%;
  font-family:var(--ed-serif);
  font-size:27px;
  font-style:normal;
  line-height:1;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.methods-backlog>summary:hover i{background:var(--ed-petrol-deep);color:#fff}
.methods-backlog[open]>summary i{transform:rotate(45deg)}
.methods-backlog__body{padding:12px 0 24px}
.methods-backlog__intro{
  max-width:760px;
  margin:0 0 72px;
  color:var(--ed-ink-soft);
  font-size:18px;
  line-height:1.72;
}
.methods-backlog .registry-family:last-child .registry-methods{margin-bottom:18px}

@media(max-width:960px){
  .methods-ready__head{grid-template-columns:1fr;gap:24px}
  .methods-ready__head>p{max-width:720px}
  .methods-ready__grid{grid-template-columns:1fr 1fr;grid-auto-rows:400px}
  .method-ready,.method-ready--acupuncture,.method-ready--massage{grid-column:span 1;grid-row:span 1;min-height:400px}
  .method-ready__copy{grid-template-columns:1fr}
  .method-ready__copy em{justify-self:start;margin-top:5px}
}

@media(max-width:760px){
  .methods-ready{padding:82px 0 92px}
  .methods-ready__head{margin-bottom:36px}
  .methods-ready__head h2{font-size:46px}
  .methods-ready__head>p{font-size:17px}
  .methods-ready__grid{grid-template-columns:1fr;grid-auto-rows:430px;gap:14px}
  .method-ready,.method-ready--acupuncture,.method-ready--massage{min-height:430px}
  .method-ready__copy{grid-template-columns:1fr;padding:28px 24px 25px}
  .method-ready__copy strong{font-size:42px}
  .method-ready__copy em{justify-self:start;margin-top:8px}
  .method-ready__number{top:22px;left:22px}
  .methods-backlog-section{padding:64px 0 82px}
  .methods-backlog>summary{grid-template-columns:1fr 42px;gap:16px;min-height:138px}
  .methods-backlog__status{grid-column:1;grid-row:2;font-size:15px}
  .methods-backlog>summary i{grid-column:2;grid-row:1/3}
  .methods-backlog__intro{margin-bottom:52px;font-size:17px}
}

@media(max-width:420px){
  .methods-ready__head h2{font-size:42px}
  .methods-ready__grid{grid-auto-rows:390px}
  .method-ready,.method-ready--acupuncture,.method-ready--massage{min-height:390px}
  .method-ready__copy strong{font-size:38px}
}