.ring{--ring-font:clamp(12px, 1.15vw, 18px);--ring-size:calc(var(--ring-font) * 10);width:var(--ring-size);height:var(--ring-size);color:inherit;text-decoration:none;display:block;position:relative}.ring-turn,.ring-fast{border-radius:50%;position:absolute;inset:0}.ring-turn{background-color:var(--ink);animation:20s linear infinite ring-turn;inset:13%}.ring-fast{animation:5s linear infinite paused ring-turn}@media (hover:hover){.ring:hover .ring-fast{animation-play-state:running}}@keyframes ring-turn{to{rotate:360deg}}.ring-fast span{text-align:center;font-size:var(--ring-font);letter-spacing:.04em;padding-top:calc(var(--ring-size) * .035);color:var(--paper);font-weight:600;line-height:1;position:absolute;inset:0}.ring-button{background-color:var(--accent);color:var(--on-accent);border-radius:50%;place-items:center;transition:background-color .25s;display:grid;position:absolute;inset:31%}.ring-button svg{width:38%;height:38%}@media (hover:hover){.ring:hover .ring-button{background-color:color-mix(in srgb, var(--accent) 88%, var(--on-accent))}}@media (prefers-reduced-motion:reduce){.ring-turn,.ring-fast{animation:none}}
@property --go{syntax:"<number>";inherits:true;initial-value:0}.intro{padding:clamp(84px, 13.5vh, 190px) var(--gutter) 0;background-color:var(--band);color:var(--paper)}.intro>div{width:100%;max-width:var(--sheet);--gap:var(--band-gap);--action-col:calc(var(--meta) * 9.5 + 56px);--title:min(var(--count-rule), calc((100cqw - var(--label-col) - var(--action-col) - 2 * var(--gap)) / 9.33));grid-template-columns:var(--label-col) minmax(0, 1fr) var(--action-col);column-gap:var(--gap);margin-inline:auto;display:grid;container-type:inline-size}.intro-label-hold{grid-area:1/1/3}.intro-label{--label-offset:clamp(20px, 4vh, 44px);top:calc(var(--bar-h) + var(--label-offset));margin:0;margin-top:calc(.16 * var(--title) - .125 * var(--meta));color:var(--accent);line-height:1;font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;font-weight:600;position:sticky}.intro h2{font-size:var(--title);letter-spacing:-.005em;text-transform:uppercase;grid-area:1/2;margin:0;line-height:1.06}.intro h2>span:not(.draw){color:var(--accent)}.intro-lead{font-size:var(--read);color:color-mix(in srgb, var(--paper) 72%, var(--ink));grid-area:2/2;margin:clamp(18px,2.4vw,34px) 0 0;line-height:1.62}@property --ring-gap{syntax:"<length>";inherits:true;initial-value:0}@property --ring-r{syntax:"<length>";inherits:true;initial-value:0}@property --ring-cy{syntax:"<length>";inherits:true;initial-value:0}.intro-stage{--ring-h:calc(100vh - var(--bar-h) - 24px);--ring-card:clamp(150px, calc(var(--ring-h) * .215), 230px);--ring-gap:calc(var(--ring-card) * .4);--ring-lid:calc(.46875 * var(--ring-card) + 10px);--ring-turn:.42;--ring-r:calc((var(--ring-card) + var(--ring-gap)) / var(--ring-turn));--ring-cy:calc(var(--ring-r) + .625 * var(--ring-card) + var(--ring-lid));--ring-air:calc(.26 * var(--ring-card));--ring-fig-top:calc(var(--ring-lid) + 1.71875 * var(--ring-card) + var(--ring-air));--ring-bust:.52;--ring-fig:calc((var(--ring-h) - var(--ring-fig-top)) / var(--ring-bust));height:calc(var(--ring-h) + 4 * 68vh);grid-area:3/1/auto/-1;margin:clamp(34px,4.6vw,72px) 0 0}.intro-ring{touch-action:pan-y;top:calc(var(--bar-h) + 24px);height:var(--ring-h);position:sticky;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000);mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000)}.intro-ring-figure,.intro-say{z-index:1;width:min(calc(var(--ring-fig) * 1053 / 1100), 100%);aspect-ratio:1053/1100;height:auto;left:50%;top:var(--ring-fig-top);filter:grayscale();pointer-events:none;background-image:url(/intro-figure-dark.webp);background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;translate:-50%}:root[data-theme=light] .intro-ring-figure{background-image:url(/intro-figure-light.webp)}.intro-say{pointer-events:none;filter:none;background-image:none;container-type:inline-size}.intro-say span{background-color:var(--paper);color:var(--ink);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;opacity:0;padding:.75em 1.1em;font-size:clamp(11px,2.9cqw,15px);font-weight:600;line-height:1.35;transition:opacity .4s,translate .4s;position:absolute;translate:0 .6em}.intro-say span:after{content:"";background-color:inherit;width:.64em;height:.64em;position:absolute;top:50%;translate:0 -50%;rotate:45deg}.intro-say span:first-child,.intro-say span:nth-child(3){top:9%;right:66%}.intro-say span:nth-child(3){top:34%}.intro-say span:first-child:after,.intro-say span:nth-child(3):after{right:-.32em}.intro-say span:nth-child(2){top:22%;left:64%}.intro-say span:nth-child(2):after{left:-.32em}.intro-say.is-said span:first-child,.intro-say.is-said span:nth-child(2),.intro-say.is-told span:nth-child(2),.intro-say.is-told span:nth-child(3){opacity:1;translate:0}.intro-say.is-said span:first-child{transition-delay:.3s}.intro-say.is-said span:nth-child(2){transition-delay:1.6s}.intro-say.is-told span:nth-child(3){transition-delay:.4s}.intro-say em{font-style:inherit;display:none}@media (max-width:900px){.intro-say em{display:inline}.intro-say span:nth-child(2){white-space:normal;width:40cqw;top:12%;left:58%}.intro-say span:nth-child(3){white-space:normal;width:48cqw;top:30%;left:2%;right:auto}.intro-say span:nth-child(3) br{display:none}}@media (prefers-reduced-motion:reduce){.intro-say span{transition:opacity .2s;translate:0}}.intro-ring-paper{z-index:0;pointer-events:none;--cell:var(--cell-page,clamp(64px, 7.4vw, 108px));--rule:color-mix(in srgb, var(--ruling) 13%, transparent);position:absolute;inset:0}.intro-cards{z-index:2;margin:0;padding:0;list-style:none;position:absolute;inset:0}.intro-card{aspect-ratio:4/5;width:var(--ring-card);will-change:transform, width;--card-ink:var(--paper);--card-ground:var(--ink);--card-mute:var(--card-ground);--go:0;--art-h:clamp(84px, 50cqw, 220px);--card-gap:clamp(9px, 6.4cqw, 38px);--frame-pad:clamp(9px, 5cqw, 22px);--room:calc(100cqw - 2 * (var(--pad) + var(--frame-pad)));--icon:clamp(26px, 14cqw, 52px);--pad:clamp(12px, 8cqw, 34px);background-color:var(--card-ground);color:var(--card-ink);transition:background-color .28s,--go .46s,color .18s .34s;position:absolute;top:0;left:0;overflow:hidden;container-type:inline-size}.intro-card.is-on{--card-ink:var(--ink);--card-ground:var(--paper)}.intro-card.is-swapping{transition:--go .46s}.intro-card.is-open{--go:1;--card-ink:var(--on-accent);--card-mute:var(--accent);--ask-see:visible}.intro-card-in{z-index:1;background-repeat:no-repeat;background-origin:border-box;background-image:linear-gradient(var(--card-ground), var(--card-ground));background-position:var(--pad) calc(var(--pad) + var(--icon) / 2);background-size:calc(100% - 2 * var(--pad)) calc(100% - 2 * var(--pad) - var(--icon) / 2);grid-template-rows:auto minmax(0, calc(var(--art-h) * (1 - var(--go)))) minmax(0, 1fr);align-content:start;gap:calc(var(--card-gap) * (1 - .55 * var(--go)));height:100%;padding:var(--pad) calc(var(--pad) + var(--frame-pad)) calc(var(--pad) + var(--frame-pad));display:grid;position:relative}.intro-card-in:before{content:"";z-index:-1;background-color:var(--accent);top:calc(var(--pad) * (1 - var(--go)));bottom:calc((100% - var(--pad) - var(--icon)) * (1 - var(--go)));left:calc((50% - var(--icon) / 2) * (1 - var(--go)));right:calc((50% - var(--icon) / 2) * (1 - var(--go)));position:absolute}.intro-card-in:after{content:"";z-index:-1;inset:calc(var(--pad) + var(--icon) / 2) var(--pad) var(--pad);--line:color-mix(in srgb, var(--on-accent) calc(var(--go) * 100%), var(--accent));--dash:calc(7px + (1 - var(--go)) * 900px);--dash-gap:6px;background-repeat:no-repeat;position:absolute}.intro-card.is-on .intro-card-in:after{--dash:7px}.intro-card-in:after{background-image:repeating-linear-gradient(to right, var(--line) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to bottom, var(--line) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to right, var(--line) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to bottom, var(--line) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap)));pointer-events:none;background-position:0 0,100% 0,100% 100%,0 100%;background-size:100% 1px,1px 100%,100% 1px,1px 100%}.intro-card-head{justify-content:center;align-items:flex-start;display:flex}.intro-card-icon{appearance:none;font:inherit;cursor:pointer;width:var(--icon);aspect-ratio:1;color:var(--on-accent);background-color:var(--accent);z-index:1;border:0;flex:none;place-items:center;padding:0;display:grid;position:relative}@keyframes intro-ask{0%{opacity:.55;scale:1}65%,to{opacity:0;scale:1.85}}@media (hover:none){.intro-card-icon:before{content:"";border:1px solid var(--accent);opacity:0;pointer-events:none;animation:2.8s ease-out infinite intro-ask;position:absolute;inset:0}.intro-card.is-on .intro-card-icon:before{animation:none}}@media (prefers-reduced-motion:reduce){.intro-card-icon:before{animation:none}}.intro-card-icon:after{content:"";--line:color-mix(in srgb, var(--on-accent) calc(var(--go) * 100%), transparent);background-repeat:no-repeat;background-image:linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));background-position:0 0,100% 0,100% 100%,0 100%;background-size:100% 1px,1px 100%,100% 1px,1px 100%;position:absolute;inset:0}.intro-card-icon svg{width:46%;height:46%}.intro-card-mark{width:100%;height:100%;min-height:0;opacity:calc(1 - var(--go) * 2.4);display:block;overflow:hidden}.card-art{width:auto;height:var(--art-h);object-fit:contain;margin-inline:auto;display:block}.intro-card-say{text-align:center;flex-direction:column;min-height:0;display:flex}.intro-card-say h3,.intro-card-say p{width:fit-content;max-width:100%;translate:calc(var(--room) / 2 - 50%) 0}.intro-card-we{margin:0 0 calc(var(--card-gap) * .3);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb, var(--card-ink) 62%, var(--card-ground));font-size:clamp(8px,3.6cqw,14px);font-weight:600;line-height:1}.intro-card-open{appearance:none;cursor:pointer;margin-top:calc(var(--card-gap) * .5);padding:calc(var(--card-gap) * .42) calc(var(--card-gap) * .85);background-color:var(--accent);color:var(--on-accent);font:inherit;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;visibility:var(--open-see,hidden);border:0;align-self:center;align-items:center;font-size:clamp(8px,3.6cqw,14px);font-weight:600;display:inline-flex}.intro-card.is-on .intro-card-open{--open-see:visible}.intro-card.is-open .intro-card-open{background-color:var(--on-accent);color:var(--accent)}.intro-card-long{margin:calc(var(--card-gap) * .55 * var(--go)) 0 0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--on-accent) 40%, transparent) transparent;scrollbar-gutter:stable;text-align:center;min-height:0;color:color-mix(in srgb, var(--card-ink) 82%, var(--card-mute));visibility:var(--ask-see,hidden);opacity:var(--go);flex:1 1 0;padding-right:clamp(9px,4cqw,18px);font-size:clamp(10px,4.4cqw,18px);line-height:1.5;transition:visibility .46s;overflow:hidden auto}.intro-card-say h3{letter-spacing:-.005em;text-transform:uppercase;margin:0;font-size:clamp(15px,9.9cqw,38px);font-weight:700;line-height:1.04}.intro-more{color:inherit;font-size:var(--meta);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;margin-bottom:calc(.08 * var(--title));grid-area:1/3;place-self:end;align-items:center;gap:14px;font-weight:600;text-decoration:none;display:inline-flex}.intro-more span{background-color:var(--accent);width:42px;height:42px;color:var(--on-accent);place-items:center;display:grid}.intro-more svg{width:18px;height:18px}@media (hover:hover){.intro-more:hover span{background-color:color-mix(in srgb, var(--accent) 88%, var(--on-accent))}}@media (max-width:900px){.intro>div{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3.4vh,30px)}.intro-label-hold,.intro h2,.intro-lead,.intro-stage,.intro-more{grid-area:auto/1}.intro-more{grid-row:4}.intro-stage{grid-row:5}.intro-label{margin-top:0;position:static}.intro-lead{margin-top:0}.intro>div{--label-col:0px;--action-col:0px;--gap:0px}.intro-more{display:none}.intro-stage{margin-top:clamp(6px,1.6vw,12px)}}