/* Planning practice index: quiet editorial plates built around the original drawings. */
.content-practice{
  --practice-bubble-lime:rgba(160,180,28,.14);
  --practice-bubble-olive:rgba(69,88,22,.1);
}

.practice-index-page{position:relative;overflow:hidden;background:var(--bg)}

.practice-work{
  position:relative;
  width:100%;
  max-width:1520px;
  margin-inline:auto;
  padding:0 var(--pad) clamp(6rem,10vw,10rem);
}

.practice-case{
  position:relative;
  isolation:isolate;
  display:grid;
  padding:clamp(5rem,8vw,8rem) 0;
  border-bottom:1px solid var(--line);
}
.practice-case::before,
.practice-case::after{
  position:absolute;
  z-index:-1;
  pointer-events:none;
  will-change:translate;
}
.practice-case-analysis{
  padding-top:clamp(4.5rem,7vw,7rem);
  grid-template-columns:minmax(300px,.68fr) minmax(0,1.32fr);
  align-items:start;
  gap:clamp(3.5rem,7vw,8rem);
}
.practice-case-analysis::after{
  content:"";
  --practice-drift-x:12px;
  --practice-drift-y:-8px;
  bottom:clamp(-8rem,-8vw,-5.5rem);
  right:calc(0px - var(--pad) - 8vw);
  width:clamp(360px,38vw,660px);
  height:clamp(260px,31vw,520px);
  background:var(--practice-bubble-lime);
  border-radius:47% 53% 36% 64% / 59% 39% 61% 41%;
  transform:rotate(7deg);
  animation:practice-boundary-drift 22s ease-in-out infinite alternate;
}
.practice-case-design{
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.7fr);
  align-items:start;
  gap:clamp(3.5rem,7vw,8rem);
}
.practice-case-design::before{
  content:"";
  --practice-drift-x:-10px;
  --practice-drift-y:-6px;
  top:clamp(-8rem,-8vw,-5.5rem);
  left:calc(0px - var(--pad) - 9vw);
  width:clamp(380px,42vw,700px);
  height:clamp(280px,32vw,540px);
  background:var(--practice-bubble-olive);
  border-radius:58% 42% 61% 39% / 43% 57% 42% 58%;
  transform:rotate(-8deg);
  animation:practice-boundary-drift 26s ease-in-out -7s infinite alternate;
}

@keyframes practice-boundary-drift{
  from{translate:0 0}
  to{translate:var(--practice-drift-x) var(--practice-drift-y)}
}
.practice-case-copy{max-width:570px;padding-top:.25rem}
.practice-case-copy>span{
  display:block;
  margin-bottom:1.1rem;
  color:var(--green-deep);
  font:700 .68rem/1.4 var(--mono);
  letter-spacing:.1em;
}
.practice-case-copy h2{
  max-width:630px;
  margin:0;
  color:var(--head);
  font-size:clamp(2.55rem,4.25vw,4.9rem);
  font-weight:620;
  line-height:1.07;
  letter-spacing:-.052em;
}
.practice-case-copy>p{
  max-width:590px;
  margin:clamp(1.4rem,2.4vw,2rem) 0 0;
  color:var(--lead);
  font-size:clamp(.98rem,1.08vw,1.08rem);
  line-height:1.9;
  text-wrap:pretty;
}
.practice-case-copy ul{
  margin:clamp(2rem,3vw,3rem) 0 0;
  padding:0;
  border-bottom:1px solid var(--line);
  list-style:none;
  counter-reset:practice-point;
}
.practice-case-copy li{
  display:grid;
  min-height:52px;
  padding:.8rem 0;
  grid-template-columns:2rem minmax(0,1fr);
  align-items:center;
  gap:.75rem;
  border-top:1px solid var(--line);
  color:var(--head);
  font-size:.82rem;
  font-weight:700;
  counter-increment:practice-point;
}
.practice-case-copy li::before{
  content:"0" counter(practice-point);
  color:var(--grey);
  font:700 .6rem var(--mono);
  letter-spacing:.06em;
}

.practice-case-gallery{
  display:grid;
  min-width:0;
  grid-template-columns:1fr 1fr;
  gap:1px;
  padding:1px;
  background:var(--line);
}
.practice-case-gallery figure,.practice-design-figure{
  min-width:0;
  margin:0;
  background:var(--bg-alt);
}
.practice-case-gallery img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:413/300;
  object-fit:contain;
}
.practice-design-figure{
  grid-column:1;
  grid-row:1;
  overflow:hidden;
  border:1px solid var(--line);
}
.practice-case-design .practice-case-copy{grid-column:2;grid-row:1}
.practice-design-figure img{display:block;width:100%;height:auto}

html[lang="en"] .practice-case-copy h2{font-family:var(--display)}

@media(max-width:980px){
  .practice-case-analysis,.practice-case-design{grid-template-columns:1fr;gap:3rem}
  .practice-case-analysis::after{right:calc(0px - var(--pad) - 15vw);bottom:-4rem;width:72vw;height:32%}
  .practice-case-design::before{top:-4.5rem;left:calc(0px - var(--pad) - 16vw);width:74vw;height:30%}
  .practice-case-copy{max-width:720px}
  .practice-case-copy h2{font-size:clamp(2.65rem,8vw,4.7rem)}
  .practice-case-design .practice-case-copy,
  .practice-design-figure{grid-column:auto;grid-row:auto}
  .practice-design-figure{width:min(100%,760px)}
}

@media(max-width:680px){
  .practice-case-gallery{grid-template-columns:1fr}
  .practice-index-shell{padding-inline:max(var(--pad),env(safe-area-inset-left))}
  .practice-case{padding-block:4rem;gap:2.25rem}
  .practice-case-copy h2{font-size:clamp(2.35rem,11vw,3.6rem);overflow-wrap:anywhere}
  .practice-case-copy p{line-height:1.8}
  .practice-case-actions{display:grid;grid-template-columns:1fr}
  .practice-case-actions .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .practice-case::before,.practice-case::after{animation:none;translate:none}
}

@media print{
  .practice-case::before,.practice-case::after{display:none}
}