/* Pangea v15 shared: the top line over dark worlds, and a world's hero frame (the door's photograph, full screen). */
html.dark-top .top,html.dark-top .top__nav{color:#f3efe7}
html.dark-top .top.solid{background:rgba(20,19,18,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wd-hero{position:relative;height:100vh;height:100svh;overflow:hidden}
.wd-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* the logo, inline so it can move: the mark draws itself in fine line, then fills; a copper thread then runs
   once around its outline and leaves it, becoming the line that travels down the page (app.js) */
.top__logo .logo{display:block;height:50px;width:auto;overflow:visible;color:var(--ink);transform-origin:0 50%;transition:color .8s var(--caress),transform .9s var(--caress)}
@media (min-width:900px){.top__logo .logo{height:66px}}
/* once the page is under way the logo settles a little smaller in the solid bar */
.top.solid .logo{transform:scale(.8)}
html.dark-top .top__logo .logo{color:#f3efe7}
.logo__fill,.logo__word path{fill:currentColor}
.logo__ring{fill:none;stroke:none}
.logo__thread{fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 9999}
/* arrival: the rings draw themselves in fine line, then the mark fills and the word appears */
html.logo-wait .logo__fill{opacity:0;transition:opacity 1s var(--caress) 1.25s}
html.logo-wait .logo__ring{stroke:currentColor;stroke-width:.55;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:opacity .9s var(--caress) 1.45s}
html.logo-wait .logo__word{opacity:0;transition:opacity 1.4s var(--caress) 1.1s}
html.logo-wait.logo-go .logo__ring{animation:logoDraw 1.5s var(--soft) forwards;animation-delay:calc(var(--i) * 110ms);opacity:0}
html.logo-wait.logo-go .logo__fill,html.logo-wait.logo-go .logo__word{opacity:1}
@keyframes logoDraw{to{stroke-dashoffset:0}}

/* where Pangea has no honest photograph yet, type stands in its place */
.r-blank{display:block;background:var(--sand);border:1px solid var(--line)}
.sn__plate{display:grid;align-content:end;gap:14px;width:100%;height:100%;padding:30px;background:var(--sand);color:var(--ink);font-size:clamp(22px,2vw,30px);font-weight:200;line-height:1.2;letter-spacing:-.01em}
.sn__plate .eyebrow{color:var(--mute)}
.tp__plate{display:grid;gap:18px;padding:clamp(40px,6vw,90px) clamp(24px,4vw,64px);margin-bottom:56px;background:var(--sand);border-radius:2px}
.tp__plate__l{font-size:clamp(26px,3vw,46px);font-weight:200;color:var(--ink);line-height:1.15;letter-spacing:-.02em;max-width:24ch}