.practice-page{background:#f6f5f1;color:#111}
.practice-rule{display:flex;justify-content:space-between;gap:20px;padding-bottom:15px;border-bottom:1px solid rgba(17,17,17,.24);font:8px/1.5 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.practice-rule--dark{border-color:rgba(255,255,255,.28)}
.practice-hero{padding:6vw 7vw 8vw}
.practice-hero__grid{display:grid;grid-template-columns:1.08fr .46fr;gap:8vw;align-items:end;margin-top:7vw}
.practice-hero__copy>p{margin:0 0 25px;color:#666159;font:9px/1.5 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.practice-hero h1,.practice-approach h2,.practice-making h2,.practice-tools h2,.practice-routes h2{margin:0;font:400 clamp(65px,8.8vw,136px)/.85 'Libre Caslon Display',Georgia,serif;letter-spacing:-.06em}
.practice-hero h1 em,.practice-approach h2 em,.practice-making h2 em,.practice-tools h2 em,.practice-routes h2 em{font-weight:400}
.practice-hero__intro p{margin:0;color:#676159;font-size:14px;line-height:1.8}
.practice-hero__intro a{display:flex;justify-content:space-between;margin-top:34px;padding:15px 0;border-top:1px solid rgba(17,17,17,.24);border-bottom:1px solid rgba(17,17,17,.24);color:#111;text-decoration:none;font:400 20px/1 'Libre Caslon Display',Georgia,serif}
.practice-hero__intro a:focus-visible,.practice-tool-list a:focus-visible,.practice-routes__grid a:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.practice-hero__media{position:relative;margin:7vw 0 0;overflow:hidden;background:#151515}
.practice-hero__media img{display:block;width:100%;height:min(52vw,720px);object-fit:cover;object-position:center 43%}
.practice-hero__media figcaption,.practice-making figcaption{position:absolute;left:24px;bottom:20px;padding:8px 10px;background:rgba(255,255,255,.92);color:#111;font:8px/1.4 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
.practice-approach{padding:8vw 7vw 10vw;background:#fff}
.practice-approach__heading,.practice-tools__heading{display:grid;grid-template-columns:1.1fr .46fr;gap:8vw;align-items:end;margin-top:6vw}
.practice-approach__heading p,.practice-tools__heading p{margin:0 0 8px;color:#676159;font-size:14px;line-height:1.8}
.practice-principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:7vw;border-top:1px solid rgba(17,17,17,.24);border-left:1px solid rgba(17,17,17,.24)}
.practice-principles article{min-height:330px;padding:28px;border-right:1px solid rgba(17,17,17,.24);border-bottom:1px solid rgba(17,17,17,.24)}
.practice-principles article>span,.practice-tool-list>a>span,.practice-routes__grid>a>span{font:8px/1.5 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.practice-principles h3{margin:100px 0 20px;font:400 35px/.95 'Libre Caslon Display',Georgia,serif;letter-spacing:-.04em}
.practice-principles p{margin:0;color:#676159;font-size:12px;line-height:1.75}
.practice-try{display:grid;grid-template-columns:.65fr 1.35fr;gap:7vw;margin-top:32px;padding:38px 42px;background:#111;color:#fff}
.practice-try span{font:8px/1.5 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.practice-try h3{max-width:380px;margin:74px 0 0;font:400 43px/.98 'Libre Caslon Display',Georgia,serif;letter-spacing:-.04em}
.practice-try ol{margin:0;padding:0;list-style:none;counter-reset:practice-step;border-top:1px solid rgba(255,255,255,.28)}
.practice-try li{counter-increment:practice-step;display:grid;grid-template-columns:36px 1fr;gap:18px;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.28);font-size:13px;line-height:1.55}
.practice-try li::before{content:counter(practice-step,decimal-leading-zero);font:8px/1.8 'DM Mono',monospace;letter-spacing:.08em}
.practice-making{padding:5vw 7vw 6vw;background:#111;color:#fff}
.practice-making__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"media title" "media body";column-gap:6vw;row-gap:2.2vw;align-items:start;margin-top:5vw}
.practice-making figure{grid-area:media;position:relative;aspect-ratio:3/2;min-height:0;margin:0;overflow:hidden;background:#191919}
.practice-making figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.practice-making__placeholder{display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);background:#171715}
.practice-making__placeholder>span{max-width:230px;text-align:center;color:rgba(255,255,255,.48);font:9px/1.7 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.practice-making h2{grid-area:title;margin:-.08em 0 0;font-size:clamp(56px,5.6vw,82px);line-height:.88}
.practice-making__body{grid-area:body;max-width:540px}
.practice-making__body>p{margin:0 0 20px;color:rgba(255,255,255,.68);font-size:14px;line-height:1.8}
.practice-tools{padding:9vw 7vw 10vw;background:#ded7c8}
.practice-tool-list{margin-top:7vw;border-top:1px solid rgba(17,17,17,.3)}
.practice-tool-list a{display:grid;grid-template-columns:150px 1fr 44px;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid rgba(17,17,17,.3);color:#111;text-decoration:none;transition:padding .35s ease,background-color .35s ease}
.practice-tool-list h3{margin:0 0 10px;font:400 clamp(30px,3.5vw,50px)/.95 'Libre Caslon Display',Georgia,serif;letter-spacing:-.04em}
.practice-tool-list p{max-width:560px;margin:0;color:#676159;font-size:12px;line-height:1.7}
.practice-tool-list h3,.practice-tool-list i{transition:transform .35s ease}
.practice-tool-list a:hover,.practice-tool-list a:focus-visible{padding-left:18px;padding-right:18px;background:rgba(255,255,255,.24)}
.practice-tool-list a:hover h3,.practice-tool-list a:focus-visible h3{transform:translateX(6px)}
.practice-tool-list a:hover i,.practice-tool-list a:focus-visible i{transform:translate(3px,-3px)}
.practice-tool-list i,.practice-routes__grid i{width:42px;height:42px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-style:normal}
.practice-routes{padding:8vw 7vw 9vw;background:#111;color:#fff}
.practice-routes h2{max-width:1000px;margin:7vw 0}
.practice-routes__grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.3);border-left:1px solid rgba(255,255,255,.3)}
.practice-routes__grid a{position:relative;isolation:isolate;min-height:350px;padding:30px;border-right:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.58);text-decoration:none;overflow:hidden;transition:color .38s ease,border-color .38s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.practice-routes__grid a::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.025));opacity:0;transform:scale(.96);transition:opacity .38s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.practice-routes__grid strong{display:block;margin:105px 0 18px;color:rgba(255,255,255,.64);font:400 50px/.95 'Libre Caslon Display',Georgia,serif;transition:color .3s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.practice-routes__grid p{max-width:440px;margin:0;color:rgba(255,255,255,.65);font-size:12px;line-height:1.75}
.practice-routes__grid i{position:absolute;right:30px;bottom:30px;transition:color .3s ease,background-color .3s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.practice-routes__grid a:hover,.practice-routes__grid a:focus-visible{color:#fff;border-color:rgba(255,255,255,.62);transform:translateY(-5px)}
.practice-routes__grid a:hover::before,.practice-routes__grid a:focus-visible::before{opacity:1;transform:scale(1)}
.practice-routes__grid a:hover strong,.practice-routes__grid a:focus-visible strong{color:#fff;transform:translateY(-5px)}
.practice-routes__grid a:hover i,.practice-routes__grid a:focus-visible i{color:#111;background:#fff;transform:translate(4px,-4px)}
.motion-ready [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .72s ease,transform .82s cubic-bezier(.2,.7,.2,1)}
.motion-ready [data-reveal="media"]{transform:translateY(24px) scale(.985)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
.motion-ready [data-reveal-group]>*{opacity:0;transform:translateY(22px);transition:opacity .62s ease,transform .72s cubic-bezier(.2,.7,.2,1)}
.motion-ready [data-reveal-group].is-visible>*{opacity:1;transform:none}
.motion-ready [data-reveal-group].is-visible>*:nth-child(2){transition-delay:.1s}
.motion-ready [data-reveal-group].is-visible>*:nth-child(3){transition-delay:.2s}
.practice-hero__intro a span{animation:practice-arrow 1.9s ease-in-out infinite}
@keyframes practice-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(hover:none) and (pointer:coarse){
  .practice-tool-list a:active{padding-left:14px;padding-right:14px;background:rgba(255,255,255,.28)}
  .practice-tool-list a:active h3{transform:translateX(5px)}
  .practice-tool-list a:active i{transform:translate(3px,-3px)}
  .practice-routes__grid a:active{color:#fff;border-color:rgba(255,255,255,.62);transform:scale(.985)}
  .practice-routes__grid a:active::before{opacity:1;transform:scale(1)}
  .practice-routes__grid a:active strong{color:#fff;transform:translateY(-4px)}
  .practice-routes__grid a:active i{color:#111;background:#fff;transform:translate(3px,-3px)}
  .practice-routes__grid.is-visible a::before{animation:route-surface-touch 1.05s cubic-bezier(.2,.7,.2,1) both}
  .practice-routes__grid.is-visible a strong{animation:route-title-touch 1.05s ease both}
  .practice-routes__grid.is-visible a i{animation:route-arrow-touch 1.05s cubic-bezier(.2,.7,.2,1) both}
  .practice-routes__grid.is-visible a:nth-child(2)::before,.practice-routes__grid.is-visible a:nth-child(2) strong,.practice-routes__grid.is-visible a:nth-child(2) i{animation-delay:.16s}
}
@keyframes route-surface-touch{0%{opacity:0;transform:scale(.96)}45%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes route-title-touch{0%{color:rgba(255,255,255,.64);transform:translateY(0)}45%,72%{color:#fff;transform:translateY(-5px)}100%{color:rgba(255,255,255,.72);transform:translateY(0)}}
@keyframes route-arrow-touch{0%{color:rgba(255,255,255,.58);background:transparent;transform:translate(0)}45%,72%{color:#111;background:#fff;transform:translate(4px,-4px)}100%{color:rgba(255,255,255,.72);background:transparent;transform:translate(0)}}
.practice-note{padding:30px 7vw 52px;background:#f6f5f1}
.practice-note p{max-width:900px;margin:0;color:#6d675e;font:8px/1.6 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:760px){
  .practice-rule{font-size:7px}
  .practice-hero{padding:56px 20px 70px}
  .practice-hero__grid,.practice-approach__heading,.practice-tools__heading{grid-template-columns:1fr;gap:38px;margin-top:54px}
  .practice-hero h1,.practice-approach h2,.practice-tools h2,.practice-routes h2{font-size:58px}
  .practice-hero__media{margin-top:58px}
  .practice-hero__media img{height:360px;object-position:center 44%}
  .practice-hero__media figcaption,.practice-making figcaption{left:16px;bottom:14px;font-size:7px}
  .practice-approach,.practice-tools,.practice-routes{padding:70px 20px 82px}
  .practice-principles{grid-template-columns:1fr;margin-top:58px}
  .practice-principles article{min-height:0;padding:24px}
  .practice-principles h3{margin:55px 0 16px;font-size:34px}
  .practice-try{grid-template-columns:1fr;gap:38px;margin-top:20px;padding:28px 24px 30px}
  .practice-try h3{margin-top:40px;font-size:38px}
  .practice-making{padding:60px 20px 76px}
  .practice-making__grid{grid-template-columns:1fr;grid-template-areas:"title" "media" "body";gap:30px;margin-top:42px}
  .practice-making figure{aspect-ratio:3/2;min-height:0}
  .practice-making h2{margin:0 0 2px;font-size:48px;line-height:.9}
  .practice-making__body{padding-top:2px;border-top:1px solid rgba(255,255,255,.28)}
  .practice-making__body>p{margin:20px 0 0;font-size:13px;line-height:1.75}
  .practice-making__body>p:last-child{margin-top:24px;padding-left:16px;border-left:1px solid rgba(255,255,255,.42);color:rgba(255,255,255,.86)}
  .practice-tool-list{margin-top:58px}
  .practice-tool-list a{grid-template-columns:1fr 38px;gap:18px;padding:25px 0}
  .practice-tool-list>a>span{grid-column:1/3}
  .practice-tool-list h3{font-size:34px}
  .practice-tool-list i{width:36px;height:36px}
  .practice-routes h2{margin:58px 0}
  .practice-routes__grid{grid-template-columns:1fr}
  .practice-routes__grid a{min-height:280px;padding:24px}
  .practice-routes__grid strong{margin-top:70px;font-size:44px}
  .practice-routes__grid i{right:24px;bottom:24px}
  .practice-note{padding:28px 20px 44px}
}
@media(prefers-reduced-motion:reduce){
  .motion-ready [data-reveal],.motion-ready [data-reveal-group]>*{opacity:1;transform:none;transition:none}
  .practice-hero__intro a span{animation:none}
  .practice-tool-list a,.practice-tool-list h3,.practice-tool-list i,.practice-routes__grid a,.practice-routes__grid a::before,.practice-routes__grid strong,.practice-routes__grid i{transition:none}
  .practice-routes__grid.is-visible a::before,.practice-routes__grid.is-visible a strong,.practice-routes__grid.is-visible a i{animation:none}
}