/* One idea each: six screens between Work and Thinking, one per work, each a full-bleed picture that performs the
   work's one idea as it is scrolled through; then the six live addresses. Every screen holds on a sticky stage while
   its article scrolls by, so nothing ever stops the page. Names and addresses sit in the corners, nothing else. */
.sx{position:relative;background:#0c0c0d}
.sx-k{position:relative;height:var(--h,190vh)}
.sx-st{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sx-cap{position:absolute;z-index:6;left:var(--g);right:var(--g);bottom:calc(var(--g)*.95);margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:24px;font:400 15px/1.3 var(--sans);color:var(--ink)}
.sx-cap b{font-weight:500}
.sx-cap a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.sx-dk .sx-cap{color:#f4f3f0}
.sx-hd{position:absolute;z-index:6;left:var(--g);right:var(--g);top:calc(var(--g) + 64px);margin:0;display:flex;gap:clamp(24px,8vw,240px);font:400 15px/1.3 var(--sans);color:#f4f3f0}
.sx-hd b{font-weight:500}
.sx-hd span{opacity:.72}

/* Saridis of Athens: each Greek letter, one at a time, taller than the screen; then the name whole, with the Latin
   letters coming up under their Greek ones */
.sx-sr{--h:260vh}
.sx-sr .sx-st{background:var(--paper)}
.sx-srg{position:absolute;left:0;top:50%;height:132vh;height:132svh;width:calc(132vh * 12);width:calc(132svh * 12);fill:var(--ink);transform:translate(0,-50%)}
.sx-srm{position:absolute;left:50%;top:50%;width:min(80vw,1180px);height:auto;fill:var(--ink);transform:translate(-50%,-58%);visibility:hidden}
.sx-sr.sx-whole .sx-srm{visibility:visible}
.sx-sr.sx-whole .sx-srg{visibility:hidden}
.sx-srm .sxll path{transform-box:fill-box}

/* KMSWERK: 77 ≠ 44. The two bars of the struck-through equals sign open into the axes; five products take their places */
.sx-kw{--h:290vh;--kf:min(27vw,52vh)}
.sx-kw .sx-st{background:#fff}
.sx-kwn{position:absolute;left:0;right:0;top:50%;margin:0;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;font:700 var(--kf)/.8 var(--sans);letter-spacing:-.05em;color:var(--ink);white-space:nowrap;pointer-events:none}
.sx-kwn .sxa,.sx-kwn .sxb{display:inline-block;will-change:transform,opacity}
.sx-kwn .sxq{display:inline-block;width:.66em;height:.72em}
.sx-kwp{position:absolute;left:var(--g);top:calc(var(--g) + 64px);margin:0;font:400 15px/1.35 var(--sans);color:var(--ink)}
.sx-kwc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sx-kwc line{stroke:var(--ink);stroke-linecap:butt}
.sx-kwc .sxqd text{font:400 14px var(--sans);fill:#8a8984;opacity:0}
.sx-kwc .sxax{font:500 15px var(--sans);fill:var(--ink);opacity:0}
.sx-kwc .sxpx,.sx-kwc .sxpy{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 4;opacity:0}
.sx-kwc .sxt7,.sx-kwc .sxt4{font:500 15px var(--sans);fill:var(--ink);opacity:0}
.sx-kwc .sxt7{text-anchor:middle}.sx-kwc .sxt4{text-anchor:end}
.sx-kwn .sxa,.sx-kwn .sxb{transform-origin:50% 50%}
.sx-kwc .sxpt circle{fill:var(--ink)}
.sx-kwc .sxpt.sxgap circle{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.sx-kwc .sxpt text{font:400 15px var(--sans);fill:var(--ink);opacity:0}
.sx-kwc .sxpt tspan{fill:#8a8984}

@media (max-aspect-ratio:17/20){
  .sx-hd{flex-direction:column;gap:2px}
  .sx-cap{flex-direction:column;gap:4px;align-items:flex-start}
  .sx-kw{--kf:min(30vw,40vh)}
}

/* on photographs, names and addresses stand on small paper labels, so they read on any part of the picture */
.sx-chip .sx-cap{align-items:flex-end}
.sx-chip .sx-cap b,.sx-chip .sx-cap a,.sx-chip .sx-hd b,.sx-chip .sx-hd span{background:var(--paper);color:var(--ink);padding:5px 9px 6px;border:0;opacity:1}
.sx-chip .sx-hd{gap:6px;color:var(--ink)}
.sx-kw.sx-narrow .sxqd{display:none}
.sx-kw.sx-narrow .sxpt text{font-size:13px}
@media (max-aspect-ratio:17/20){.sx-chip .sx-cap,.sx-hd{align-items:flex-start}}
.sx-kw.sx-narrow .sxpt tspan{display:none}

/* ---------- TEMPLUM Nº 01, its own cover: twelve strips of the Salk lift away as a wave and leave the Oculus ---------- */
.sx-tp{--h:290vh}
.sx-tp .sx-st{background:#000}
.sxtp-u{position:absolute;inset:0}
.sxtp-u img{width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform,filter}
.sxtp-s{position:absolute;inset:0}
.sxtp-s .sxs{position:absolute;top:0;height:100%;overflow:hidden;will-change:transform}
.sxtp-s .sxs img{position:absolute;top:0;max-width:none;object-fit:cover}
.sxtp-s .sxtt,.sxtp-g{position:absolute;margin:0;font:700 100px/.74 var(--sans);letter-spacing:-.055em;white-space:nowrap;color:#fff;mix-blend-mode:difference}
.sxtp-g{visibility:hidden;left:0;top:0}
.sxtp-d{position:absolute;z-index:4;left:var(--g);right:var(--g);top:50%;margin:0;transform:translateY(-50%);color:#fff;text-align:center;font:500 clamp(26px,3.2vw,52px)/1.06 var(--sans);letter-spacing:-.025em;opacity:0}
.sxtp-c{position:absolute;z-index:5;left:var(--g);bottom:calc(var(--g) * .95);margin:0;display:flex;flex-direction:column;gap:4px;font:400 15px/1.3 var(--sans);color:#fff;mix-blend-mode:difference}
.sx-tp .sx-hd{color:#fff;mix-blend-mode:difference}
.sx-tp .sx-hd span{opacity:1}
.sxtp-k{left:auto;justify-content:flex-end;gap:28px;mix-blend-mode:difference;color:#fff}

/* ---------- SHOT ON, its own cover behind a leaf shutter: the Earth rises from behind the Moon into the O ---------- */
.sx-so{--h:360vh}
.sx-so .sx-st{background:#000}
.sxso-st{position:absolute;width:max(100vw,100svh);aspect-ratio:1;left:calc(50% - max(100vw,100svh) / 2);top:calc((100svh - max(100vw,100svh)) * .66)}
.sxso-st img{position:absolute;width:100%;max-width:none}
.sxso-bg{inset:0;height:100%}
.sxso-fg{left:0;top:70.833%;z-index:3}
.sxso-st svg{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible}
.sxso-st text{font-family:var(--sans);font-size:31px;letter-spacing:.01em;fill:#f4f3f0;opacity:0}
.sxso-st text.sxso-q{fill:#151515}
.sxso-e{position:absolute;z-index:2;left:0;top:0;width:0;height:0;will-change:transform}
.sxso-e img{position:absolute;inset:0;width:100%;height:100%}
.sxso-l{position:absolute;z-index:5;left:calc(var(--g) - .045em);top:41%;transform:translateY(-50%);font-size:min(15.2vw,27svh);line-height:.8;font-family:Futura,"Jost","Century Gothic",sans-serif;color:#f4f3f0}
.sxso-l h3{margin:0;font-size:1em;font-weight:500;letter-spacing:.005em;white-space:nowrap;display:flex}
.sxso-l .sxo{color:transparent}
.sxso-l .sxch{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.04em;margin-top:-.04em}
.sxso-l .sxch i{display:inline-block;font-style:normal;transform:translateY(104%);will-change:transform}
.sx-so .sx-iris{position:absolute;inset:0;z-index:7;width:100%;height:100%}
.sx-iris .sxbs path{fill:url(#sxbl);stroke:rgba(244,243,240,.42);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sx-iris .sxr1{fill:none;stroke:rgba(244,243,240,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.sx-iris .sxr2{fill:none;stroke:rgba(244,243,240,.1);stroke-width:1;vector-effect:non-scaling-stroke}
.sx-iris .sxfn text{font:400 13px var(--sans);letter-spacing:.06em;fill:rgba(244,243,240,.62);text-anchor:middle;dominant-baseline:middle}
.sx-iris .sxfn text.sxfo{fill:#e8742a}
.sx-so .sx-cap{z-index:8}

/* ---------- RIMOWA, its own opening: the corrugated skin of 1920 becomes the grooves of the case ---------- */
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:200 400;font-display:swap;src:url(fonts/AlbertSans-normal.inst.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/Newsreader-italic.inst.woff2) format("woff2")}
.sx-rw{--h:400vh;--rp:clamp(56px,3vw,88px);--rink:#121212;--rdim:rgba(18,18,18,.64)}
.sx-rw .sx-st{background:#F2F2F0;color:var(--rink);font-family:"Albert Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}
/* not promoted to layers on purpose: at eight times its size a promoted photograph cannot be rastered in time and tears;
   left unpromoted, each frame draws only what is on screen */
.sxrw-p,.sxrw-g{position:absolute;inset:0;overflow:hidden}
.sxrw-p img,.sxrw-g img{width:100%;height:100%;max-width:none;object-fit:cover}
.sxrw-p img{object-position:50% 34%}
.sxrw-g{opacity:0}
.sxrw-w{position:absolute;left:var(--rp);bottom:var(--rp);width:min(52%,1400px);z-index:3}
.sxrw-hl{margin:0;font-weight:200;font-size:clamp(40px,3.1vw,92px);line-height:1.34;letter-spacing:.26em;text-transform:uppercase}
.sxrw-hl span{display:block}
.sxrw-tr{margin:.5em 0 0;font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(22px,1.35vw,36px);line-height:1.3}
.sxrw-lb{margin:clamp(28px,5vh,64px) 0 0;max-width:30em;font-size:15px;line-height:1.5;color:var(--rdim)}
.sxrw-lb i{display:block;font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;font-size:18px;color:var(--rink);margin-bottom:.2em}
.sxrw-lb span{display:block;margin-top:.35em;font-size:13px}
.sxrw-t{position:absolute;z-index:3;left:60%;right:var(--rp);bottom:var(--rp);opacity:0}
.sxrw-t i{display:block;font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(80px,5.6vw,160px);line-height:.9;letter-spacing:-.01em;margin-bottom:.32em}
.sxrw-t p{margin:0;font-weight:300;font-size:clamp(26px,2vw,56px);line-height:1.2;letter-spacing:-.004em;max-width:17em;text-wrap:balance}
.sxrw-t small{display:block;margin-top:1.4em;max-width:34em;font-size:15px;line-height:1.5;color:var(--rdim)}
.sx-rw .sx-cap{z-index:4;top:calc(var(--g) + 64px);bottom:auto;left:var(--rp);right:var(--rp);font-family:inherit;mix-blend-mode:difference;color:#fff}

@media (max-aspect-ratio:17/20){
  .sxso-l{top:40%;font-size:30vw}
  .sxso-l h3{flex-direction:column;line-height:.86}
  .sxso-l .sxsp{display:none}
  .sxso-st text.sxso-q{display:none}
  .sxrw-p img{object-position:8% 50%}
  .sxrw-w{right:var(--rp);width:auto;bottom:calc(var(--rp) * 2.6)}
  .sxrw-hl{font-size:clamp(24px,7vw,30px)}
  .sxrw-t{left:var(--rp)}
  .sx-rw{--rp:20px}
}

/* ---------- Saridis, after its name: the klismos eleven times on a true scale of 2,500 years, as on its own site ---------- */
.sx-sr{--h:480vh}
.sxsr-n{position:absolute;inset:0;z-index:4;background:#0E0D0C;color:#F2F1EC;visibility:hidden}
.sx-sr.sx-night .sxsr-n{visibility:visible}
.sx-sr.sx-night .sx-cap{color:#F2F1EC;z-index:6}
.sxsr-ru{position:absolute;left:var(--g);right:var(--g);top:calc(var(--g) + 64px);height:64px;font:400 12px/1 var(--sans);color:rgba(242,241,236,.64)}
.sxsr-ax{position:absolute;left:0;right:0;top:26px;height:1px;background:rgba(242,241,236,.14)}
.sxsr-ru i{position:absolute;top:18px;width:1px;height:17px;background:rgba(242,241,236,.64)}
.sxsr-ru i.sx-on{background:#A44A21;top:8px;height:27px}
.sxsr-ru span{position:absolute;top:42px;transform:translateX(-50%);white-space:nowrap}
.sxsr-ru span.sxL{transform:none}.sxsr-ru span.sxR{transform:translateX(-100%)}
.sxsr-ru em{position:absolute;right:0;top:0;font-style:normal}
.sxsr-t{position:absolute;left:calc(100% / 7 * 3);right:var(--g);top:calc(var(--g) + 156px);margin:0;max-width:28em;font:500 clamp(18px,1.55vw,28px)/1.2 var(--sans);letter-spacing:-.01em}
.sxsr-tr{position:absolute;left:0;bottom:calc(var(--g) * 3.4);display:flex;will-change:transform}
.sxsr-pl{flex:0 0 auto;width:calc(100vw / 7 * 2);margin:0;padding-right:1px}
.sxsr-im{height:min(52svh,calc(100vw / 7 * 2 * 4 / 3));aspect-ratio:3/4;overflow:hidden;background:#1a1816}
.sxsr-im img{width:100%;height:100%;max-width:none;object-fit:cover}
.sxsr-pl figcaption{padding:14px var(--g) 0;font:400 12px/1.4 var(--sans);height:70px;border-left:1px solid rgba(242,241,236,.14);color:rgba(242,241,236,.64)}
.sxsr-pl figcaption b{display:block;font-weight:500;font-size:15px;margin-bottom:3px;color:#F2F1EC}
.sxsr-last figcaption b{color:#C2643A}
@media (max-aspect-ratio:17/20){
  .sxsr-t{left:var(--g);top:calc(var(--g) + 150px);font-size:17px}
  .sxsr-pl{width:72vw}
  .sxsr-im{height:min(50svh,72vw * 4 / 3)}
}
/* on a phone the cover's lower third is mid-grey concrete, where a difference blend goes grey too: set the word in ink (as TEMPLUM does);
   the name and address go up under the chapter's name, clear of the caption */
@media (max-aspect-ratio:17/20){
  .sxtp-s .sxtt{color:var(--ink);mix-blend-mode:normal}
  .sxtp-k{top:calc(var(--g) + 64px);bottom:auto;right:var(--g);left:auto;align-items:flex-end!important;text-align:right}
}

/* ---------- MakeBook: its own film, cut to the idea, played whole in the frame ---------- */
.sx-mb{--h:240vh}
.sx-mb .sx-st{background:#0d0d0e}
.sxmb-v{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;background:#0d0d0e}
.sxmb-l{position:absolute;z-index:3;left:50%;bottom:calc(var(--g) * .95);transform:translateX(-50%);margin:0;display:flex;gap:16px;white-space:nowrap;font:400 15px/1.3 var(--sans);color:rgba(244,243,240,.62)}
.sxmb-l span:first-child{color:#f4f3f0}

/* ---------- the six, live: over a row, its film fills the room behind the list ---------- */
.sx-end{position:relative;background:var(--paper);overflow:hidden}
/* over a row, its film opens in a frame beside the cursor and follows it; the list itself stays on paper, untouched */
.sx-endv{position:absolute;left:0;top:0;z-index:2;width:min(34vw,620px);aspect-ratio:16/9;pointer-events:none;overflow:hidden;background:#0c0c0d;clip-path:inset(100% 0 0 0);transition:clip-path .7s cubic-bezier(.19,1,.22,1);will-change:transform}
.sx-end.sx-film .sx-endv{clip-path:inset(0 0 0 0)}
.sx-endv video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .45s linear,transform 1.1s cubic-bezier(.19,1,.22,1)}
.sx-endv video.sx-on{opacity:1;transform:none}
.sx-endw{position:relative;z-index:1;padding:calc(var(--g) * 6) var(--g) calc(var(--g) * 5);color:var(--ink)}
.sx-endh{display:inline;margin:0;font:400 clamp(30px,3.1vw,66px)/1.05 var(--didot)}
.sx-ends{display:inline;margin:0 0 0 .6em;font:400 15px/1.3 var(--sans);color:var(--mute)}
.sx-l{list-style:none;margin:calc(var(--g) * 2.2) 0 0;padding:0;border-top:1px solid currentColor}
.sx-l a{display:grid;grid-template-columns:56px minmax(190px,22%) 1fr auto;align-items:baseline;gap:20px;padding:clamp(8px,.9vw,16px) 0 clamp(10px,1.1vw,18px);border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;transition:opacity .35s linear,border-color .35s linear}
.sx-l .sxi{font:400 15px/1.3 var(--sans);font-variant-numeric:tabular-nums;opacity:.72}
.sx-l .sxn{font:400 13px/1.4 var(--sans)}
.sx-l .sxn b{display:block;font-weight:500;font-size:15px}
.sx-l .sxn span{display:block;opacity:.58}
.sx-l .sxu{font:400 clamp(30px,5vw,96px)/1.06 var(--didot);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sx-l .sxr{font:300 clamp(20px,2vw,34px)/1 var(--sans);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sx-l:hover a:not(:hover){opacity:.34}
.sx-l a:hover .sxu,.sx-l a:focus-visible .sxu{transform:translateX(.14em)}
.sx-l a:hover .sxr,.sx-l a:focus-visible .sxr{transform:translate(.12em,-.12em)}
@media (max-aspect-ratio:17/20){
  .sxmb-l{left:var(--g);right:var(--g);transform:none;bottom:calc(var(--g) * 4.4);flex-direction:column;gap:2px;white-space:normal}
  .sx-l a{grid-template-columns:34px 1fr auto;gap:2px 10px}
  .sx-l .sxn{grid-column:2/-1}
  .sx-l .sxu{grid-column:2/3;font-size:clamp(19px,5.5vw,40px)}
  .sx-ends{display:block;margin:.5em 0 0}
}
/* performance: screens far from the window are not rendered until they come near. Each has an explicit height, so
   skipping them changes no positions on the page */
.sx-k,.co{content-visibility:auto}
@media (max-aspect-ratio:17/20){
  .sx-tp .sx-hd{top:calc(var(--g) + 58px)}
  .sxtp-k{top:calc(var(--g) + 58px)}
  .sx-tp .sx-hd span{display:none}
}

/* ---------- the back half: one person, one place, one sentence ---------- */
/* Principal: after the columns close, the portrait stands as a seventh column; the name comes out from behind it */
.lx-pr{position:relative;height:190vh;background:#0c0c0d;color:#f4f3f0}
.lx-pst{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.lx-pf{position:absolute;z-index:2;left:var(--g);top:0;height:100%;aspect-ratio:2/3;margin:0;overflow:hidden;background:#1a1a1b}
.lx-pf img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%;will-change:transform}
.lx-pn{position:absolute;z-index:1;left:calc(var(--g) + 100svh * 2 / 3 + clamp(28px,3.4vw,64px));right:var(--g);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.lx-pk{margin:0 0 1.2em;font:400 15px/1.3 var(--sans);color:rgba(244,243,240,.6)}
.lx-pn h2{margin:0;font:400 clamp(56px,7.6vw,172px)/.86 var(--didot);letter-spacing:-.022em}
.lx-pn h2 span{display:block;will-change:transform}
.lx-pl{list-style:none;margin:clamp(28px,5vh,60px) 0 0;padding:0;max-width:46ch;font:400 15px/1.5 var(--sans);color:rgba(244,243,240,.8)}
.lx-pl li{padding:.6em 0;border-top:1px solid rgba(244,243,240,.18)}
/* Office: Central, full bleed, and the time in Hong Kong across the whole screen */
.lx-of{position:relative;height:100vh;height:100svh;overflow:hidden;background:#0c0c0d;color:#fff}
.lx-ob{position:absolute;left:0;right:0;top:-8%;bottom:-8%;margin:0;will-change:transform}
.lx-ob img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 42%}
.lx-ob::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.62) 0%,rgba(10,10,11,.38) 34%,rgba(10,10,11,.4) 100%)}
.lx-ok{position:absolute;z-index:3;left:var(--g);top:calc(var(--g) + 56px);margin:0;font:400 15px/1.3 var(--sans);color:rgba(255,255,255,.72)}
.lx-oc{position:absolute;z-index:3;left:0;right:0;top:48%;transform:translateY(-50%);margin:0;text-align:center;font:400 min(20.5vw,42vh)/.8 var(--didot);letter-spacing:-.02em;white-space:nowrap;color:#fff}
.lx-oc i{display:inline-block;width:.6em;font-style:normal;text-align:center}
.lx-oc i.lx-c{width:.26em}
.lx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lx-of-b{position:absolute;z-index:3;left:var(--g);right:var(--g);bottom:calc(var(--g) * 1.1);display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:end;color:#fff}
.lx-of-b h2{grid-column:1;margin:0;font:400 clamp(28px,2.6vw,52px)/1.05 var(--didot);letter-spacing:-.01em}
.lx-oa{grid-column:1;margin:.5em 0 0;font:400 15px/1.4 var(--sans)}
.lx-os{grid-column:2;grid-row:1/3;align-self:end;justify-self:end;margin:0;max-width:30em;text-align:right;font:400 15px/1.4 var(--sans)}
/* Correspondence: the brief is the page; its underlined words turn over when clicked */
.lx-co{position:relative;min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink);padding:calc(var(--g) + 64px) var(--g) calc(var(--g) * 1.2);display:flex;flex-direction:column}
.lx-ck{margin:0;font:500 15px/1.3 var(--sans)}
.lx-br{margin:auto 0 0;padding:0;border:0}
.lx-br .bs{margin:0;font:400 clamp(44px,6.4vw,140px)/1.02 var(--didot);letter-spacing:-.022em;max-width:19ch}
.lx-br .chb{display:inline;font-style:italic;text-decoration-thickness:2px;text-underline-offset:.12em;white-space:normal;text-align:inherit}
.lx-br .chb::after{display:none}
.lx-br .chb:hover{opacity:.62}
.lx-br .chb.flip{animation:lxflip .55s cubic-bezier(.2,.7,.2,1)}
@keyframes lxflip{from{opacity:0}to{opacity:1}}
.lx-hint{margin:1.1em 0 0;font:400 15px/1.3 var(--sans);color:var(--mute)}
.lx-bb{margin:clamp(28px,5vh,60px) 0 0;padding:0 0 .1em;border:0;border-bottom:2px solid currentColor;background:none;font:400 clamp(30px,2.8vw,58px)/1.1 var(--didot);color:inherit;cursor:pointer}
.lx-bb span{display:inline-block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lx-bb:hover span,.lx-bb:focus-visible span{transform:translate(.1em,-.1em)}
.lx-bn{margin:.9em 0 0;font:400 13px/1.4 var(--sans);color:var(--mute)}
.lx-cp{margin-top:clamp(48px,9vh,110px);display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--g);border-top:1px solid var(--ink);padding-top:14px;font:400 15px/1.4 var(--sans)}
.lx-cp h3{margin:0 0 .3em;font:inherit;color:var(--mute)}
.lx-cp a{color:inherit}
.lx-cp .lx-pk2{margin-left:.8em;color:var(--mute)}
@media (max-aspect-ratio:17/20){
  .lx-pf{left:0;right:0;width:auto;height:58%;aspect-ratio:auto}
  .lx-pn{left:var(--g);top:58%;justify-content:flex-start;padding-top:22px}
  .lx-pk{display:none}
  .lx-pn h2{font-size:clamp(40px,12vw,72px)}
  .lx-pl{margin-top:16px;font-size:13px}
  .lx-pl li{padding:.45em 0}
  .lx-oc{font-size:20vw}
  .lx-of-b{grid-template-columns:1fr}
  .lx-os{grid-column:1;grid-row:auto;justify-self:start;text-align:left;margin-top:.8em}
  .lx-br .bs{font-size:clamp(34px,10.4vw,60px)}
  .lx-cp{grid-template-columns:1fr;row-gap:14px}
}
.lx-br .ch{display:inline;white-space:normal}
/* Walapay: its engraving, not its hero. Paper, its own type, its own iris-printed rosette */
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/instrument-sans-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/instrument-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+20A0-20C4}
@font-face{font-family:"Noto Sans Devanagari WP";font-weight:500;font-display:swap;src:url(fonts/noto-devanagari-wp.woff2) format("woff2")}
.sx-wp{--h:240vh;--wink:#16201A;--wg:#2F7A44}
.sx-wp .sx-st{background:#F6F6F3;color:var(--wink);font-family:"Instrument Sans","Noto Sans Devanagari WP","Helvetica Neue",Helvetica,Arial,sans-serif}
.sxwp-r{position:absolute;--d:min(122vh,80vw);width:var(--d);height:var(--d);left:calc(67% - var(--d)/2);top:calc(50% - var(--d)/2);pointer-events:none}
.sxwp-r canvas{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.sxwp-t{position:absolute;z-index:2;left:var(--g);top:50%;transform:translateY(-58%);max-width:44vw}
.sxwp-h{margin:0;font-weight:500;font-size:clamp(40px,4.7vw,96px);line-height:1;letter-spacing:-.025em;text-shadow:0 0 18px #F6F6F3,0 0 6px #F6F6F3}
.sxwp-m{margin-top:clamp(28px,6vh,64px);font-variant-numeric:tabular-nums}
.sxwp-l,.sxwp-a{position:relative;overflow:hidden}
.sxwp-l{height:1.4em;font-size:15px;color:var(--wg)}
.sxwp-a{height:1.2em;font-size:clamp(30px,3.1vw,62px);font-weight:500;letter-spacing:-.015em;margin-top:6px}
/* the amount rolls like a counter: the old line is carried out of the top as the new one comes up from below, both solid,
   never overlapping, so there is nothing to ghost */
.sxwp-l span,.sxwp-a span{position:absolute;left:0;top:0;white-space:nowrap;line-height:inherit;transform:translate3d(0,105%,0);backface-visibility:hidden}
.sxwp-l span.sxwp-in,.sxwp-a span.sxwp-in,.sxwp-l span.sxwp-out,.sxwp-a span.sxwp-out{transition:transform .85s cubic-bezier(.76,0,.24,1)}
.sxwp-l span.sxwp-in,.sxwp-a span.sxwp-in{transform:translate3d(0,0,0)}
.sxwp-l span.sxwp-out,.sxwp-a span.sxwp-out{transform:translate3d(0,-105%,0)}
.sxwp-a span.sxwp-in,.sxwp-a span.sxwp-out{transition-delay:.04s}
.sxwp-l span{line-height:1.4em}.sxwp-a span{line-height:1.2em}
@media (max-aspect-ratio:17/20){
  .sxwp-r{--d:118vw;left:calc(50% - var(--d)/2);top:calc(36% - var(--d)/2)}
  .sxwp-t{top:auto;bottom:calc(var(--g) + 76px);transform:none;max-width:none;right:var(--g)}
  .sxwp-h{font-size:clamp(34px,10vw,52px)}
  .sxwp-a{font-size:clamp(26px,8vw,40px)}
}
/* the letter the brief will open, written out beside it as the words change: what is sent is what you see */
.lx-br{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(32px,5vw,96px);align-items:end}
.lx-br>*:not(.lx-lt){grid-column:1}
.lx-br>.lx-bb{justify-self:start}
.lx-lt{grid-column:2;grid-row:1/5;align-self:end;margin:0 0 .3em;padding:0;border-top:1px solid var(--ink)}
.lx-lh{margin:0;padding:10px 0 9px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:5.2em 1fr;font:400 15px/1.35 var(--sans)}
.lx-lh span{color:var(--mute)}
.lx-lh b{font-weight:400}
.lx-lb{margin:clamp(20px,3vh,32px) 0 0;font:400 clamp(20px,1.55vw,30px)/1.3 var(--didot)}
.lx-lb span{display:block}
.lx-l2{margin-top:.8em;color:var(--mute)}
.lx-lt .lx-chg{animation:lxlt .6s cubic-bezier(.2,.7,.2,1)}
@keyframes lxlt{from{opacity:.25;transform:translate3d(0,.25em,0)}to{opacity:1;transform:none}}
@media (max-aspect-ratio:17/20){.lx-br{display:block}.lx-lt{margin-top:40px}}
/* Principal, second version: nothing slides across the screen any more (it showed past the portrait's edge). The name
   rises inside its own lines, the words follow in order, once, on time rather than dragged by the scroll */
.lx-pn h2 span{will-change:auto}
.lx-pn h2 .lx-ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lx-pn h2 .lx-ln>span{display:block;transform:translate3d(0,108%,0);transition:transform .7s cubic-bezier(.55,0,.6,.2)}
.lx-pr.lx-in h2 .lx-ln>span{transform:none;transition:transform 1.3s cubic-bezier(.19,1,.22,1) .05s}
.lx-pr.lx-in h2 .lx-ln:nth-child(2)>span{transition-delay:.17s}
.lx-pk,.lx-pd,.lx-pl>div{opacity:0;transform:translate3d(0,12px,0);transition:opacity .4s linear,transform .6s cubic-bezier(.55,0,.6,.2)}
.lx-pr.lx-in .lx-pk,.lx-pr.lx-in .lx-pd,.lx-pr.lx-in .lx-pl>div{opacity:1;transform:none;transition:opacity .9s linear,transform 1.2s cubic-bezier(.19,1,.22,1)}
.lx-pr.lx-in .lx-pk{transition-delay:0s}
.lx-pr.lx-in .lx-pd{transition-delay:.42s}
.lx-pr.lx-in .lx-pl>div:nth-child(1){transition-delay:.58s}
.lx-pr.lx-in .lx-pl>div:nth-child(2){transition-delay:.66s}
.lx-pr.lx-in .lx-pl>div:nth-child(3){transition-delay:.74s}
.lx-pr.lx-in .lx-pl>div:nth-child(4){transition-delay:.82s}
.lx-pr.lx-in .lx-pl>div:nth-child(5){transition-delay:.9s}
.lx-pd{margin:clamp(22px,3.6vh,40px) 0 0;max-width:31ch;font:400 clamp(20px,1.55vw,30px)/1.32 var(--didot);letter-spacing:-.004em;color:#f4f3f0}
.lx-pl{margin:clamp(22px,3.6vh,44px) 0 0;max-width:56ch;font:400 15px/1.45 var(--sans);color:rgba(244,243,240,.86)}
.lx-pl>div{display:grid;grid-template-columns:7.5em 1fr;column-gap:16px;padding:.62em 0;border-top:1px solid rgba(244,243,240,.16)}
.lx-pl>div:last-child{border-bottom:1px solid rgba(244,243,240,.16)}
.lx-pl dt{color:rgba(244,243,240,.5)}
.lx-pl dd{margin:0}
@media (prefers-reduced-motion:reduce){.lx-pn h2 .lx-ln>span,.lx-pk,.lx-pd,.lx-pl>div{transform:none!important;opacity:1!important;transition:none!important}}
/* on a phone the portrait and the words simply follow each other down the page: nothing is held, nothing is cut */
@media (max-aspect-ratio:17/20){
  .lx-pr{height:auto}
  .lx-pst{position:relative;height:auto;overflow:visible}
  .lx-pf{position:relative;left:auto;right:auto;top:auto;width:100%;height:auto;aspect-ratio:4/5}
  .lx-pn{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:block;padding:28px var(--g) calc(var(--g) * 3)}
  .lx-pk{display:block;margin-bottom:.9em}
  .lx-pn h2{font-size:clamp(48px,15vw,80px)}
  .lx-pd{font-size:clamp(19px,5.4vw,24px)}
  .lx-pl{font-size:14px}
  .lx-pl>div{grid-template-columns:6.2em 1fr;padding:.55em 0}
}
/* Office, second version: the photograph of Central is the picture; the time is set small, in the text face with figures of
   one width, at the head of the page opposite its label, like the line on a letterhead */
.lx-ob::after{background:linear-gradient(to top,rgba(10,10,11,.62) 0%,rgba(10,10,11,.3) 34%,rgba(10,10,11,.2) 70%,rgba(10,10,11,.34) 100%)}
.lx-oc,.lx-oy{left:auto;right:var(--g);top:calc(var(--g) + 56px);transform:none;margin:0;text-align:right;font:400 15px/1.3 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;color:#fff}
.lx-oy{position:absolute;z-index:3;top:calc(var(--g) + 56px + 1.55em);color:rgba(255,255,255,.72)}
.lx-oc i,.lx-oy i{display:inline-block;width:.58em;font-style:normal;text-align:center}
.lx-oc i.lx-c,.lx-oy i.lx-c{width:.3em}
.lx-oc::before,.lx-oy::before{display:inline-block;width:6.4em;text-align:left;color:rgba(255,255,255,.6)}
.lx-oc::before{content:"Hong Kong"}
.lx-oy::before{content:"Your time"}
@media (max-aspect-ratio:17/20){.lx-oc,.lx-oy{font-size:14px}}
.lx-ob::after{background:linear-gradient(to bottom,rgba(10,10,11,.46) 0%,rgba(10,10,11,0) 26%),linear-gradient(to top,rgba(10,10,11,.62) 0%,rgba(10,10,11,.3) 34%,rgba(10,10,11,.18) 70%,rgba(10,10,11,.2) 100%)}
.lx-oc::before,.lx-oy::before{color:rgba(255,255,255,.74)}