.kata-tips{--kata-tips-accent:var( --kata-accent,var( --wp--preset--color--orange ) );background-color:var(--wp--preset--color--surface);color:var(--wp--preset--color--white);min-block-size:40.625vw;overflow:hidden;padding-block:2.556vw 0;position:relative}.kata-tips__ground{block-size:100%;filter:grayscale(1);inline-size:100%;inset:0;object-fit:cover;position:absolute}.kata-tips__wash{background:linear-gradient(to bottom,var(--wp--preset--color--surface) 0,rgba(35,39,40,0) 40.625vw);inset:0;position:absolute}.kata-tips__title{font-size:2.625rem;font-weight:700;line-height:1;margin:0;position:relative;text-align:center;z-index:1}.kata-tips__stage{block-size:23.813vw;inline-size:58.544vw;margin-block-start:2.919vw;margin-inline:auto;overflow:visible;position:relative;z-index:1}.kata-tips__reel{--kata-tips-peek:20.75vw;--kata-tips-park:7.375vw;--kata-tips-enter:100%;--kata-tips-exit:100%;--kata-tips-gone:-200%;--kata-tips-bleed:-20.75vw;--kata-tips-park-base:-100%;--kata-tips-parked:translateX(var( --kata-tips-park-base )) translateX(calc(var( --kata-tips-park, 0px )*-1));inset-block:0;inset-inline-end:var(--kata-tips-bleed);inset-inline-start:0;overflow:hidden;position:absolute}.kata-tips__slide.is-next{opacity:1;transform:var(--kata-tips-parked)}.kata-tips__slide{align-items:flex-start;display:flex;inline-size:calc(100% - var(--kata-tips-peek));inset-block:0;inset-inline-start:0;justify-content:space-between;opacity:0;position:absolute;transform:translateX(var(--kata-tips-enter,-100%));transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .2s linear}.kata-tips__slide.is-placing{transition:none}.kata-tips__slide.is-offstrip,.kata-tips__slide.is-rewinding{transform:translateX(var(--kata-tips-gone))}.kata-tips__slide.is-leaving,.kata-tips__slide.is-rewinding{z-index:0}.kata-tips__slide.is-current{z-index:1}.kata-tips__slide.is-next{z-index:2}.kata-tips__slide.is-current{opacity:1;transform:translateX(0)}.kata-tips__slide.is-leaving{opacity:0;transform:translateX(var(--kata-tips-exit,100%))}.kata-tips__slide[hidden]{display:none}.kata-tips__slide.is-current[hidden],.kata-tips__slide.is-leaving[hidden]{display:flex}.kata-tips__portrait{block-size:95.538%;flex:0 0 40.322%;margin-block-start:.531vw;order:1;position:relative}.kata-tips__face{block-size:98.547%;inline-size:100%;object-fit:cover}.kata-tips__bar{background-color:var(--kata-tips-accent);block-size:3.846%;inline-size:75.412%;inset-block-start:96.154%;inset-inline-start:12.291%;position:absolute}.kata-tips__copy{display:flex;flex:0 0 51.99%;flex-direction:column;gap:1.813vw;min-inline-size:0;order:2}.kata-tips__head{display:flex;flex-direction:column;gap:.25rem}.kata-tips__rule-row{align-items:center;display:flex;gap:.5rem}.kata-tips__rule{background-color:var(--wp--preset--color--white);block-size:1px;flex:1 1 0;min-inline-size:0}.kata-tips__quote{block-size:4.313rem;color:var(--kata-tips-accent);display:block;flex:0 0 auto;inline-size:4.313rem;position:relative;rotate:180deg}.kata-tips__quote-svg{block-size:68.491%;display:block;inline-size:82.635%;inset-block-start:16.62%;inset-inline-end:8.33%;position:absolute}.kata-tips__heading{font-size:2rem;font-weight:400;line-height:1;margin:0;text-align:start}.kata-tips__body{font-size:1.125rem;line-height:1.5;margin:0;text-align:start}.kata-tips__divider{background-color:var(--wp--preset--color--white);block-size:1px;display:block}.kata-tips__person{inline-size:7.125rem;margin-inline-start:0;text-align:center}.kata-tips__name{font-size:1.5rem;font-weight:700;line-height:1.3;margin:0}.kata-tips__role{font-size:1.125rem;line-height:1.3;margin:0}.kata-tips__nav{display:flex;gap:.938vw;inset-block-start:calc(100% + 1.4vw);inset-inline-start:0;position:absolute;z-index:1}.kata-tips__arrow{aspect-ratio:1;background:transparent;border:0;color:var(--wp--preset--color--white);cursor:pointer;inline-size:3.13vw;min-inline-size:36px;opacity:.5;padding:0;transition:opacity var(--kata-duration-fast,.2s) ease}.kata-tips__arrow:focus-visible,.kata-tips__arrow:hover{opacity:1}.kata-tips__arrow[data-kata-tips-step="1"]{opacity:1}.kata-tips .kata-navarrow__head,.kata-tips .kata-navarrow__ring{fill:none;stroke:currentColor}.kata-tips .kata-navarrow__head{fill:currentColor;stroke:none}.kata-tips__arrow-svg{block-size:auto;display:block;inline-size:100%}@media(max-width:781px){.kata-tips{min-block-size:0;padding-block:13.038vw 5.063vw}.kata-tips__ground,.kata-tips__wash{display:none}.kata-tips__title{font-size:2rem;line-height:1.3;margin-inline:5.316vw;text-align:center}.kata-tips__reel{--kata-tips-peek:0px;--kata-tips-park:0px;--kata-tips-bleed:0px}.kata-tips__stage{block-size:auto;inline-size:auto;margin-block-start:7.722vw;margin-inline:5.316vw;overflow:visible;position:relative}.kata-tips__slide{display:none;flex-direction:column;opacity:1;position:static;transform:none}.kata-tips__slide.is-current,.kata-tips__slide.is-current[hidden]{display:flex}.kata-tips__slide.is-leaving{display:none}.kata-tips__portrait{block-size:77.712vw;flex:0 0 auto;inline-size:100%;margin-block-start:0;order:1}.kata-tips__face{block-size:98.55%}.kata-tips__bar{block-size:3.847%;inline-size:75.481%;inset-block-start:96.153%;inset-inline-start:12.303%}.kata-tips__nav{inset-block-start:calc(77.712vw + 24px)}.kata-tips__reel{overflow:visible;position:static}.kata-tips__nav{gap:15px}.kata-tips__arrow{inline-size:50.078px}.kata-tips__copy{flex:0 0 auto;gap:7.342vw;margin-block-start:22.828vw;order:2}.kata-tips__person{inline-size:7.125rem}}@media(prefers-reduced-motion:reduce){.kata-tips__slide{transform:none;transition:opacity .12s linear}.kata-tips__slide.is-leaving{transform:none}}.kata-tips__rule--far{display:none}@media(max-width:781px){.kata-tips__title{margin-inline:6.835vw}.kata-tips__stage{margin-inline:6.835vw}.kata-tips__portrait{block-size:83.796vw}.kata-tips__bar{block-size:3.846%;inline-size:75.41%;inset-block-start:96.154%;inset-inline-start:12.291%}.kata-tips__copy{gap:1.813rem;margin-block-start:1.5rem}.kata-tips__heading{font-size:1.5rem;line-height:1}.kata-tips__body,.kata-tips__heading{text-align:center}.kata-tips__nav{justify-content:center;margin-block-start:1.813rem;position:static}.kata-tips__person{inline-size:54.179%;margin-inline:auto}.kata-tips__name{font-size:1.25rem}.kata-tips__role{font-size:1rem}.kata-tips__rule--far{display:block}}
/* imumiv0os — the tips block must not clip its copy at any width. The stage's 23.813vw is a FLOOR, the reel clips the inline axis only (negative block insets), and every tip stacks in one grid cell so the row is as tall as the tallest and never changes height as the reader pages. Compiled by hand from src/tips-carousel/style.scss — there is no shell on this account to run wp-scripts with. Logical properties throughout, so this block is identical in the LTR and RTL sheets. */
@media(min-width:782px){.kata-tips{padding-block:2.556vw 8.605vw}.kata-tips__wash{background:linear-gradient(to bottom,var(--wp--preset--color--surface) 0,rgba(35,39,40,0) max(40.625vw,100%))}.kata-tips__stage{block-size:auto;min-block-size:23.813vw}.kata-tips__reel{clip-path:inset(-100vh 0 -100vh 0);display:grid;grid-template-columns:minmax(0,1fr);inline-size:calc(100% + var(--kata-tips-peek));inset-block-end:auto;inset-block-start:auto;inset-inline-end:auto;inset-inline-start:auto;overflow:visible;position:relative}.kata-tips__slide{grid-area:1/1;inset-block-end:auto;inset-block-start:auto;inset-inline-end:auto;inset-inline-start:auto;justify-self:start;min-block-size:23.813vw;position:relative}.kata-tips__slide[hidden]{display:flex;visibility:hidden}.kata-tips__slide.is-current[hidden],.kata-tips__slide.is-leaving[hidden],.kata-tips__slide.is-next[hidden]{display:flex;visibility:visible}.kata-tips__portrait{block-size:auto;margin-block:.531vw}.kata-tips__person{inline-size:max-content;max-inline-size:100%;min-inline-size:7.125rem}}
/* .jarvis/notes/2026-09-29-tips-band-direction-review.md §1 and §2 — the tip is ONE object with ONE foot: the giver lands on it and the portrait's bar sits 8.5 clear of it (2241:4974 insets the picture 8.5 at the top AND 8.5 at the foot of a 381 tip), so the words and the picture finish together at every width and on every tip. The giver's box sizes to its own longest line instead of the drawn 114, so a role is never split mid-term. Compiled by hand from src/tips-carousel/style.scss — there is no shell on this account to run wp-scripts with. The three rules below are base rules in the source and carry no breakpoint; the four above are scoped to the wide arrangement because the phone re-states its own values for them and this sheet's phone block is minified above. Logical properties throughout, so this block is identical in the LTR and RTL sheets. */
.kata-tips__slide{align-items:stretch}.kata-tips__face{inset-block-start:0;inset-inline:0;position:absolute}.kata-tips__divider{flex:0 0 auto;margin-block-start:auto}
/* imumtk4mh — the ground is a BAND ACROSS THE SECTION'S FOOT (the drawn 650 = 40.625vw), not a fill of a section that is now free to grow. One statement, two faults: the band is W x 0.40625W, so its proportion is 2.46 at EVERY width and never the asset's 4:3 — the letterbox baked into tips-ground.png (1024x768, grey bars top and bottom) can no longer be cropped into view, which is the grey bar at 782-950; and the picture stops rising with the section, so it comes up under the arrows and nowhere near the giver's words, as drawn. The wash is the same band so ramp and picture end together, replacing the max(40.625vw,100%) stretch above, which only existed because the picture was stretching too. At 1600 the band IS the section and nothing moves. The asset is still wrong and still wants re-exporting full-bleed and ~2400 across — raised for Fatfish; this is correct before that and after it. Compiled by hand from src/tips-carousel/style.scss — there is no shell on this account to run wp-scripts with. Scoped to the wide arrangement because below 782 both are display:none. Logical properties, so identical in the LTR and RTL sheets. */
@media(min-width:782px){.kata-tips__ground,.kata-tips__wash{block-size:40.625vw;inset-block-end:0;inset-block-start:auto;inset-inline:0}.kata-tips__wash{background:linear-gradient(to bottom,var(--wp--preset--color--surface) 0,rgba(35,39,40,0) 40.625vw)}}
/* jjnxz — the portrait is a SHAPE, not a gap-filler. 2264:9948 draws the group 377.709 x 363.994 and the photograph in it 377.675 x 358.712 — 1.0529, slightly WIDER than tall. Stretched to the tip it was that shape nowhere but the drawn case: measured live before this, the photograph was 0.575 at 1024 and 0.962 at 1440 on /careers/, and 0.770 at 1024 on urban renewal — the same width giving two answers, because the stretched box is a function of how long the advice is and not of the window. So the box states the group's own 1.0377 and takes its height from its width, which IS a share of the window; the face's 98.547% then lands the photograph on 1.0529 at every width, and the bar's four per cents are shares of this box and are untouched. flex-end keeps Creative's earlier one-foot ruling intact (2026-09-29-tips-band-direction-review §2): the portrait's foot stays 8.5 clear of the tip's foot where stretching put it, so the bar and the giver's last line still finish together, and slack from long advice now opens ABOVE the picture on dark ground instead of being poured into the photograph. At the drawn case nothing moves — 377.709/1.03767 = 363.99, the 364 the stretch gave. Compiled by hand from src/tips-carousel/style.scss — there is no shell on this account to run wp-scripts with. Scoped to the wide arrangement because the phone states its own block-size and that outranks a ratio. Logical properties, so identical in the LTR and RTL sheets. */
@media(min-width:782px){.kata-tips__portrait{align-self:flex-end;aspect-ratio:377.709/363.994;block-size:auto}}
