.dframe{--gap-x:44px;--gap-y:44px;--gap-r:24px;--mark:color-mix(in srgb, var(--graphite) 62%, transparent);--mark-faint:color-mix(in srgb, var(--graphite) 34%, transparent);min-width:0;margin:0;position:relative}.dframe-sheet{margin:0 var(--gap-r) 0 var(--gap-y);padding-top:var(--gap-x);position:relative}.dframe-view{aspect-ratio:var(--ratio);background:var(--drafting);clip-path:circle(72%);border-radius:1px;transition:clip-path 1.6s cubic-bezier(.65,0,.35,1) .35s;position:relative;overflow:hidden}.dframe-media{position:absolute;inset:0}.dframe-media>img,.dframe-media>picture,.dframe-media>picture>img,.dframe-media>video{object-fit:cover;object-position:0 50%;width:100%;height:100%;display:block}.dframe-media img,.dframe-media video{transform:scale(var(--zoom,1));transform-origin:0;transition:transform 1.2s var(--ease-out-expo), filter 1.8s ease .95s}.dframe-compass{width:var(--compass);aspect-ratio:1;pointer-events:none;box-shadow:inset 0 0 0 2px var(--gold-lit), inset 0 0 12px color-mix(in srgb, var(--gold-lit) 60%, transparent), 0 0 14px 1px color-mix(in srgb, var(--gold-lit) 70%, transparent);opacity:0;border-radius:50%;transition:transform 1.6s cubic-bezier(.65,0,.35,1) .35s,opacity .6s 1.7s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(1)}.dframe-view:after{content:"";background:var(--signal);width:7px;height:7px;box-shadow:0 0 0 2px color-mix(in srgb, var(--glaze) 80%, transparent), 0 0 10px color-mix(in srgb, var(--signal) 70%, transparent);opacity:0;pointer-events:none;border-radius:50%;margin:-3.5px 0 0 -3.5px;transition:opacity .6s 1.2s;position:absolute;top:50%;left:50%}.dframe-dim{pointer-events:none;position:absolute;overflow:clip}.dframe-dim-x{height:var(--gap-x);top:0;left:0;right:0}.dframe-dim-y{top:var(--gap-x);bottom:0;left:calc(-1 * var(--gap-y));width:var(--gap-y)}.dframe-ext{background:var(--mark);transition:transform .9s var(--ease-out-expo), background-color .5s ease;position:absolute}.dframe-dim-x .dframe-ext{width:1px;height:calc(var(--gap-x) - 6px);transform-origin:bottom;bottom:4px}.dframe-dim-x .dframe-ext-a{left:0}.dframe-dim-x .dframe-ext-b{right:0}.dframe-dim-y .dframe-ext{height:1px;width:calc(var(--gap-y) - 6px);transform-origin:100%;right:4px}.dframe-dim-y .dframe-ext-a{top:0}.dframe-dim-y .dframe-ext-b{bottom:0}.dframe-line{align-items:center;display:flex;position:absolute}.dframe-dim-x .dframe-line{height:1px;top:13px;left:0;right:0}.dframe-dim-y .dframe-line{flex-direction:column;width:1px;top:0;bottom:0;left:13px}.dframe-arm{background:var(--mark);transition:transform 1.2s var(--ease-out-expo) .15s, background-color .5s ease;flex:1;position:relative}.dframe-dim-x .dframe-arm{height:1px}.dframe-dim-y .dframe-arm{width:1px}.dframe-dim-x .dframe-arm-a{transform-origin:100%}.dframe-dim-x .dframe-arm-b{transform-origin:0}.dframe-dim-y .dframe-arm-a{transform-origin:bottom}.dframe-dim-y .dframe-arm-b{transform-origin:top}.dframe-arm:before{content:"";border-style:solid;position:absolute}.dframe-dim-x .dframe-arm-a:before{border-width:3.5px 9px 3.5px 0;border-color:transparent var(--gold) transparent transparent;top:-3px;left:0}.dframe-dim-x .dframe-arm-b:before{border-width:3.5px 0 3.5px 9px;border-color:transparent transparent transparent var(--gold);top:-3px;right:0}.dframe-dim-y .dframe-arm-a:before{border-width:0 3.5px 9px;border-color:transparent transparent var(--gold) transparent;top:0;left:-3px}.dframe-dim-y .dframe-arm-b:before{border-width:9px 3.5px 0;border-color:var(--gold) transparent transparent transparent;bottom:0;left:-3px}.dframe-read{text-align:center;min-width:5ch;font:400 10.5px/1 var(--face-caption);letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--graphite);flex:none;transition:opacity .8s .55s}.dframe-dim-x .dframe-read{padding:0 10px}.dframe-dim-y .dframe-read{writing-mode:vertical-rl;min-width:0;min-height:5ch;padding:10px 0;transform:rotate(180deg)}.dframe-ruler{transition:clip-path 1.4s var(--ease-out-expo) .45s;clip-path:inset(0);position:absolute;overflow:hidden}.dframe-dim-x .dframe-ruler{height:9px;bottom:4px;left:0;right:0;-webkit-mask:linear-gradient(90deg,#0000,#000 22px calc(100% - 22px),#0000);mask:linear-gradient(90deg,#0000,#000 22px calc(100% - 22px),#0000)}.dframe-dim-y .dframe-ruler{width:9px;top:0;bottom:0;right:4px;-webkit-mask:linear-gradient(#0000,#000 22px calc(100% - 22px),#0000);mask:linear-gradient(#0000,#000 22px calc(100% - 22px),#0000)}.dframe-grad{position:absolute}.dframe-dim-x .dframe-grad{background:repeating-linear-gradient(90deg, var(--mark) 0 1px, transparent 1px 48px) 0 100% / 100% 9px no-repeat, repeating-linear-gradient(90deg, var(--mark-faint) 0 1px, transparent 1px 8px) 0 100% / 100% 4px no-repeat;transform:translate3d(calc(var(--cx-drift,0) * -40px), 0, 0);inset:0 -96px}.dframe-dim-y .dframe-grad{background:repeating-linear-gradient(180deg, var(--mark) 0 1px, transparent 1px 48px) 100% 0 / 9px 100% no-repeat, repeating-linear-gradient(180deg, var(--mark-faint) 0 1px, transparent 1px 8px) 100% 0 / 4px 100% no-repeat;transform:translate3d(0, calc(var(--cx-drift,0) * -40px), 0);inset:-96px 0}.dframe-cross{--c:color-mix(in srgb, var(--gold) 88%, transparent);pointer-events:none;background:linear-gradient(var(--c), var(--c)) center / 1px 100% no-repeat, linear-gradient(var(--c), var(--c)) center / 100% 1px no-repeat, radial-gradient(circle, transparent 0 4.4px, var(--c) 4.6px 5.4px, transparent 5.6px);width:19px;height:19px;transition:transform 1.1s var(--ease-out-expo), opacity .8s ease;position:absolute}.dframe-cross-tl{left:-26px;top:calc(var(--gap-x) - 26px)}.dframe-cross-tr{right:-26px;top:calc(var(--gap-x) - 26px)}.dframe-cross-bl{bottom:-26px;left:-26px}.dframe-cross-br{bottom:-26px;right:-26px}.dframe-strip{margin:34px var(--gap-r) 0 var(--gap-y);grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px 18px;padding-top:16px;display:grid;position:relative}.dframe-strip:before,.dframe-strip:after{content:"";transform-origin:0;height:1px;position:absolute;top:0;left:0;right:0}.dframe-strip:before{background:var(--hairline);transition:transform 1.2s var(--ease-out-expo) .6s}.dframe-strip:after{background:var(--gold);transition:transform .9s var(--ease-out-expo);transform:scaleX(0)}.dframe-fig{border-right:1px solid var(--hairline);font:400 11px/1.2 var(--face-caption);letter-spacing:.14em;white-space:nowrap;color:var(--gold);align-self:stretch;padding:4px 18px 0 0;position:relative}.dframe-fig .numeral{letter-spacing:.06em;vertical-align:-1px;gap:0;font-size:11.5px}.dframe-fig:before{content:"";background:var(--gold);width:1px;height:10px;position:absolute;top:-21px;left:0}.dframe-names{flex-direction:column;gap:9px;min-width:0;display:flex}.dframe-title{letter-spacing:.06em;color:var(--ink);margin:0;font-size:clamp(17px,1.45vw,22px)}.dframe-meta{font:300 10.5px/1.6 var(--face-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}.dframe-pointer{font:400 10.5px/1 var(--face-caption);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--graphite);align-items:center;gap:10px;padding-top:3px;transition:color .4s;display:inline-flex}.dframe-pointer .icon{color:var(--gold);transition:transform .6s var(--ease-out-expo);transform:translate(-8px)}.dframe-note{max-width:68ch;color:var(--ink);transition:opacity .9s ease .85s, transform 1.1s var(--ease-out-expo) .85s;grid-column:2/-1;font-size:16px;line-height:1.6}.dframe-fig,.dframe-names,.dframe-pointer{transition:opacity .9s ease .7s, transform 1.1s var(--ease-out-expo) .7s, color .4s ease}:focus-visible>.dframe{--zoom:1.035}:focus-visible>.dframe .dframe-cross-tl{transform:translate(11px,11px)}:focus-visible>.dframe .dframe-cross-tr{transform:translate(-11px,11px)}:focus-visible>.dframe .dframe-cross-bl{transform:translate(11px,-11px)}:focus-visible>.dframe .dframe-cross-br{transform:translate(-11px,-11px)}:focus-visible>.dframe :is(.dframe-arm,.dframe-ext){background-color:var(--gold)}:focus-visible>.dframe .dframe-strip:after{transform:scaleX(1)}:focus-visible>.dframe .dframe-pointer{color:var(--ink)}:focus-visible>.dframe .dframe-pointer .icon{transform:translate(0)}@media (hover:hover){.dframe:hover{--zoom:1.035}.dframe:hover .dframe-cross-tl{transform:translate(11px,11px)}.dframe:hover .dframe-cross-tr{transform:translate(-11px,11px)}.dframe:hover .dframe-cross-bl{transform:translate(11px,-11px)}.dframe:hover .dframe-cross-br{transform:translate(-11px,-11px)}.dframe:hover :is(.dframe-arm,.dframe-ext){background-color:var(--gold)}.dframe:hover .dframe-strip:after{transform:scaleX(1)}.dframe:hover .dframe-pointer{color:var(--ink)}.dframe:hover .dframe-pointer .icon{transform:translate(0)}}.dframe[data-drift]{--zoom:1.08}@media (hover:hover){.dframe[data-drift]:hover{--zoom:1.11}}.dframe[data-drift] .dframe-media{transform:translate3d(0, calc(var(--cx-drift,0) * -3.2%), 0)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-view{clip-path:circle(0%)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-compass{opacity:1;transition:none;transform:translate(-50%,-50%)scale(0)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-view:after{opacity:1;transition:none}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) :is(.dframe-media img,.dframe-media video){filter:grayscale()contrast(.78)brightness(1.2)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-dim-x .dframe-arm{transform:scaleX(0)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-dim-y .dframe-arm,.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-dim-x .dframe-ext{transform:scaleY(0)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-dim-y .dframe-ext{transform:scaleX(0)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-read{opacity:0}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-dim-x .dframe-ruler{clip-path:inset(0 100% 0 0)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-dim-y .dframe-ruler{clip-path:inset(0 0 100%)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-cross{opacity:0}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-cross-tl{transform:translate(-20px,-20px)rotate(-90deg)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-cross-tr{transform:translate(20px,-20px)rotate(90deg)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-cross-bl{transform:translate(-20px,20px)rotate(90deg)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-cross-br{transform:translate(20px,20px)rotate(-90deg)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) .dframe-strip:before{transform:scaleX(0)}.motion-ready:not(.motion-fallback) .dframe:not(.is-drawn) :is(.dframe-fig,.dframe-names,.dframe-pointer,.dframe-note){opacity:0;transform:translateY(10px)}@media (width<=899px){.dframe{--gap-x:36px;--gap-y:34px;--gap-r:24px}.dframe-dim-x .dframe-line{top:10px}.dframe-dim-y .dframe-line{left:10px}.dframe-cross{width:15px;height:15px}.dframe-cross-tl{left:-21px;top:calc(var(--gap-x) - 21px)}.dframe-cross-tr{right:-21px;top:calc(var(--gap-x) - 21px)}.dframe-cross-bl{bottom:-21px;left:-21px}.dframe-cross-br{bottom:-21px;right:-21px}.dframe-strip{grid-template-columns:auto minmax(0,1fr);column-gap:14px;margin-top:28px}.dframe-fig{padding-right:14px}.dframe-pointer{grid-column:2}.dframe-note{grid-column:1/-1;font-size:15px}}@media (prefers-reduced-motion:reduce){.dframe-view,.dframe-view:after,.dframe-media img,.dframe-media video,.dframe-compass,.dframe-ext,.dframe-arm,.dframe-read,.dframe-ruler,.dframe-cross,.dframe-strip:before,.dframe-strip:after,.dframe-fig,.dframe-names,.dframe-pointer,.dframe-pointer .icon,.dframe-note{transition:none}}