/* THE WORLD (2 Nov 2026): the emblem standing in the moving flower field, the Site 95 home header. Scoped to .tw so THE TURN
   (?header=turn: .tn95 .tn2, turn.css and turn2.css) keeps its own look.
   First paint: the poster (the world's first frame with the emblem in flower), placed exactly where the stage will draw the
   plate (50% 52% cover on wide screens, the bottom edge on tall ones), so the live stage fades in over it without a jump.
   The section is about two and a half screens: the stage sticks while the camera pushes in to the material and back out. */
.tw{height:calc(var(--wh,100svh) * 2.6);overflow:clip;background:#DCD7D6;color:#1A1C20}
.tw .fr-host{position:sticky;top:0;height:var(--wh,100svh);max-height:none;min-height:0;overflow:hidden;
  background:#DCD7D6 url(/assets/95/world/world-poster-1920.webp) 50% 52%/cover no-repeat}
@media (max-aspect-ratio:105/100){
  .tw .fr-host{background:url(/assets/95/world/world-poster-720.webp) 50% 100%/125.6% auto no-repeat,linear-gradient(#D9D7DC,#EBE7E7 calc(100% - 125.6vw))}}
/* reduced motion: the clean plate under the stills (the poster carries the flower emblem, which would show round the others) */
.tw-still .fr-host{background-image:url(/assets/95/world/world-plate-1920.webp)}
@media (max-aspect-ratio:105/100){.tw-still .fr-host{background-image:url(/assets/95/world/world-plate-720.webp),linear-gradient(#D9D7DC,#EBE7E7 calc(100% - 125.6vw))}}
.tw .tw-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease;touch-action:pan-y}
.tw .tw-on .tw-canvas{opacity:1}
.tw .tw-src{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.tw .fr-host[data-over],.tw.tw-dragging .fr-host{cursor:grab}
.tw.tw-dragging .fr-host{cursor:grabbing}
html.tw-cur-on .tw .fr-host[data-over],html.tw-cur-on .tw.tw-dragging .fr-host{cursor:none}

/* the header bar and the headline: dark ink on the bright sky; Lights off is dusk in the same field, so the ink turns light */
.tw .fr95-hud,.tw .fr95-head{color:#1A1C20}
html[data-theme=dark] .tw .fr95-hud,html[data-theme=dark] .tw .fr95-head{color:#F2F0EF}
.tw .fr95-hud{--fr95-act:#2F6F95;--fr95-act-ink:#F2F0EF}
/* no backdrop blur anywhere on the stage: over a canvas that changes every frame it cost 5 fps (measured); dense fills instead.
   The outline buttons carry a light backing, so they read over the sky, the blooms and a dark material up close */
.tw .fr95-btn:not(.book){background:rgb(242 240 239 / .74)}
html[data-theme=dark] .tw .fr95-btn:not(.book){background:rgb(27 26 25 / .62)}
html[data-theme=dark] .tw .fr95-hud{--fr95-act:#A2CFE7;--fr95-act-ink:#0A0B0D}
.tw .fr95-head{left:max(28px,4.2vw);right:auto;top:clamp(104px,16vh,190px);width:min(42vw,820px);text-align:left;opacity:calc(1 - var(--tw-push,0) * 1.6);
  transform:translateY(calc(var(--tw-push,0) * -40px))}
.tw .fr95-head::before{content:none}
.tw .fr95-h1{font-size:clamp(40px,3.9vw,82px);line-height:.95;letter-spacing:-.012em;text-wrap:balance}
.tw .tn2-sub{display:none}
@media (max-aspect-ratio:105/100){
  .tw .fr95-head{left:20px;right:20px;width:auto;text-align:center;top:calc(92px + env(safe-area-inset-top))}
  .tw .fr95-h1{font-size:min(10.6vw,46px)}}

/* the counter and NEXT: bottom left on wide screens, frosted over the near blooms; NEXT is a hairline pill, never the Ice fill */
.tw .tw-bar{position:absolute;z-index:3;left:max(28px,4.2vw);bottom:max(28px,calc(14px + env(safe-area-inset-bottom)));display:flex;align-items:center;gap:10px}
.tw .tw-label{display:inline-flex;align-items:center;gap:12px;height:36px;margin:0;padding:0 16px;border-radius:999px;color:#F2F0EF;
  background:rgb(27 26 25 / .64);box-shadow:inset 0 0 0 1px rgb(242 240 239 / .16);
  font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.tw .tw-count{opacity:.72}
.tw .tw-next{display:inline-flex;align-items:center;height:36px;padding:0 16px;margin:0;border-radius:999px;border:1px solid rgb(242 240 239 / .5);
  background:rgb(27 26 25 / .6);color:#F2F0EF;
  font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .2s,opacity .3s}
.tw .tw-next:hover{border-color:rgb(242 240 239 / .9)}
.tw .tw-next:focus-visible,.tw .tw-sw:focus-visible{outline:1px solid #A2CFE7;outline-offset:3px}
.tw .tw-next[aria-disabled=true]{opacity:.55}

/* the material panel: a slim column of live macro windows on the right; the active one larger with its name. The windows are
   see through: the stage draws each close up into the canvas right under its button. */
.tw .tw-panel{position:absolute;z-index:3;right:max(22px,2.6vw);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.tw .tw-sw{position:relative;width:54px;height:54px;padding:0;margin:0;border:0;border-radius:15px;background:transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .55),0 8px 24px rgb(40 24 26 / .16);transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tw .tw-sw:hover{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .95),0 10px 28px rgb(40 24 26 / .22)}
.tw .tw-sw.on{width:96px;height:96px;border-radius:20px;box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .95),0 14px 34px rgb(40 24 26 / .24)}
.tw .tw-sw-name{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:8px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;
  font:500 11px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#F2F0EF;
  background:rgb(27 26 25 / .64);opacity:0;transition:opacity .3s}
.tw .tw-sw.on .tw-sw-name{opacity:1}
.tw .fr-host:not(.tw-on) .tw-sw{background:rgb(255 255 255 / .1)}
@media (max-aspect-ratio:105/100),(max-width:699px){
  /* phones: a row of round close ups along the bottom edge, above the safe area, swipeable; the counter and NEXT above it */
  .tw .tw-panel{left:0;right:0;top:auto;bottom:max(16px,calc(8px + env(safe-area-inset-bottom)));transform:none;flex-direction:row;align-items:center;
    gap:12px;padding:6px 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;justify-content:safe center;overscroll-behavior-x:contain}
  .tw .tw-panel::-webkit-scrollbar{display:none}
  .tw .tw-sw{flex:0 0 auto;width:52px;height:52px;border-radius:50%;scroll-snap-align:center}
  .tw .tw-sw.on{width:66px;height:66px;border-radius:50%}
  .tw .tw-sw-name{display:none}
  /* the counter and NEXT move up under the headline, out of the emblem's way; NEXT drops the material's name */
  .tw .tw-bar{left:50%;transform:translateX(-50%);bottom:auto;top:calc(112px + env(safe-area-inset-top) + min(10.6vw,46px) * 2.85)}
  .tw .tw-next{height:44px;padding:0 18px}
  .tw .tw-label{height:44px}
  .tw .tw-nx{display:none}}

/* film and still (no WebGL, or reduced motion): the world as video or the poster, the emblem as a still per material */
.tw .tw-film-v{position:absolute;left:0;top:0;overflow:hidden}
.tw .tw-film-v video{position:absolute;left:0;top:0;display:block}
.tw .tw-cut{position:absolute;left:0;top:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.tw .tw-cut.on{opacity:1}
.tw-film .tw-panel,.tw-still .tw-panel{display:none}
.tw-still{height:auto}
.tw-still .fr-host{position:relative}
@media (prefers-reduced-motion:reduce){.tw{height:auto}.tw .fr-host{position:relative}.tw .tw-canvas,.tw .tw-cut{transition:none}}

/* the page cursor (feel.js): a small dot, a pill with a word over the emblem and the work */
html.tw-cur-on .wf-cur{display:none}
.tw-cur{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s}
.tw-cur.in{opacity:1}
.tw-cur span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  width:8px;height:8px;border-radius:999px;background:#1A1C20;box-shadow:0 0 0 1px rgb(242 240 239 / .6);color:transparent;overflow:hidden;
  font:500 11px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),background-color .3s,color .2s}
.tw-cur.word span{width:76px;height:32px;color:#F2F0EF;background:rgb(27 26 25 / .8)}
.tw-cur.down span{scale:.9}
html.tw-cur-on .tw .fr-host[data-over] *{cursor:none}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}