/* Our Practice: the page opens as a dictionary entry for "practice", built from the client's own words; then
   Pelé's "Everything is practice." gathers itself across a full screen; then the story, how we work and who we
   work with. Builds on the kit in svc.css (tokens, grain, rail, slide control). */

/* ---------- placeholders the client still has to fill ---------- */
.ph{font-style:italic;color:var(--muted);background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:1px}
.ph::before{content:'To come: ';font-style:normal;font-weight:600;color:var(--gold-text)}

/* ---------- the entry ---------- */
.pr-entry{background:repeating-linear-gradient(transparent 0 37px,#1f3d260d 37px 38px),var(--cream)}
.pr-entry-inner{min-height:calc(100svh - var(--svc-header,90px));display:flex;flex-direction:column;padding-block:20px clamp(32px,6svh,64px)}
.pr-entry-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4svh,34px)}
.pr-head{align-self:flex-start;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(18px,2.4vw,36px);margin:0;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.pr-word{font:900 clamp(104px,min(17vw,30svh),300px)/.84 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.06em}
.pr-swap{display:inline-grid;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.pr-swap>span{grid-area:1/1;transition:transform .7s var(--ease)}
.pr-s{transform:translateY(100%);color:var(--gold-text)}
.pr-gram{display:flex;align-items:baseline;gap:16px;font:italic 300 clamp(22px,2.2vw,36px)/1 var(--serif);color:var(--muted)}
.pr-pos{display:inline-grid;overflow:hidden;color:var(--gold-text)}
.pr-pos>span{grid-area:1/1;transition:transform .7s var(--ease)}
.pr-verb{transform:translateY(100%)}
.pr-head[aria-pressed="true"] .pr-c,.pr-head[aria-pressed="true"] .pr-noun{transform:translateY(-100%)}
.pr-head[aria-pressed="true"] .pr-s,.pr-head[aria-pressed="true"] .pr-verb{transform:none}
.pr-head:focus-visible{outline:3px solid var(--gold);outline-offset:8px}
.pr-senses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.pr-senses li{position:relative;padding:clamp(16px,2.6svh,26px) clamp(16px,2vw,32px) 0 0;font:400 clamp(20px,min(1.75vw,3.2svh),28px)/1.3 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.pr-senses li+li{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--rule)}
.pr-senses li::before{content:'';display:block;width:9px;height:9px;margin-bottom:14px;border-radius:50%;background:var(--gold)}
.pr-see{max-width:58ch;margin:0;font:400 clamp(16px,1.25vw,19px)/1.65 var(--sans);color:var(--muted)}
.pr-see em{font:italic 400 1.15em/1 var(--serif);color:var(--ink)}

/* ---------- "Everything is practice." ---------- */
.pr-pele{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:var(--cream);background:var(--ink)}
.pr-pele-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.9);scale:var(--zoom,1.15)}
.pr-pele::after{content:'';position:absolute;inset:0;z-index:-1;background:#1f3d26;mix-blend-mode:multiply;opacity:.92}
.pr-pele figure{margin:0 auto;text-align:center}
.pr-pele blockquote{margin:0}
.pr-pele blockquote p{margin:0;font:italic 300 clamp(64px,11.5vw,210px)/.95 var(--serif);letter-spacing:-.05em}
.pr-pele blockquote span{display:inline-block;translate:var(--tx,0) 0;opacity:var(--o,1)}
.pr-pele blockquote span:last-child{color:var(--gold)}
.pr-pele figcaption{margin-top:clamp(18px,4svh,40px);font:400 clamp(18px,1.5vw,24px)/1 var(--serif);color:#faf7efb3}
.pr-pele figcaption::before{content:'';display:inline-block;width:40px;height:1px;margin:0 16px .3em 0;background:var(--gold)}

/* ---------- the founding year beside the story ---------- */
.ab-story{padding-block:clamp(80px,13svh,160px);background:var(--cream)}
.ab-story-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.ab-year{margin:0;font:900 clamp(120px,19vw,320px)/.8 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.07em;color:var(--gold)}
.ab-story h2{margin:0 0 18px;font:italic 300 clamp(24px,2vw,32px)/1.1 var(--serif);color:var(--gold-text)}
.ab-story-copy p{max-width:44ch;font-size:clamp(16px,1.2vw,18px);line-height:1.7;color:var(--muted)}
.ab-story-copy .ab-story-lead{max-width:none;margin:0 0 18px;font:400 clamp(30px,3.2vw,52px)/1.08 var(--serif);letter-spacing:-.035em;color:var(--ink)}

/* ---------- how we work: the role word changes in place ---------- */
.ab-how{padding-block:clamp(80px,13svh,160px);background:var(--paper)}
.ab-how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.ab-how h2{margin:0;max-width:14ch;font:400 clamp(38px,4.4vw,74px)/1.02 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.ab-how-copy p{max-width:44ch;margin:0 0 22px;font-size:clamp(16px,1.2vw,18px);line-height:1.7;color:var(--muted)}
.ab-how-copy .ab-roles{max-width:none;margin-bottom:30px;font:400 clamp(26px,2.5vw,40px)/1.25 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.ab-role{display:inline-grid;justify-items:start;vertical-align:bottom;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;transition:width .6s var(--ease)}
.ab-role span{grid-area:1/1;width:max-content;font-style:italic;color:var(--gold-text);white-space:nowrap;transform:translateY(105%);transition:transform .7s var(--ease)}
.ab-role span.is-on{transform:none}
.ab-role span.is-off{transform:translateY(-105%)}

/* ---------- who we work with: hover a moment and its photograph follows the pointer ---------- */
.ab-who{position:relative;padding-block:clamp(72px,12svh,140px);background:var(--cream)}
.ab-who-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:end;margin-bottom:clamp(36px,6svh,64px)}
.ab-who h2{margin:0;font:400 clamp(38px,4.4vw,74px)/1.02 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.ab-who-head p{margin:0;max-width:40ch;font:400 clamp(19px,1.6vw,24px)/1.4 var(--serif);color:var(--ink)}
.ab-moments{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.ab-moments li{position:relative;z-index:1;display:flex;align-items:flex-end;min-height:clamp(150px,24svh,240px);padding:20px clamp(14px,1.6vw,24px) 22px 0;border-right:1px solid var(--rule)}
.ab-moments li:last-child{border-right:0}
.ab-moments li+li{padding-left:clamp(14px,1.6vw,24px)}
.ab-moments span{font:italic 300 clamp(32px,3.6vw,62px)/1 var(--serif);letter-spacing:-.035em;color:var(--ink);transition:color .4s,transform .6s var(--ease)}
.ab-moments li:hover span{color:var(--gold-text);transform:translateY(-8px)}
.ab-float{position:absolute;z-index:0;left:0;top:0;width:clamp(200px,18vw,280px);aspect-ratio:4/5;border-radius:3px 24px 3px 3px;background:var(--photo) center/cover no-repeat;box-shadow:0 30px 50px -30px #1f3d26aa;translate:calc(var(--fx,0px) + 28px) calc(var(--fy,0px) - 80%);scale:0;rotate:-4deg;transition:scale .5s var(--ease),rotate .5s var(--ease);pointer-events:none}
.ab-float.is-on{scale:1;rotate:2deg}
.ab-who-foot{margin:clamp(28px,5svh,48px) 0 0;max-width:46ch;font-size:clamp(16px,1.2vw,18px);line-height:1.7;color:var(--muted)}

/* ---------- arrival motion ---------- */
.js .pr-word,.js .pr-gram{opacity:0;transform:translateY(40px);transition:opacity .9s,transform 1.2s var(--ease)}
.js .pr-gram{transition-delay:.2s}
.js .pr-senses li{opacity:0;transform:translateY(24px);transition:opacity .8s,transform 1s var(--ease);transition-delay:calc(.45s + var(--n,0) * .14s)}
.js .pr-senses{border-top-color:transparent;transition:border-color .8s .3s}
.js .pr-see{opacity:0;transition:opacity .9s .95s}
.js .pr-entry.is-in .pr-word,.js .pr-entry.is-in .pr-gram,.js .pr-entry.is-in .pr-senses li,.js .pr-entry.is-in .pr-see{opacity:1;transform:none}
.js .pr-entry.is-in .pr-senses{border-top-color:var(--ink)}
.js .ab-story .wrap>*,.js .ab-how .wrap>*,.js .ab-who .wrap>*{opacity:0;transform:translateY(34px);transition:opacity .8s,transform 1s var(--ease)}
.js .ab-story.is-in .wrap>*,.js .ab-how.is-in .wrap>*,.js .ab-who.is-in .wrap>*{opacity:1;transform:none}
.js .ab-year{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease),opacity .8s,transform 1s var(--ease)}
.js .ab-story.is-in .ab-year{clip-path:inset(-10% -5% -10% -5%)}

/* ---------- smaller screens ---------- */
@media(max-width:900px){
  .pr-senses{grid-template-columns:1fr}
  .pr-senses li,.pr-senses li+li{padding:18px 0;border-left:0}
  .pr-senses li+li{border-top:1px solid var(--rule)}
  .ab-story-grid,.ab-how-grid,.ab-who-head{grid-template-columns:1fr}
  .ab-moments{grid-template-columns:1fr 1fr}
  .ab-moments li:nth-child(2){border-right:0}
  .ab-moments li:nth-child(n+3){border-top:1px solid var(--rule)}
  .ab-moments li:nth-child(3){padding-left:0}
  .ab-float{display:none}
}
@media(max-width:600px){
  .pr-word{font-size:clamp(84px,26vw,120px)}
  .pr-pele blockquote p{font-size:clamp(52px,15vw,72px)}
  .ab-moments li{min-height:120px}
}
@media(prefers-reduced-motion:reduce){
  .js .pr-word,.js .pr-gram,.js .pr-senses li,.js .pr-see,.js .ab-story .wrap>*,.js .ab-how .wrap>*,.js .ab-who .wrap>*{opacity:1;transform:none}
  .js .ab-year{clip-path:none}
  .pr-pele blockquote span{translate:none;opacity:1}
  .ab-role span,.pr-swap>span,.pr-pos>span{transition:none}
}